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内 容 提 要 


本 书 是 JavaScript 经 典 图 书 的 新 版 。 第 4 版 涵盖 ECMAScript 2019， 人 全面、 深入 地 介绍 了 JavaScript 开 
发 者 必须 掌握 的 前 端 开发 技术 ， 涉 及 a 的 基础 特性 和 高 级 特性 。 书 中 说 EF 尽 讨论 了 JavaScript 的 各 个 
方面 ， 从 JavaScript 的 起 源 开 始 ， 逐 步 讲解 到 新 出 现 的 技术 ， 其 中 重 到 介绍 ECMAScript 和 DOM 标准 。 在 
此 基础 上 ， 接 下 来 的 各 章 揭 示 了 JavaScript 的 基本 概念 ， 包 括 类 、 期 约 、 友 代 器 、 人 代理， 等 等 。 另 外 ， 书 
中 深入 探讨 了 客户 端 检 测 、 事 件 、 动 画 、 表 单 、 错 误 处 理 及 JSON。 本 书 同时 也 介绍 了 近 丘 几 年 来 涌现 的 重 
要 新 规范 ， 包 括 Fetch API、 模 块 、 工 作者 线程 、 服 务 线程 以 及 大 量 新 API。 

本 书 适合 有 一 定编 程 经 验 的 Web 应 用 程序 开发 人 员 阅 读 ， 也 可 作为 高 校 及 社会 实用 技术 培训 相关 专 
业 课 程 的 教材 。 
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详 者 打 


七 年 弹指 一 挥 间 。2012 年 到 


2019 年 是 JavaScript 莲 勃 发 








展 的 七 年 ， 易 易 大 名 的 Stack Overflow 调查 














显示 ， 截 至 2019 年 ，JavaScript 





language ) 榜首 。 事 实 上 ，2020 年 的 调查 结 生 


2012 年 是 这 本 被 誉 为 JavaScript 


已 连续 七 年 位 居 “ 最 党 


“ 红 宝 : 


















































编程 语言 ”( most commonly used programming 


也 毫 无 悬念 ，JavaScript 依旧 独占 鳌头 。 
”的 著作 第 3 版 出 版 的 时 间 。 生 着 其 时 ,第 3 版 狂 销 几 十 





万 肌 ， 影 响 深远 ， 其 至 改变 了 很 多 人 的 命运 ( 包括 本 书 译 者 )。 随 着 ECMAScript 2015 (ES6 ) 的 发 布 ， 














JavaScript 这 门 语言 再 











如 今 ， 跨 过 一 个 年 头 ， 中 文 版 也 要 付 梓 了 。 


“ 红 宝 书 ”的 这 一 版 延续 了 上 一 版 的 框架 和 格 





次 被 注入 新 的 生机 与 活力 。2019 年 10 月 ， 涵 盖 ECMAScript 2019 的 第 4 版 面世 。 








出 减 了 


= 
本 ， 





补 了 ES2015 到 ES2019 的 全 新 内 容 ， 英 文 版 篇 幅 



































翻译 期 间 ， 译 者 虽然 尽 最 大 努力 
任 编辑 温 雪 ,感谢 她 对 译 稿 认 真 细 
上 市 。 
在 本 书 印行 前 夕 , 为 进 



































步 而 
































保 译文 准 而 

















保 出 版 质量 、 减 少 图 书 错误 , 我 们 邀请 了 数位 一 线 前 端 开 发 工程 师 共 


已 经 过 时 的 内 容 ， 在 此 基础 上 又 翔实 地 增 





也 达到 了 前 所 未 有 的 1100 多 页 。 


、 通顺 , 但 错漏 之 处 在 所 
致 的 编辑 和 审 校 ， 以 及 对 出 版 流程 的 卓越 把 控 ,确保 了 中 文 版 的 早日 





人 E 免 。 为 此 特别 感谢 本 书 责 





























同 对 本 书 进 行 了 预 读 和 勘误 。 在 短 短 两 周 时 间 内 ， 大 家 分 工 协作 ， 算 查 、 发 现 并 “消灭 ”了 不 少 文字 、 


排版 、 代 码 和 技术 上 的 问题 
梁 幸 艺 、 陈 方 旭 、 林 景 宜 


孙 且 、 












































， 大 大 提升 了 本 书 首 印 质量 。 他 们 分 别 是 〈 按 审读 章节 顺序 排序 ) 化 占 平 、 











王 欢 、 刘 冰晶 、 邢 洋洋 、 刘 博文 、 
师 俊 (Hax ) 对 “期 约 ”( promise ) 及 相关 一 系列 术语 翻译 的 建议 。 





刘 观 宇 、 王 佳 裕 。 特 此 致谢 。 特 别 感 谢 贺 








最 后 ， 衷 心 祝 愿 需 患 “ 莱 姆 病 ”( Lyme disease ) 的 Nicholas Zakas 早日 康复 。 




















2020 年 7 月 15 日 
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工业 革命 是 钢铁 铸就 的 ， 互 联网 革命 则 是 JavaScript 造就 的 。25 年 的 反复 锻造 与 打磨 ， 成 就 了 





JavaScript 在 今天 的 应 用 程序 开发 中 毋庸 置疑 的 统治 : 











Brendan Eich 只 上 
明 ， 第 一 印象 并 不 代表 一 切 。 今 天 ,这 门 语 言 的 每 个 细节 ， 也 就 是 这 本 书 所 涉及 的 方 方 面 本 
让 人 满意 , 也 没有 完美 的 编程 语言 , 不 过 单 从 无 所 不 在 这 方 国 





推 项 的 产物 。 并 非 所 有 决定 者 






































到 是 很 接近 完 





美 。 它 是 目前 唯一 一 个 可 以 随处 部 署 的 语言 : 服务 右 、 桌 面 浏览 涡 、 手 机 浏览 
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生 移 动 应 用 程 





JavaScript 目前 的 使 用 者 有 不 同 层 次 的 软 从 


序 中 都 有 它 的 身 








国 / 
尿 Z o 





雅 的 软件 为 目标 ， 还 是 仅仅 为 了 完成 业绩 而 简单 堆砌 一 个 系统 ，JavaScript 都 能 派 上 
一 切 尽 在 你 的 掌握 之 中 。 
E 中 ,JavaScript 工具 和 最 佳 实践 已 经 发 生 了 天 翻 地 履 的 变化 ,2004 年 ， 














怎么 使 用 
我 开始 接触 这 
播放 带 的 天 下 














中 开始 使 用 它 。 后 来 我 又 帮助 一 些 个 人 网 站 修改 和 自 定义 功能 ， 


也 因此 喜欢 上 
当初 我 创 


JavaScript 完全 和 











门 语言 ， 









































地 位 ， 但 并 非 一 开始 就 是 如 此 。 











取决 于 你 。 
15 年 的 软件 开发 生涯 
当时 还 是 


FE 工程师， 他 们 的 背景 各 异 。 无 论 是 以 天 





崩 10 天 就 写 出 了 JavaScript 的 第 一 版 。 初 生 的 JavaScript 看 似 弱 不 禁 风 ， 但 历史 表 








i， 都 是 反复 

















1 看 , JavaScript 



































用 场 


























， 甚 至 原 


F 发 设计 精良 、 优 
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E 虎 地 球 村 ( Geocities )、 和 雅虎 群 组 ( Yahoo Groups ) 和 Macromedia Flash 





。JavaScript 给 人 感觉 像 个 玩具 ， 当 时 我 在 RSS、MySpace Profile Pages 等 流行 的 沙 盒 环境 
那 种 感觉 就 像 在 狂 野 的 西部 拓荒， 而 我 


Ts 


建 第 一 家 公司 的 



































时 候 ， 配 置 主机 装 个 数据 库 要 花 几 天 时 间 ， 而 JavaScript 只 


要 扔 到 HTML 


里 就 可 以 跑 起 来 。“ 前 端 应 用 程序 ”是 不 存在 的 ， 主 要 是 零 七 碎 八 的 函数 。 后 来 Ajax 因为 jQuery 火 了 而 





变 得 更 加 流行 
直到 有 一 天 遇 








视图 ， 全 都 爆发 出 来 了 。 我 就 在 这 个 时 候 搬 到 看 





， 这 才 打 开 了 通 
到 了 发 展 瓶 颈 ， 











了 几 百 万 。 置 身 硅谷 这 么 长 时 间 以 来 ,我 也 为 开源 做 了 一 些 贡 





了 一 点 儿 运 。 
建 其 经 济 基础 
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我 很 高 兴 在 马 特 第 一 次 到 帕 洛 阿 尔 托 的 一 家 小 型 创 ] 





Claco， 当 时 我 刚 


就 开发 出 一 球 











设施 。 




















向 新 世界 的 大 门 ， 可 靠 、 稳 定 的 应 用 程序 应 运 而 生 。 这 股 风潮 愈演愈烈 ， 
日 突 然 间 ， 强 大 的 框架 诞生 了 了。 前端 模 型 、 数 据 绑 定 、 路 由 管理 、 反 应 式 
E 谷 ， 帮 人 打 理 一 家 公司 。 很 快 ,使 用 我 代码 的 用 














户 达到 











献 ， 培 训 了 不 计 其 数 的 软 从 






































漂亮 的 产品 。 一 如 为 硅谷 公司 设立 标杆 的 惠普 ， 


F 工 程 师 ， 也 走 


我 的 上 一 家 公司 在 2018 年 被 Stripe 收购 ， 我 现在 就 供职 于 这 家 公司 ， 致 力 于 为 互联 网 构 
此 公司 领导 工程 化 时 结识 了 他 。 那 家 公司 叫 
成 为 它 的 顾问 。 他 追求 伟大 软件 的 活力 和 激情 溢于言表 ， 而 这 家 羽翼 未 丰 的 公司 很 快 
这 家 创业 公司 也 诞生 在 一 间 平 房 里 。 但 这 





序 vii 























可 不 是 寻常 的 民房 ， 而 是 一 间 “ 黑 客 屋 ”， 里 面 十 几 位 才华 横 溢 的 软件 工程 师 经 常 通宵 达旦 地 工作 。 虽 
然 过 的 不 是 什么 高 档次 生活 一 一 他 们 坐 的 都 是 别人 扔 在 大 街 上 的 那 种 沙发 床 和 旧 椅 子 一 一 他 们 在 这 间 
房子 里 每 天 所 写 代码 的 数量 和 质量 却 引 人 瞩目 。 连 续 工 作 几 小 时 后 , 大 多 数 人 会 把 精力 投入 到 公司 的 另 
一 个 子 项 目 上 , 然后 又 是 几 个 小 时 的 工作 。 不 太 会 写 代码 的 人 也 常 受 启发 , 发 现 自己 学 习 的 淘 望 ,然后 
仅仅 几 个 星期 后 就 变 成 了 代码 能 手 。 

马 特 是 促成 这 种 开发 效率 的 关键 角色 。 他 是 “黑客 屋 ” 里 经 验 最 丰富 的 人 ， 恰 好 也 是 思维 最 清晰 、 
最 专业 的 一 个 。 拿 到 计算 机 工程 学 位 并 不 能 说 明 什么 ， 只 要 在 窗户 或 者 白板 上 看 到 马 特写 的 算法 、 性 能 
计算 以 及 代码 ,你 就 知道 马 特 又 在 专注 于 他 的 下 一 个 大 项 目 。 随 着 我 对 他 了 解 的 加 深 , 我 们 成 为 了 好 朋 
友 。 他 的 领悟 能 力 ， 他 对 培训 工作 的 热爱 ， 以 及 几乎 可 以 把 所 有 东西 转化 成 笑话 的 能 力 ， 都 是 我 所 欣赏 
的 品质 。 


昌 然 马 特 是 一 位 极 具 才华 的 软件 工程 师 和 项 目 领 导 ， 但 他 之 所 以 能 成 为 本 书 作者 独一无二 的 人 选 ， 
还 是 凭借 他 独 有 的 经 验 和 知识 。 


他 不 仅仅 花 时 间 教 别人 ， 而 且 还 把 这 本 书写 完了 。 

在 Claco, 他 开发 了 多 款 整 体 性 产品 , 端 到 端 地 帮助 教师 在 课堂 上 提供 更 好 的 学 习 体验 。 在 DoorDash， 
他 是 第 一 位 工程 师 ,， 开发 了 一 个 可 靠 的 物流 配送 系统 并 实现 了 高 速 增长 ， 目 前 公司 佑 值 超 过 了 120 亿美 
元 。 最 后 ， 在 Google， 马 特写 的 软件 已 经 被 这 个 星球 上 的 数 十 亿 人 使 用 了 。 

全 情 投 入 ,快速 增长 ， 誉 满 天 下 一 一 多 数 软件 工程 师 终 其 一 生 也 只 能 体验 到 其 中 一 项 ， 而 且 还 得 运 
气 好 。 马 特 不 仅 体验 到 了 全 部 ， 还 成 为 了 畅销 书 作 者 。 除 了 本 书 ， 他 还 写 了 两 本 JavaScript 和 Angular 
的 书 。 说 实话 ， 我 就 想 知道 他 什么 时 候 能 写 一 本 书 ， 把 自己 管理 时 间 的 奥秘 分 享 出 来 。 

本 书 是 一 部 翔实 的 工具 书 ， 满 满 的 都 是 JavaScript 知识 和 实用 技术 。 我 热切 希望 本 书 读者 能 够 不 断 
学 习 ， 并 亲手 打造 属于 自己 的 梦想 。 欢 迎 大 家 多 多 挑 错 ， 多 记 笔 记 ， 别 忘 了 打开 代码 编辑 器， 毕竟 互联 
网 革命 才刚 刚 开始 ! 
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关于 JavaScript， 舍 歌 公司 的 一 位 技术 经 理 曾 经 跟 我 分 享 过 一 个 无 法 反 驶 的 观点 。 他 说 JavaScript 
并 不 是 一 门 真 正 有 内 聚 力 的 编程 语言 , 至 少 形式 上 不 是 ECMA-262 规范 定义 了 JavaScript, 但 JavaScript 
没有 唯一 正确 的 实现 。 更 重要 的 是 ， 这 门 语言 与 其 宿主 关系 密切 。 实 际 上 宿主 为 JavaScript 定义 了 与 外 
界 交 互 所 需 的 全 部 API: DOM、 网 络 请 求 、 系 统 硬件 、 存 储 、 事 件 、 文 件 、 加 密 ， 还 有 数 以 百 计 的 其 他 
API。 各 种 浏览 器 及 其 JavaScript 引擎 都 按照 自己 的 理解 实现 了 这 些 规 范 。Chrome 有 Blink/V8，Firefox 
有 Gecko/SpiderMonkey，Safari 有 WebKit/JavaScriptCore， 微软 有 Trident/EdgeHTML/Chakra。 浏 览 絮 以 
合 规 的 方式 运行 绝 大 多 数 JavaScript, 但 Web 上 随处 可 见 迎 合 各 种 浏览 占 偏 好 的 页 面 ,因此 ,对 JavaScript 
更 准确 的 定位 应 该 是 一 组 浏览 带 实 现 。 

Web 纯化 论 者 可 能 认为 JavaScript 本 身 并 非 网 页 不 可 或 缺 的 部 分 ， 但 他 们 必须 承认 ， 如 果 没 有 

JavaScript， 那 么 现代 Web 势必 发 生 严重 倒退 。 训 不 夸张 地 讲 ，JavaScript 才 是 真正 不 可 或 缺 的 。 如 今 ， 
手机 、 计 算 机 、 平 板 设备 、 电 视 、 游 戏 机 、 智 能 手表 、 冰 箱 ， 甚 至 连 汽 车 都 内 置 了 可 以 执行 JavaScript 
代码 的 Web 浏览 器 。 地 球 上 有 近 30 亿 人 在 使 用 安装 了 Web 浏览 器 的 智能 手机 。 这 门 语 言 迅速 发 展 的 社 
又 众生 了 大 量 高 质量 的 开源 项 目 。 浏览 器 也 已 经 支持 模拟 原生 移动 应 用 程序 的 API。Stack Overflow 2019 
年 的 开发 者 调查 显示 ，JavaScript 连续 七 年 位 于 最 流行 编程 语言 榜首 。 

我 们 正 迎 来 JavaScript 的 文艺 复兴 。 

本 书 将 从 JavaScript 的 起 源 讲 起 ， 从 最 初 的 Netscape 浏览 器 直到 今天 各 家 浏览 器 支持 的 让 人 眼花 综 
乱 的 技术 。 全 书 对 大 量 高 级 技术 进行 了 鞭 辟 和 里 的 剖析 ， 以 确保 读者 真正 理解 这 些 技术 并 掌握 它们 的 应 
用 场景 。 简 而 言 之 ， 通 过 学 习 本 书 ， 读 者 可 以 透彻 地 理解 如 何 选择 恰当 的 JavaScript 技术 ， 以 解决 现实 
开发 中 遇 到 的 业务 问题 。 
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读者 对 象 
本 书 适 合 以 下 读者 阅读 。 
口 有 经 验 的 开发 者 ,熟悉 面向 对 象 编程 , 因为 JavaScript 与 Java 和 C++ 等 传统 面向 对 象 (00 , Object 


Oriented ) 语言 的 关系 而 希望 学 习 JavaScript。 
口 Web 应 用 程序 开发 者 ， 和 希望 增强 自己 的 网 站 或 Web 应 用 程序 的 易 用 性 。 
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口 初级 JavaScript 开发 者 ,希望 更 好 地 理解 这 门 语言 。 
此 外 ， 熟 悉 以 下 相关 技术 对 阅读 本 书 非常 有 帮助 。 

口 Java 

口 PHP 

口 Python 

口 Ruby 

口 Golang 

DQ HTML 

口 CSS 











本 书 内 容 

本 书 第 4 版 全 面 深入 地 介绍 了 JavaScript 开发 者 必须 掌握 的 前 端 开发 技术 ,涉及 JavaScript 的 基础 特 
性 和 高 级 特性 。 

本 书 从 JavaScript 的 起 源 开始 ,逐步 讲解 到 今天 的 最 新 技术 , 书 中 详尽 讨论 了 JavaScript 的 各 个 方面 ， 
重点 介绍 ECMAScript 和 DOM 标准 。 

在 此 基础 上 ， 接 下 来 的 各 章 揭示 了 JavaScript 的 基本 概念 ， 包 括 类 、 期 约 、 迭 代 器 、 代 理 ， 等 等 。 
男 外 ， 书 中 还 深入 探讨 了 客户 端 检 测 、 事 件 、 动 画 、 表 单 、 错 误 处 理 及 JSON。 

本 书 最 后 介绍 近 几 年 来 涌现 的 最 新 和 最 重要 的 规范 ， 包 括 Fetch API、 模 块 、 工 作者 线程 、 服 务 线 
程 以 及 大 量 新 API。 









































组 织 结构 

本 书包 含 如 下 这 些 章 。 多 个 章节 配 有 免费 视频 课 二 维 码 ， 扫 描 即 可 观看 。 
第 1 章 , 介绍 JavaScript 的 起 源 : 从 哪里 来 ， 如 何 发 展 ， 以 及 现今 的 状况 。 这 一 章 会 谈 到 JavaScript 
与 ECMAScript 的 关系 、DOM、BOM， 以 及 Ecma 和 W3C 相关 的 标准 。 

第 2 章 ， 了 解 JavaScript 如 何 与 HTML 结合 来 创建 动态 网 页 ， 主 要 介绍 在 网 页 中 骨 入 JavaScript 的 
不 同方 式 ， 还 有 JavaScript 的 内 容 类 型 及 其 与 <script > 元 素 的 关系 。 

第 3 章 , 介绍 语言 的 基本 概念 ， 包 括 语法 和 流 控制 语句 ;解释 JavaScript 与 其 他 类 C 语言 在 语法 上 
的 异同 点 。 在 讨论 内 置 操作 符 时 也 会 谈 到 强制 类 型 转换 。 此 外 还 将 介绍 所 有 的 原始 类 型 , 包括 Symbol。 
第 4 章 ， 探索 JavaScript 松散 类 型 下 的 变量 处 理 。 这 一 章 将 涉及 原始 类 型 与 引用 类 型 的 不 同 ， 以 及 
与 变量 有 关 的 执行 上 下 文 。 此 外 ， 这 一 章 也 会 讨论 JavaScript 中 的 垃圾 回收 ， 涉 及 在 变量 超出 作用 域 时 
如 何 回收 内 存 。 

第 5 章 ， 讨 论 JavaScript 所 有 内 置 的 引用 类 型 ， 如 Date 、Regexp 、 原 始 类 型 及 其 包装 类 型 。 每 种 






























































用 类 型 既 有 理论 上 的 讲解 ， 也 有 相关 浏览 器 实现 的 剖析 。 
第 6 章 ， 继 续 讨论 内 置 引用 类 型 ， 包 括 object 、Array、Mapb、WeakMap 、Set 和 WeakSet 等 。 
第 7 章 ， 介 绍 ECMAScript 新 版 中 引入 的 两 个 基本 概念 : 迭代 器 和 生成 器 ， 并 分 别 讨论 它 们 最 基本 
的 行为 和 在 当前 语言 环境 下 的 应 用 。 
第 8 章 , 解释 如 何在 JavaScript 中 使 用 类 和 面向 对 象 纺 
进而 探讨 原型 式 继承 ， 接 下 来 全 面 介绍 ES6 类 及 其 与 
第 9 章 , 介绍 两 个 紧密 相关 的 概念 : Proxy ( 代理 
截 和 修改 这 门 语言 的 基本 操作 。 
第 10 章 ,探索 JavaScript 最 强大 的 一 个 特性 : 函数 表达 式 ， 主 要 涉及 闭 包 、this 对 象 、 模 块 模式 、 
创建 私有 对 象 成 员 、 箭 头 函 数 、 默 认 参 数 和 扩展 操作 符 。 

第 11 章 , 介 绍 两 个 紧密 相关 的 异步 编程 构造 :Promise 类 型 和 async/await。 这 一 章 讨论 JavaScript 
步 编程 范式 ， 进 而 介绍 期 约 (promise ) 与 异步 国 数 的 关系 。 

第 12 章 ， 介 绍 BOM， 即 浏览 絮 对 象 模型 ， 跟 与 浏览 器 本 身 交 互 的 API 相关 。 所 有 BOM 对 象 都 会 

涉及 ， 

第 13 章 ， 解 释 检 测 客户 端 机 器 及 其 能 力 的 不 同 手段 ， 包 括 能 力 检测 和 

章 讨论 每 种 手段 的 优 缺 点 ， 以 及 适用 的 场景 。 

第 14 章 , 介绍 DOM, 即 文档 对 象 模型 ， 主 要 是 DOM Level 1 定义 的 API。 这 一 

及 其 与 DOM 的 关系 ， 进 而 全 面 探索 DOM 以 及 如 何 利 用 它 操 作 网 页 。 

第 15 章 ,， 解释 其 他 DOM API， 包 括 浏览 器 本 身 对 DOM 的 扩展 ， 主 要 涉及 Selectors API、Element 

Traversal API 和 HTMLS5 扩展 。 


第 16 章 ， 在 之 前 两 章 的 基础 上 ， 解 释 DOM Level2 和 Level 3 对 DOM 的 扩展 ， 包 括 新 增 的 
方法 和 对 象 。 这 一 章 还 会 介绍 DOM4 的 相关 内 容 ， 比 如 Mutation Observer。 
第 17 章 ， 解 释 事 件 在 JavaScript 中 的 本 质 ， 以 及 事件 的 起 源 及 其 在 DOM 中 的 运行 方式 。 
第 18 章 ， 围 绕 <canvas> 标 签 讨 论 如 何 创 建 动 态 图 形 ， 包 括 2D 和 3D 上 下 文 (WebGL ) 等 动画 和 
游戏 开发 所 需 的 基础 。 这 一 章 还 会 讨论 WebGL1 和 WebGL2。 
第 19 章 , 探索 使 用 JavaScript 增 强 表单 交互 及 突破 浏览 器 限制 ,主要 讨论 文本 机 
素 及 数据 验证 和 操作 。 

第 20 章 ， 介 绍 各 种 
Timing 、Web Components 和 Web Cryptography。 

第 21 章 , 讨论 浏览 器 如 何 处 理 JavaScript 代码 中 的 错误 及 几 种 错误 处 理 方式 。 这 一 章 同 时 介绍 了 每 
种 浏览 需 的 调试 工具 和 技术 ， 包 括 简化 调试 过 程 的 建议 。 
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程 。 首先 会 深入 讨论 JavaScript 的 object 
原型 式 继承 的 紧密 关系 。 


EE ) 和 Reflect (反射 ) API。 代 理 和 反射 用 
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包括 window、document、location、navigator 和 screen 等 。 








有 户 代理 字 





检测 。 这 一 














章 将 简单 讨论 XML 
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h JavaScript API， 包 括 Atomics 、Encoding 、File、Blob 、Notifications 、Streams、 
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第 22 章 ， 介 绍 通过 JavaScript 读 取 和 操作 XML 数据 的 特性 ， 解 释 了 不 同 浏览 器 支持 特性 和 对 象 的 


差异 ， 提 供 了 简化 跨 浏览 器 编码 的 建议 。 这 一 章 也 讨论 了 使 用 XSLT 在 客户 端 转换 XML 数据 。 
第 23 章 ， 介绍 作为 XML 替代 的 JSON 数据 格式 ， 还 讨论 了 浏览 器 原生 解析 和 序列 化 JSON， 以 及 

















使 用 JSON 时 要 注意 的 安全 问题 。 











第 24 章 ， 探 讨 浏览 器 请 求 数据 和 资源 的 常用 方式 ， 包 括 早期 的 xMLHttpRequest 和 现代 的 Fetch API。 
第 25 章 ， 讨 论 应 用 程序 离线 时 在 客户 端 机 器 上 存储 数据 的 各 种 技术 。 先 从 cookie 谈 起 ， 然 后 讨论 














Web Storage 和 IndexedDB。 














第 26 章 ,介绍 模块 模式 在 编码 中 的 应 用 ,进而 讨论 ES6 模块 之 前 的 模块 加 载 方式 ,包括 CommonJS、 

















AMD 和 UMD。 最 后 介绍 新 的 ES6 模块 及 其 正确 用 法 。 


第 27 章 ， 深 入 介绍 专用 工作 者 线程 、 共 享 工作 者 线程 和 服务 工作 者 线程 。 其 
操作 系统 和 浏览 器 层面 的 实现 ， 以 及 使 用 各 种 工作 者 线程 的 最 佳 策略 。 









































' 包 括 工作 者 线程 在 














第 28 章 , 探讨 在 企业 级 开发 中 进行 JavaScript 编码 的 最 佳 实践 。 其 中 提 到 了 提升 代码 可 维护 性 的 编 
码 惯例 ,包括 编码 技巧 、 格 式 化 及 通用 编码 建议 。 深 入 讨论 应 用 性 能 和 提升 速度 的 技术 。 最 后 介绍 与 上 


















































线 部 署 相关 的 话题 ， 包 括 项 目 构 建 流程 。 





预备 条 件 
要 运行 本 书 示例 代码 ， 需 要 如 下 条 件 。 
口 现代 操作 系统 ， 包 括 Windows、Linux 、Mac OS 、Android 或 iOS。 











扫描 封底 二 维 码 ， 可 以 下 载 本 书 源 代码 ， 并 加 入 图 灵 前 端 研发 小 组 。” 











电子 书 及 附录 


口 现代 浏览 器 ,如 正 11+、Edge 12+、Firefox 26+ 、Chrome 39+、Safari 10+、Opera 26+ 或 iOS Safari 10+。 


扫描 下 方 二 维 码 ， 即 可 购买 本 书 中 文 版 电子 书 ， 并 从 “ 随 书 下 载 ”处 获取 本 书 电子 版 附录 。 
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Qa 读者 也 可 访问 本 书 图 灵 社 区 页 面 ( https://www.ituring.com.cn/book/2472 ) 下 载 本 书 配 套 学 习 资 源 ， 并 提交 中 文 版 勘误 。 
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本 章 内 容 

口 JavaScript 历史 回顾 

口 JavaScript 是 什么 

口 JavaScript 与 ECMAScript 的 关系 
口 JavaScript 的 不 同 版 本 

















1995 年 ，JavaScript 问世 。 当 时 ， 它 的 主要 用 途 是 代 蔡 Perl 等 服务 器 端 语言 处 理 输 入 验证 。 在 此 之 
前 ,要 验证 某 个 必 填 字段 是 否 已 填写 , 或 者 某 个 输入 的 值 是 否 有 效 ， 需要 与 服务 器 的 一 次 往返 通信 。 网 
景 公司 希望 通过 在 其 Navigator 浏览 涡 中 加 入 JavaScript 来 改变 这 个 局 面 。 在 那个 普遍 通过 电话 拨号 上 网 
的 年 代 ， 由 客户 端 处 理 某 些 基 本 的 验证 是 让 人 兴奋 的 新 功能 。 缓慢 的 网 速 让 页 面 每 次 刷新 都 考验 着 人 们 
的 耐心 。 

从 那 时 起 ，JavaScript 逐渐 成 为 市 面 上 所 有 主流 浏览 器 的 标 配 。 如 今 ，JavaScript 的 应 用 也 不 再 局 限 
于 数据 验证 ， 而 是 渗透 到 浏览 器 窗口 及 其 内 容 的 方方面面 。JavaScript 已 被 公认 为 主流 的 编程 语言 ， 能 
够 实现 复杂 的 计算 与 交互 ， 包 括 闭 包 、 匿 名 (lambda ) 函数 ， 甚 至 元 编程 等 特性 。 不 仅 是 桌面 浏览 器 ， 
手机 浏览 器 和 屏幕 阅读 器 也 支持 JavaScript, 其 重要 性 可 见 一 斑 。 就 连 拥 有 自家 客户 端 脚本 语言 VBScript 
的 微软 公司 , 也 在 其 Internet Explorer ( 以 下 简称 下 ) 浏览 器 最 初 的 版 本 中 包含 了 自己 的 JavaScript 实现 。 

从 简单 的 输入 验证 脚本 到 强大 的 编程 语言 ，JavaScript 的 崛起 没有 任何 人 预测 到 。 它 很 简单 ， 学 会 
用 只 要 几 分 钟 ; 它 又 很 复杂 ， 掌 握 它 要 很 多 年 。 要 真正 学 好 用 好 JavaScript， 理 解 其 本 质 、 历 史 及 局 限 
性 是 非常 重要 的 。 


1.1 简短 的 历史 回顾 


随 着 Web 日 益 流行 ， 对 客户 端 脚 本 语言 的 需求 也 越 来 越 强烈 。 当 时 ， 大 多 数 用 户 使 用 28.8kbit/s 的 
调制 解 调 器 上 网 ,但 网 页 变 得 越 来 越 大 、 越 来 越 复杂 。 为 验证 简单 的 表单 而 需要 大 量 与 服务 器 的 往返 通 
信 成 为 用 户 的 痛 点 。 想 象 一 下 ， 你 填写 完 表单 ， 单 击 “ 提 交 ” 按 钮 ， 等 30 秒 处 理 ， 然 后 看 到 一 条 消息 ， 
告诉 你 有 一 个 必 填 字段 没 填 。 网 景 在 当时 是 引领 技术 革新 的 公司 ， 它 将 开发 一 个 客户 端 脚 本 语言 来 处 理 
这 种 简单 的 数据 验证 提 上 了 日 程 。 

1995 年 , 网 景 公司 一 位 名 叫 Brendan Eich 的 工程 师 , 开始 为 即将 发 布 的 Netscape Navigator 2 开发 一 
个 叫 Mocha( 后 来 改名 为 LiveScript ) 的 脚本 语言 。 当 时 的 计划 是 在 客户 端 和 服务 器 端 都 使 用 它 ， 它 在 
服务 器 端 叫 LiveWire。 

为 了 赶 上 发 布 时 间 ， 网 景 与 Sun 公司 结 为 开发 联盟 ， 共 同 完成 LiveScript 的 开发 。 就 在 Netscape 
Navigator2 正式 发 布 前 , 网 景 把 LiveScript 改名 为 JavaScript， 以 便 搭 上 媒体 当时 热烈 炒作 Java 的 顺风 车 。 












































































































































































































































































































































2 第 1 章 什么 是 JavaScript 











由 于 JavaScript 1.0 很 成 功 , 网 景 又 在 Netscape Navigator 3 中 发 布 了 1.1 





版 本 。 尚 未 成 熟 的 Web 的 受 


欢迎 程度 达到 了 历史 新 高 ， 而 网 景 则 稳 居 市 场 领导 者 的 位 置 。 这 时 候 ， 微 软 决 定向 IE 投入 更 多 资源 。 
就 在 Netscape Navigator 3 发 布 后 不 久 ， 微 软 发 布 了 IE3 ， 其 中 包含 自己 名 为 JScript ( 叫 这 个 名 字 是 为 了 
避免 与 网 景 发 生 许可 纠纷 ) 的 JavaScript 实现 。1996 年 8 月 ,微软 重 磅 进入 Web 浏览 器 领域 , 这 是 网 景 























永远 的 痛 ， 但 它 代表 JavaScript 作为 一 门 语言 向 前 迈进 了 一 大 步 。 


























微软 的 JavaScript 实现 意味 着 出 现 了 两 个 版 本 的 JavaScript: Netscape Navigator 中 的 JavaScript， 以 
及 正中 的 JScript。 与 C 语 言 以 及 很 多 其 他 编程 语言 不 同 ，JavaScript 还 没有 规范 其 语法 或 特性 的 标准 ， 














两 个 版 本 并 存 让 这 个 问题 更 加 突出 了 。 随 着 业界 担忧 日 甚 ，JavaScript 终于 











踏 上 了 标准 化 的 征程 。 


1997 年 , JavaScript 1.1 作为 提案 被 提交 给 欧洲 计算 机 制造 商 协会 (Ecma )。 第 39 技术 委员 会 (TC39 ) 
承担 了 "标准 化 一 门 通用 . 跨 平 台 .厂商 中 立 的 脚本 语言 的 语法 和 语义 ”的 任务 ( 参见 TC39-ECMAScript )。 
TC39 委员 会 由 来 自 网 景 、Sun、 微 软 、Borland、Nombas 和 其 他 对 这 门 脚本 语言 有 兴趣 的 公司 的 工程 师 









































组 成 。 他 们 花 了 数 月 时 间 打 造 出 ECMA-262， 也 就 是 ECMAScript ( 发 音 为 
本 语言 标准 。 














“ek-ma-script”) 这 个 新 的 脚 


1998 年 ， 国 际 标准 化 组 织 (ISO ) 和 国际 电工 委员 会 (IEC ) 也 将 ECMAScript 采纳 为 标准 (ISO/ 
IEC-16262 )。 自 此 以 后 ， 各 家 浏览 器 均 以 ECMAScript 作为 自己 JavaScript 实现 的 依据 ， 虽 然 具 体 实 现 











各 有 不 同 。 


1.2 ” JavaScript 实现 














没 错 ， 完 整 的 JavaScript 实现 包含 以 下 几 个 部 分 〈 见 图 1-1 ): 
口 核心 (ECMAScript ) 

口 文档 对 象 模型 (DOM ) 

口 浏览 器 对 象 模型 (BOM ) 




















JavaScript 
ECMAScript DOM BOM 
图 1-1 


1.2.1 ECMAScript 


ECMAScript， 即 ECMA-262 定义 的 语言 ， 并 不 局 限于 Web 浏览 髓 。 导 
偷 出 之 类 的 方法 。 ECMA-262 将 这 门 语言 作为 一 个 基准 来 定义 , 以 便 在 它 之 














Web 浏览 器 只 是 ECMAScript 实现 可 能 存在 的 一 种 宿主 环境 ( host environment )。 窒 主 环境 提供 


ECMAScript 的 基准 实现 和 与 环境 自身 交互 必需 的 扩展 。 扩 展 ( 比如 DOM 

















虽然 JavaScript 和 ECMAScript 基本 上 是 同义词 ,但 JavaScript 远 远 不 限于 ECMA-262 所 定义 的 那样 。 


了 实 上 ， 这 门 语言 没有 输入 和 
上 再 构建 更 稳健 的 脚本 语言 。 




















) 使 用 ECMAScript 核心 类 型 





和 语法 , 提供 特定 于 环境 的 额外 功能 。 其 他 宿主 环境 还 有 服务 器 端 JavaScript 平 台 Nodejs 和 即将 被 淘汰 








的 Adobe Flash。 


1.2 ”JavaScript 实现 3 




















如 果 不 涉及 浏览 器 的 话 , ECMA-262 到 底 定义 了 什么 ?在 基本 的 层面 , 它 描述 这 门 语言 的 如 下 部 分 : | 
口 语法 


口 类 型 

口 语句 

口 关键 字 
口 保留 字 
口 操作 符 
口 全 局 对 象 

ECMAScript 只 是 对 实现 这 个 规范 描述 的 所 有 方面 的 一 门 语言 的 称呼 。JavaScript 实现 了 
ECMAScript， 而 Adobe ActionScript 同样 也 实现 了 ECMAScript。 

1. ECMAScript 版 本 

ECMAScript 不同 的 版 本 以 “edition ”表示 (也 就 是 描述 特定 实现 的 ECMA-262 的 版 本 )。ECMA-262 
最 近 的 版 本 是 第 10 版 ， 发 布 于 2019 年 6 月 。ECMA-262 的 第 1 版 本 质 上 跟 网 景 的 JavaScript 1.1 相同 ， 
只 不 过 删除 了 所 有 浏览 器 特定 的 代码 ， 外 加 少量 细微 的 修改 。ECMA-262 要 求 支持 Unicode 标准 ( 以 支 
持 多 语言 )， 而 且 对 象 要 与 平台 无 关 (Netscape JavaScript 1.1 的 对 象 不 是 这 样 ， 比 如 它 的 Date 对 象 就 依 
赖 平台 )。 这 也 是 JavaScript 1.1 和 JavaScript 1.2 不 符合 ECMA-262 第 1 版 要 求 的 原因 。 

ECMA-262 第 2 版 只 是 做 了 一 些 编校 工作 ， 主 要 是 为 了 更 新 之 后 严格 符合 ISOTEC-16262 的 要 求 ， 
并 没有 增 减 或 改变 任何 特性 。ECMAScript 实现 通常 不 使 用 第 2 版 来 衡量 符合 性 〈conformance )。 

ECMA-262 第 3 版 第 一 次 真正 对 这 个 标准 进行 更 新 ， 更 新 了 字符 串 处 理 、 错 误 定义 和 数值 输出 。 此 
外 还 增加 了 对 正则 表达 式 、 新 的 控制 语句 、try/catch 异常 处 理 的 支持 , 以 及 为 了 更 好 地 让 标准 国际 化 
所 做 的 少量 修改 。 对 很 多 人 来 说 ， 这 标志 着 ECMAScript 作为 一 门 真正 的 编程 语言 的 时 代 终 于 到 来 了 。 

ECMA-262 第 4 版 是 对 这 门 语言 的 一 次 彻底 修订 。 作 为 对 JavaScript 在 Web 上 日 益 成 功 的 回应 ， 开 
发 者 开始 修订 ECMAScript 以 满足 全 球 Web 开发 日 益 增 长 的 需求 。 为 此 ，Ecma T39 再 次 被 召集 起 来 ， 
以 决定 这 门 语言 的 未 来 。 结 果 ， 他 们 制定 的 规范 几乎 在 第 3 版 基础 上 完全 定义 了 一 门 新 语言 。 第 4 版 包 
括 强 类 型 变量 、 新 语句 和 数据 结构 、 真 正 的 类 和 经 典 的 继承 ,以 及 操作 数据 的 新 手段 。 

与 此 同时 ，TC39 委员 会 的 一 个 子 委员 会 也 提出 了 另外 一 份 提案 ， 叫 作 “ECMAScript 3.1”， 只 对 这 
门 语言 进行 了 较 少 的 改进 。 这 个 子 委员 会 的 人 认为 第 4 版 对 这 门 语言 来 说 跳跃 太 大 了 。 因 此 ， 他 们 提出 
了 一 个 改动 较 小 的 提案 ， 只 要 在 现 有 JavaScript 引擎 基 础 上 做 一 些 增 改 就 可 以 实现 。 最 终 , ES3.1 子 委员 
会 赢得 了 TC39 委员 会 的 支持 ，ECMA-262 第 4 版 在 正式 发 布 之 前 被 放弃 。 

ECMAScript 3.1 变 成 了 ECMA-262 的 第 5 版 ， 于 2009 年 12 月 3 日 正式 发 布 。 第 5 版 致力 于 厘 清 
第 3 版 存在 的 歧义 ， 也 增加 了 新 功能 。 新 功能 包括 原生 的 解析 和 序列 化 JSON 数据 的 xsoN 对 象 、 方 便 
继承 和 高 级 属性 定义 的 方法 ， 以 及 新 的 增强 ECMAScript 引擎 解释 和 执行 代码 能 力 的 严格 模式 。 第 5 版 
在 2011 年 6 月 发 布 了 一 个 维护 性 修订 版 ， 这 个 修订 版 只 更 正 了 规范 中 的 错误 ， 并 未 增加 任何 新 的 语言 
或 库 特 性 。 

ECMA-262 第 6 版 ， 众 称 ES6、ES2015 或 ES Harmony ( 和谐 版 )， 于 2015 年 6 月 发 布 。 这 一 版 包 
含 了 大 概 这 个 规范 有 史 以 来 最 重要 的 一 批 增强 特性 。ES6 正式 支持 了 类 、 模 块 、 迭 代 器 、 生 成 器 、 箭 头 
函数 、 期 约 、 反 射 、 代 理 和 众多 新 的 数据 类 型 。 

ECMA-262 第 7 版 ， 也 称 为 ES7 或 ES2016， 于 2016 年 6 月 发 布 。 这 次 修订 只 包含 少量 语法 层面 的 
增强 ， 如 Array.prototype.includes 和 指数 操作 符 。 
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ECMA-262 第 8 版 , 也 称 为 ES8、ES2017, 完成 于 2017 年 6 月 。 这 一 版 主要 增加 了 异步 函数 ( async/ 
await )、 SharedArrayBuffer 及 Atomics API, 以 及 Object .values ()/Object .entries ()/Object. 
getOwnPropertyDescriptors () 和 字符 串 填 充 方法 ， 另 外 明确 支持 对 象 字 面 量 最 后 的 逗号 。 

ECMA-262 第 9 版 ， 也 称 为 ES9、ES2018， 发 布 于 2018 年 6 月 。 这 次 修订 包括 异步 迭代 、 剩 余 和 
扩展 属性 、 一 组 新 的 正则 表达 式 特性 、Promise finally()， 以 及 模板 字面 量 修 订 。 

ECMA-262 第 10 版 , 也 称 为 ES10、ES2019, 发 布 于 2019 年 6 月 。 这 次 修订 增加 了 Array.prototype. 
flat()/flatMap() 、String.prototype.trimStart () 人 rimEnd() 、object .fromEntries() 方 
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法 , 以 及 Symbol .prototype.description 属性 , 明确 定义 了 Function.prototype.toString() 
的 返回 值 并 固定 了 Array .prototype.sort () 的 顺序 。 男 外 ， 这 次 修订 解决 了 与 JSON 字符 串 兼 容 的 
问题 ， 并 定义 了 catch 子 句 的 可 选 绑 定 。 

2. ECMAScript 符合 性 是 什么 意思 

ECMA-262 阐述 了 什么 是 ECMAScript 符合 性 。 要 成 为 ECMAScript 实现 ， 必 须 满足 下 列 条 件 : 

口 支持 ECMA-262 中 描述 的 所 有 “类 型 、 值 、 对 象 、 属 性 、 函 数 ， 以 及 程序 语法 与 语义 ”; 

口 支持 Unicode 字符 标准 。 

此 外 ， 符 合 性 实现 还 可 以 满足 下 列 要 求 。 

口 增加 ECMA-262 中 未 提 及 的 “额外 的 类 型 、 值 、 对 象 、 属 性 和 函数 "。ECMA-262 所 说 的 这 些 额 

外 内 容 主要 指 规范 中 未 给 出 的 新 对 象 或 对 象 的 新 属性 。 

口 支持 ECMA-262 中 没有 定义 的 “程序 和 正则 表达 式 语法 ”( 意思 是 允许 修改 和 扩展 内 置 的 正则 表 
达 式 特性 )。 

以 上 条 件 为 实现 开发 者 基于 ECMAScript 开发 语言 提供 了 极 大 的 权限 和 灵活 度 ， 也 是 其 广 受 欢迎 的 
原因 之 一 。 

3. 浏览 器 对 ECMAScript 的 支持 

1996 年 ，Netscape Navigator 3 发 布 时 包含 了 JavaScript 1.1。JavaScript 1.1 规范 随后 被 提交 给 Ecma,， 
作为 对 新 的 ECMA-262 标准 的 建议 。 随 着 JavaScript 迅速 走红 ， 网 景 非常 愿意 开发 1.2 版 。 可 是 有 个 问 
题 : Ecma 尚未 接受 网 景 的 建议 。 

Netscape Navigator 3 发 布 后 不 久 , 微软 推出 了 IE3。 正 的 这 个 版 本 包含 了 JScript 1.0， 本 意 是 提供 与 
JavaScript 1.1 相同 的 功能 。 不 过 ， 由 于 缺少 很 多 文档 ， 而 且 还 有 不 少 重 复 性 功能 ，JScript 1.0 远 远 没有 
JavaScript 1.1 那么 强大 。 

JScript 的 再 次 更 新 出 现在 IE4 中 的 JScript3.0 ( 2.0 版 是 在 Microsoft Internet Information Server 3.0 
发 布 的 , 但 从 未 包含 在 浏览 器 中 )。 微 软 发 新 闻 稿 称 JScript 3.0 是 世界 上 第 一 门 真正 兼容 Ecma 标准 的 肌 
本 语言 。 当 时 ECMA-262 还 没 制定 完成 ， 因 此 JScript3.0 遭受 了 与 JavaScript 1.2 同样 的 命运 ， 它 同样 没 
有 遵守 最 终 的 ECMAScript 标准 。 

网 景 又 在 Netscape Navigator 4.06 中 将 其 JavaScript 版 本 升级 到 1.3， 因 此 做 到 了 与 ECMA-262 第 1 
版 完全 兼容 。JavaScript 1.3 增加 了 对 Unicode 标准 的 支持 ， 并 做 到 了 所 有 对 象 都 与 平台 无 关 ， 同 时 保留 
了 JavaScript 1.2 所 有 的 特性 。 

后 来 ， 当 网 景 以 Mozilla 项 目的 名 义 向 公众 发 布 其 源 代码 时 ， 人 们 都 期 待 Netscape Navigator 5 中 会 
包含 JavaScript 1.4。 可 是 , 一 个 完全 重新 设计 网 景 代码 的 激进 决定 导致 了 人 们 的 希望 落空 。JavaScript 1.4 
只 在 Netscape Enterprise Server 中 作为 服务 需 端 语言 发 布 了 ， 从 来 就 没有 进入 浏览 

到 了 2008 年 ， 五 大 浏览 句 (IE、Firefox、Safari、Chrome 和 Opera ) 全 部 兼容 ECMA-262 第 3 版 。 
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IE8 率先 实现 ECMA-262 第 5 版 ， 并 在 IE9 中 完整 支持 。Firefox 4 很 快 也 做 到 了 。 下 表 列 出 了 主要 的 浏 | 
览 器 版 本 对 ECMAScript 的 支持 情况 。 





浏 览 器 ECMAScript 符合 性 





Netscape Navigator 2 2 
Netscape Navigator 3 一 


Netscape Navigator 4~4.05 3 











Netscape Navigator 4.06~4.79 第 1 版 
Netscape 6+ ( Mozilla 0.6.0+ ) 第 3 版 

IE3 一 

IE4 一 

IES 第 1 版 

IES.5~8 第 3 版 

IE9 第 5 版 (部分) 
IE10~11 第 5 版 

Edge 12+ 第 6 版 

Opera 6~7.1 第 2 版 

Opera 7.2+ 第 3 版 

Opera 15~28 第 5 版 

Opera 29~35 第 6 版 (部分) 
Opera 36+ 第 6 版 

Safari 1~2.0x 第 3 版 (部分) 
Safari 3.1~5.1 第 5 版 (部 分 ) 
Safari 6~8 第 5 版 

Safari 9+ 第 6 版 

iOS Safari 3.2~5.1 第 5 版 (部 分 ) 
iOS Safari 6~8.4 第 5 版 

iOS Safari 9.2+ 第 6 版 

Chrome 1~3 第 3 版 

Chrome 4~22 第 5 版 (部分) 
Chrome 23+ 第 5 版 

Chrome 42~48 第 6 版 (部 分 ) 
Chrome 49+ 第 6 版 

Firefox 1~2 第 3 版 

Firefox 3.0.x~20 第 5 版 (部 分 ) 
Firefox 21~44 第 5 版 

Firefox 45+ 第 6 版 
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1.2.2 DOM 


文档 对 象 模型 ( DOM，Document Object Model ) 是 一 个 应 用 编程 接口 (API )， 用 于 在 HTML 中 使 
用 扩展 的 XML。DOM 将 整个 页 面 抽象 为 一 组 分 层 节 点 。HTML 或 XML 页 面 的 每 个 组 成 部 分 都 是 一 种 
节点 ， 包 含 不 同 的 数据 。 比 如 下 面 的 HITML 页 面 : 


<html> 
<head> 
<title>Sample Page</title> 
</head> 
<body> 
<p> Hello World!</p> 
</body> 
</html> 


这 些 代 码 通 过 DOM 可 以 表示 为 一 组 分 层 节 点 ， 如 图 1-2 所 示 。 





































































Sample Page 


Hello World! 


图 1-2 


DOM 通过 创建 表示 文档 的 树 ， 让 开发 者 可 以 随心 所 欲 地 控制 网 页 的 内 容 和 结构 。 使 用 DOM API， 
可 以 轻松 地 删除 、 添 加 、 蔡 换 、 修 改 节 点 。 

1. 为 什么 DOM 是 必需 的 

在 IE4 和 Netscape Navigator 4 支持 不 同形 式 的 动态 HIML (DHTML ) 的 情况 下 ， 开 发 者 首先 可 以 
做 到 不 刷新 页 面 而 修改 页 面 外 观 和 内 容 。 这 代表 了 Web 技术 的 一 个 巨大 进步 ， 但 也 暴露 了 很 大 的 问题 。 
由 于 网 景 和 微软 采用 不 同 思路 开发 DHTML , 开发 者 写 一 个 HIML 页 面 就 可 以 在 任何 浏览 器 中 运行 的 好 
日 子 就 此 终结 。 

为 了 保持 Web 跨 平台 的 本 性 ， 必 须要 做 点 什么 。 人 们 担心 如 果 无 法 控制 网 景 和 微软 各 行 其 是 ， 那 
么 Web 就 会 发 生 分 裂 ， 导致 人 们 面向 浏览 器 开发 网 页 。 就 在 这 时 ,万维网 联盟 (W3C，World Wide Web 
Consortium ) 开始 了 制定 DOM 标准 的 进程 。 

2. DOM 级 别 

1998 年 10 月, DOM Level1 成 为 W3C 的 推荐 标准 。 这 个 规范 由 两 个 模块 组 成 : DOM Core 和 DOM 
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HTML。 前 者 提供 了 一 种 映射 XML 文档 ， 从 而 方便 访问 和 操作 文档 任意 部 分 的 方式 ; 后 者 扩展 了 前 者 ， | 
并 增加 了 特定 于 HTML 的 对 象 和 方法 。 





注意 DOM 并 非 只 能 通过 JavaScript 访 问 , 而 且 确实 被 其 他 很 多 语言 实现 了 。 不 过 对 于 浏 
览 器 来 说 ，DOM 就 是 使 用 ECMAScript 实现 的 ， 如 今 已 经 成 为 JavaScript 语言 的 一 大 组 成 





DOM Level 1 的 目标 是 映射 文档 结构 ， 而 DOM Level 2 的 目标 则 宽泛 得 多 。 这 个 对 最 初 DOM 的 扩 
展 增加 了 对 (DHTML 早 就 支持 的 ) 鼠标 和 用 户 界面 事件 、 范 围 、 遍 历 〈 人 迭代 DOM 节点 的 方法 ) 的 支 
持 ， 而 且 通 过 对 象 接口 支持 了 层 释 样 式 表 (CSS )。 另 外 ，DOM Level 1 中 的 DOM Core 也 被 扩展 以 包含 
对 XML 命名 空间 的 支持 。 

DOM Level 2 新 增 了 以 下 模块 ， 以 文 持 新 的 接口 。 

口 DOM 视图 : 描述 追踪 文档 不 同 视图 ( 如 应 用 CSS 样式 前 后 的 文档 ) 的 接口 。 
口 DOM 事件 : 描述 事件 及 事件 处 理 的 接口 。 

口 DOM 样式 : 描述 处 理 元 素 CSS 样式 的 接口 。 

口 DOM 遍历 和 范围 : 描述 遍历 和 操作 DOM 树 的 接口 。 

DOM Level 3 进一步 扩展 了 DOM ,增加 了 以 统一 的 方式 加 载 和 保存 文档 的 方法 ( 包含 在 一 个 叫 DOM 
Load and Save 的 新 模块 中 )， 还 有 验证 文档 的 方法 (DOM Validation )。 在 Level 3 中 ，DOM Core 经 过 扩 
展 支 持 了 所 有 XML 1.0 的 特性 ， 包 括 XML Infoset 、XPath 和 XML Base。 

目前 ，W3C 不 再 按照 Level 来 维护 DOM 了 ， 而 是 作为 DOM Living Standard 来 维护 ， 其 快照 称 为 
DOM4。DOM4 新 增 的 内 容 包 括 蔡 代 Mutation Events 的 Mutation Observers。 













































































注意 ”在 阅读 关于 DOM 的 资料 时 ， 你 可 能 会 看 到 DOM Level 0 的 说 法 。 注 意 ， 并 没有 一 
个 标准 叫 “DOM Level10”, 这 只 是 DOM 历史 中 的 一 个 参照 点 。DOM Level0 可 以 看 作 IE4 


和 Netscape Navigator 4 中 最 初 支持 的 DHTML。 





3. 其 他 DOM 
除了 DOM Core 和 DOM HTML 接口 ， 有 些 其 他 语言 也 发 布 了 自己 的 DOM 标准 。 下 面 列 出 的 语言 
是 基于 XML 的 ， 每 一 种 都 增加 了 该 语言 独 有 的 DOM 方法 和 接口 : 
口 可 伸缩 矢量 图 ( SVG ，Scalable Vector Graphics ) 
口 数学 标记 语言 (MathML ，Mathematical Markup Language ) 
口 同步 多 媒体 集成 语言 (SMIL ，Synchronized Multimedia Integration Language ) 
此 外 ,还 有 一 些 语言 开发 了 自己 的 DOM 实现 , 比如 Mozilla 的 XML 用 户 界面 语言 ( XUL, XML User 
Interface Language )。 不 过 ， 只 有 前 面 列表 中 的 语言 是 W3C 推荐 标准 。 
4. Web 浏览 器 对 DOM 的 支持 情况 
DOM 标准 在 Web 浏览 器 实现 它 之 前 就 已 经 作为 标准 发 布 了 。 正 在 第 5 版 中 尝试 支持 DOM, 但 直 
到 5.5 版 才 开始 真正 支持 ， 该 版 本 实现 了 DOM Level 1 的 大 部 分 。IE 在 第 6 版 和 第 7 版 中 都 没有 实现 新 
特性 ， 第 8 版 中 修复 了 一 些 问题 。 
网 景 在 Netscape 6 (Mozilla 0.6.0 ) 之 前 都 不 支持 DOM。Netscape 7 之 后 ，Mozilla 把 开发 资源 转移 
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到 开发 Firefox 浏览 器 上 。 Firefox 3+ 支持 全 部 的 Level 1、 几乎 全 部 的 Level2， 以 及 Level3 的 某 些 部 分 。 
( Mozilla 开发 团队 的 目标 是 打造 百分之百 兼容 标准 的 浏览 器 ， 他 们 的 工作 也 得 到 了 应 有 的 回报 。) 
支持 DOM 是 浏览 器 厂商 的 重 中 之 重 ， 每 个 版 本 发 布 都 会 改进 文 持 度 。 下 表 展 示 了 主流 浏览 器 支持 















































DOM 的 情况 。 
浏 览 器 DOM 兼容 
Netscape Navigator 1~4.x 
Netscape 6+ ( Mozilla 0.6.0+ ) Level 1 、Level 2( 几乎 全 部 )、Level3 (部 分 ) 
IE2~4.x > 
IE5 Level 1 (很 少 ) 
IES.5~8 Level 1 ( 几乎 全 部 ) 
IE9+ Level 1]、Level 2、Level 3 
Edge Level 1]、Level 2 、Level 3 
Opera 1~6 
Opera 7~8.x Level 1 (几乎 全 部 )、Level 2 (部 分 ) 
Opera 9~9.9 Level 1 、Level 2( 几乎 全 部 )、Level3 (部 分 ) 
Opera 10+ Level 1、Level 2、Level 3( 部 分 ) 
Safari 1.0.x Level 1 
Safari 2+ Level 1 、Level 2( 部 分 )、Level 3( 部 分 ) 
iOS Safari 3.2+ Level 1]、Level 2( 部 分 )、Level 3( 部 分 ) 
Chrome 1+ Level 1]、Level 2( 部 分 )、Level 3( 部 分 ) 
Firefox 1+ Level 1、Level 2( 几乎 全 部 )、Level 3 ( 部 分 ) 





注意 ”上 表 中 兼容 性 的 状态 会 随时 间 而 变化 ， 其 中 的 内 容 仅 反映 本 书写 作 时 的 状态 





1.2.3 BOM 











IE3 和 Netscape Navigator 3 提供 了 浏览 器 对 象 模型 (BOM ) API， 用 于 支持 访问 和 操作 浏览 器 的 窗 











口 。 使 用 BOM, 开发 者 可 以 操控 浏览 器 显示 页 面 之 外 的 部 分 。 而 BOM 真正 独一无二 


























的 地 方 ， 当 然 也 是 


问题 最 多 的 地 方 ， 就 是 它 是 唯一 一 个 没有 相关 标准 的 JavaScript 实现 。HTML5 改变 了 这 个 局 面 , 这 个 版 


本 的 HTML 以 正式 规范 的 形式 涵盖 了 尽 可 能 多 的 BOM 特性 。 由 于 HTMLS 的 出 现 ， 之 前 很 多 与 BOM 





有 关 的 问题 都 迎刃而解 了 。 
总 体 来 说 ，BOM 主要 针对 浏览 器 窗口 和 子 窗 口 (frame )， 不 过 人 们 通常 会 把 人 
扩展 都 归 在 BOM 的 范畴 内 。 比 如 ， 下 面 就 是 这 样 一 些 扩展 : 
口 弹出 新 浏览 器 窗口 的 能 
口 移动 、 缩放 和 关闭 浏览 器 窗 口 的 能 力 ; 
口 navigator 对 象 ， 提 供 关 于 浏览 器 的 详尽 信息 ; 
口 location 对 象 ， 提 供 浏 览 器 加 载 页 面 的 详尽 信息 ; 





















































E 何 特定 于 浏览 器 的 
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口 screen 对 象 ， 提 供 关 于 用 户 屏幕 分 辩 率 的 详尽 信息 ; 























口 对 cookie 的 支持 ; 
口 其 他 自 定义 对 象 ， 如 xMLHttpRequest 和 于 的 Activex0O 

















口 performance 对 象 ， 提 供 浏 览 器 内 存 占 用 、 导 航行 为 和 时 间 统 计 的 详尽 信息 ; 


bjecto 





因为 在 很 长 时 间 内 都 没有 标准 , 所 以 每 个 浏览 器 实现 的 都 是 自己 的 BOM。 有 一 些 所 谓 的 事实 标准 ， 











比如 对 于 window 对 象 和 navigator 对 象 ， 每 个 浏览 器 都 会 给 它 





门 定 义 自 己 的 属性 和 方法 。 现 在 有 了 


HTML5，BOM 的 实现 细节 应 该 会 日 趋 一 致 。 关 于 BOM ， 本 书 会 在 第 12 章 再 专门 详细 介绍 。 


1.3 JavaScript 版 本 





作为 网 景 的 继承 者 ，Mozilla 是 唯一 仍 在 延续 最 初 JavaScript 版 本 编号 的 浏览 器 厂商 。 当 初 网 景 在 将 





























其 源 代 码 开源 时 (项目 名 为 Mozilla Project )，JavaScript 在 其 浏览 器 中 最 后 的 版 本 是 1.3。( 前 面 提 到 过 ， 


1.4 版 是 专门 为 服务 器 实现 的 。) 因为 Mozilla Foundation 在 持续 开发 JavaScript， 为 它 增 加 新 特性 、 关 键 





字 和 语法 ， 所 以 JavaScript 的 版 本 号 也 在 不 断 递 增 。 下 表 展 示 了 
JavaScript 版 本 。 





Netscape/Mozilla 浏览 器 发 布 的 历代 





浏 览 器 JavaScript 版 本 
Netscape Navigator 2 1.0 
Netscape Navigator 3 1.1 
Netscape Navigator 4 1;2 
Netscape Navigator 4.06 1.3 
Netscape 6+ ( Mozilla 0.6.0+ ) 1.5 
Firefox 1 1.5 
Firefox 1.5 1.6 
Firefox 2 1.7 
Firefox 3 1.8 
Firefox 3.5 1.8.1 
Firefox 3.6 1.8.2 
Firefox 4 1.8.5 








这 种 版 本 编号 方式 是 根据 Firefox 4 要 发 布 JavaScript 2.0 决定 的 ， 在 此 之 前 版 本 号 的 每 次 递增 ， 














反映 的 是 JavaScript 实现 逐渐 接近 2.0 建议 。 虽然 这 是 最 初 的 计划 





, 但 JavaScript 的 发 展 让 这 个 计划 变 





得 不 可 能 。JavaScript 2.0 作为 一 个 目标 已 经 不 存在 了 ,而 这 种 版 本 号 编排 方式 在 Firefox 4 发 布 后 就 终 


止 了 。 


注意 Netscape/Mozilla 仍然 沿用 这 种 版 本 方案 。 而 三 的 JScript 有 不 同 的 版 本 号 规则 。 这 
些 JScript 版 本 与 上 表 提 到 的 JavaScript 版 本 并 不 对 应 。 此 外 


支持 ， 指 的 是 实现 ECMAScript 和 DOM 的 程度 。 


， 多 数 浏览 器 对 JavaScript 的 
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1.4 “小 结 


JavaScript 是 一 门 用 来 与 网 页 交互 的 脚本 语言 ， 包 含 以 下 三 个 组 成 部 分 。 
口 ECMAScript: 由 ECMA-262 定义 并 提供 核心 功能 。 
口 文档 对 象 模型 (DOM ): 提供 与 网 页 内 容 交 互 的 方法 和 接 
口 浏览 器 对 象 模 型 (BOM ): 提供 与 浏览 器 交互 的 方法 和 接 
JavaScript 的 这 三 个 部 分 得 到 了 五 大 Web 浏览 需 (了 下、Firefox 、Chrome 、Safari 和 Opera ) 不 同 程度 
的 支持 。 所 有 浏览 器 基本 上 对 ES5 ( ECMAScript 5 ) 提供 了 完善 的 支持 ， 而 对 ES6 (ECMAScript6 ) 和 
ES7 (ECMAScript7 ) 的 支持 度 也 在 不 断 提 升 。 这 些 浏览 器 对 DOM 的 支持 各 不 相同 ， 但 对 Level 3 的 支 
持 日 益 趋 于 规范 。HIML5 中 收录 的 BOM 会 因 浏 览 器 而 异 ， 不 过 开发 者 仍然 可 以 假定 存在 很 大 一 部 分 


公共 特性 。 
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HTML 中 的 JavaScript 


网 景 公 
问题 。 通 过 反复 试 错 和 讨论 ,人 
当初 他 们 的 很 多 工作 得 到 了 保留 ， 





2.1 











pA 


本 章 内 容 
口 使 用 <script 区 夏 过 








口 行内 脚本 与 外 部 脚本 的 比较 
口 文档 模式 对 JavaScript 


有 什么 影响 











口 确保 JavaScript 不 可 月 





时 的 用 户 体验 








并 








<script> 元 素 


将 JavaScript 插入 HTML 的 主要 方法 是 使 
最 早 在 Netscape Navigator 2 中 实现 的 。 后 来 ， 这 个 元 素 被 了 
列 8 个 属性 。 


将 JavaScript 引入 网 页 ， 首 先 要 解决 它 与 网 页 的 主导 语言 
司 的 工作 人 员 和 希望 在 将 JavaScript 引 入 HTML 页 面 的 同时 , 不 会 导致 页 面 在 


HTML 的 关系 问题 。 在 JavaScript 早期 ， 

















其 他 浏览 锅 中 演 染 出 









































在 乎 它 的 值 。 






































口 integrity: 可 选 。 

Subresource Integrity 
脚本 不 会 执行 。 这 个 
供 恶 意 内 容 。 
































口 1anguage: 废弃 。 最 初 用 于 表示 代码 块 
或 "VBScript" )。 大 多 数 浏览 器 都 会 忽 








口 src: 可 选 。 表 示 包 含 要 执行 的 代码 的 乡 











src 属性 指定 的 代码 字符 集 。 这 个 属 


也 们 最 终 做 出 了 一 些 决 定 ， 并 达成 了 向 网 页 
且 最 终 形成 了 HTML 规范 。 





j<script> 元 素 。 这 个 元 素 是 
FE 式 加 入 到 HTML 规范 。<script> 元 素 有 下 





口 async: 可 选 。 表示 应 该 立即 开始 下 载 脚本 , 但 不 能 阻止 其 他 页 下 
他 脚本 加 载 。 只 对 外 部 脚本 文件 有 效 。 
口 charset: 可 选 。 使 用 





请 








尚 








上 引入 通 





用 脚本 能 力 的 共识 。 











[Da 
视频 讲解 














由 网 


居 八 











i 动作 ， 














下 人 


司 创造 出 来 ， 并 


比如 下 载 资源 或 等 待 其 











性 很 少 使 用 


， 因 为 大 多 数 浏览 器 不 
































口 crossorigin: 可 选 。 配置 相关 请 求 的 CORS ( 跨 源 资源 共享 ) 设置 。 默认 不 使 用 CORS。crossorigin= 

"anonymous "配置 文件 请 求 不 必 设 置 任 据 标 志 。crossorigin 
意味 着 出 站 请 求 会 包含 凭据 。 
口 defer: 可 选 。 表示 脚本 可 以 延迟 到 文档 完全 被 解析 和 显示 之 后 再 执行 。 
在 IE7 及 更 早 的 版 本 中 ， 对 行内 脚本 也 可 以 指定 这 个 属性 。 
允许 比 对 接收 到 的 资源 和 指定 的 加 密 签名 以 验 订 
。 如 果 接 收 到 的 资源 的 签名 与 这 个 
属性 可 以 用 于 确 








="use-credentials" 设 置 凭据 

















只 对 外 部 脚本 文件 有 效 。 





E 子 资源 完整 性 ( SRI， 


属性 指定 的 签名 不 匹配 ， 则 页 面 会 报错 ， 


保 内 容 分 发 网 络 ( CDN，Content Delivery Network ) 不 会 提 

















的 脚本 语 


EE 


已 











部 文件 


o 











咯 这 个 属性 ， 不 应 该 再 


使 用 它 。 








(如 "JavaScript" 、 "JavaScript 1.2" 
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口 type: 可 选 。 代 替 1anguage， 表示 代 码 块 中 脚本 语言 的 内 容 类 型 (也 称 MIME 类 型 ), 按照 惯 
例 , 这 个 值 始 终 都 是 "text/javascript", 尽管 "text/javascript" 和 "text/ecmascript" 
都 已 经 废弃 了 。JavaScript 文件 的 MIME 类 型 通 








可 有 






































二 


type 必 





党 是 "application/x-javascript"， 不 过 给 


性 这 个 值 有 可 能 导致 脚本 被 忽略 。 在 非 IE 的 浏览 器 中 有 效 的 其 他 值 还 有 


"application/javascrip 

















































































































t" 和 "application/ecmascript"。 如果 这 个 值 是 module, 则 代 
但 会 被 当成 ES6 模块 ， 而 且 只 有 这 时 候 代码 中 才能 出 现 import 和 export 关键 字 。 
使 用 <script> 的 方式 有 两 种 : 通过 它 直接 在 网 页 中 舱 入 JavaScript 代码 , 以 及 通过 它 在 网 页 中 包含 
外 部 JavaScript 文件 。 
要 艇 入 行内 JavaScript 代码 ， 直 接 把 代码 放 在 <script > 元素 中 就 行 : 
<script> 
function sayHi() { 


console.log ("Hi!"); 
} 


</SCEI1Dt> 








包含 在 <script> 内 的 代码 会 被 从 上 到 下 解释 。 在 上 面 的 例子 中 ,被 解释 的 是 一 个 函数 定义 ,并 
该 函数 会 被 保存 在 解释 器 环境 中 。 禾 
























































E<script> 元 素 中 的 代码 被 计算 完成 之 前 ， 页 面 的 其 余 内 容 不 会 被 
加 载 ， 也 不 会 被 显示 。 
在 使 用 行内 JavaScript 代码 时 ， 要 注意 代码 中 不 能 出 现 字符 串 </script>。 比 如 ， 下 面 的 代码 会 导 
致 浏览 右 报 错 : 
<script> 
function sayScript() { 


console.log("</script>"); 


} 


</script> 








浏览 器 解析 行内 脚本 的 方式 决定 了 它 在 看 到 字符 串 </script> 时 ,会 将 其 当成 结束 的 </script> 
标签 。 想 避免 这 个 问题 ， 只 需要 转 义 字符 “”" 即 可 : 
<script> 
function sayScript() { 
console.log("<\/script>"); 


} 


</script> 


这 样 修改 之 后 ， 代 码 就 可 以 被 浏览 器 完全 解释 ， 不 会 导致 任何 错误 。 

















要 包含 外 部 文件 中 的 JavaScript, 就 必须 使 用 src 属性 。 这 个 属性 的 值 是 一 个 URL ， 指 向 包含 
JavaScript 代码 的 文件 ， 比 如 : 

<script src="example.js"></script> 

这 个 例子 在 页 面 

















! 加 载 了 一 个 名 为 examplejs 的 外 部 文件 。 文 件 本 身 只 需 包 含 要 放 在 <script> 的 


的 JavaScript 代码 。 与 解释 行内 JavaScript 一 样 ， 在 解释 外 部 JavaScript 文件 时 ， 页 
面 也 会 阻塞 。( 阻塞 时 间 也 包含 下 载 文件 的 时 间 。) 在 XHTML 文档 中 ， 可 以 忽略 结束 标签 


证 签 ， 比 如 : 
<script src="example.js"/> 


起 始 及 结束 标签 中 间 








以 上 语法 不 能 在 HTML 文件 中 使 用 ,因为 它 是 无 效 的 HTML， 有 些 浏 览 需 不 能 正常 处 理 ， 比 如 正 。 














Qz 此 处 的 转 义 字符 指 在 JavaScript 中 个 


使 用 反 斜 杜 “\” 来 向 文本 字符 串 添加 特殊 字符 。 一 一 编者 注 








Hr 
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注意 ”按照 惯例 ， 外 部 JavaScript 文件 的 扩展 名 是 .js。 这 不 是 必需 的 ， 因 为 浏览 器 不 会 检 
查 所 包含 JavaScript 文件 的 扩展 名 。 这 就 为 使 用 服务 器 端 脚 本 语言 动态 生成 JavaScript 代 
码 , 或 者 在 浏览 器 中 将 JavaScript 扩 展 语言 ( 如 TypeScript, 或 React 的 JSX ) 转 译 为 JavaScript 


提供 了 可 能 性 。 不 过 要 注意 ， 服 务 器 经 常会 根据 文件 扩展 来 确定 响应 的 正确 MIME 类 型 。 
如 果 不 打 算 使 用 .js 扩展 名 ， 一 定 要 确保 服务 器 能 返回 正确 的 MIME 类 型 。 








另外 ,使 用 了 src 属性 的 <script> 元 素 不 应 该 再 在 <script> 和 </script> 标 签 中 再 包含 其 他 
JavaScript 代码 。 如 果 两 者 都 提供 的 话 ， 则 浏览 器 只 会 下 载 并 执行 脚本 文件 ， 从 而 忽略 行内 代码 。 

<script> 元 素 的 一 个 最 为 强大 、 同 时 也 备 受 争议 的 特性 是 ， 它 可 以 包含 来 自 外 部 域 的 JavaScript 
文件 。 跟 <img> 元 素 很 像 ，<script> 元 素 的 src 属性 可 以 是 一 个 完整 的 URL， 而 且 这 个 URL 指向 的 
资源 可 以 跟 包 含 它 的 HTML 页 面 不 在 同一 个 域 中 ， 比 如 这 个 例子 : 

<script src="http://www.somewhere.com/afile.js"></script> 

浏览 器 在 解析 这 个 资源 时 ， 会 向 src 属性 指定 的 路 径 发 送 一 个 GET 请 求 ， 以 取得 相应 资源 ， 假 定 
是 一 个 JavaScript 文件 。 这 个 初始 的 请 求 不 受 浏 览 器 同 源 策略 限制 , 但 返回 并 被 执行 的 JavaScript 则 受 限 
制 。 当 然 ， 这 个 请 求 仍 然 受 父 页 面 HTTP/HTTPS 协议 的 限制 。 

来 自 外 部 域 的 代码 会 被 当成 加 载 它 的 页 面 的 一 部 分 来 加 载 和 解释 。 这 个 能 力 可 以 让 我 们 通过 不 同 的 
域 分 发 JavaScript。 不 过 ,引用 了 放 在 别人 服务 器 上 的 JavaScript 文件 时 要 格外 小 心 ， 因 为 恶意 的 程序 员 
随时 可 能 替换 这 个 文件 。 在 包含 外 部 域 的 JavaScript 文件 时 ， 要 确保 该 域 是 自己 所 有 的 ， 或 者 该 域 是 一 
个 可 信 的 来 源 。<script> 标 签 的 integrity 属性 是 防范 这 种 问题 的 一 个 武器 , 但 这 个 属性 也 不 是 所 有 
浏览 器 都 支持 。 

不 管 包含 的 是 什么 代码 ， 浏 览 器 都 会 按照 <script> 在 页 面 中 出 现 的 顺序 依次 解释 它们 ， 前 提 是 它 
们 没有 使 用 aefer 和 async 属性 。 第 二 个 <script> 元 素 的 代码 必须 在 第 一 个 <script> 元 素 的 代码 解 
释 完毕 才能 开始 解释 ， 第 三 个 则 必须 等 第 二 个 解释 完 ， 以 此 类 推 。 


2.1.1 标签 位 置 
过 去 ， 所 有 <script> 元 素 都 被 放 在 页 面 的 <head> 标 签 内 ， 如 下 面 的 例子 所 示 : 


<!DOCTYPE html> 

<html> 
<head> 
<title>Example HTML Page</title> 
<script src="examplel.js"></script> 
<script src="example2.js"></script> 
</head> 
<body> 
<!-- 这 里 是 页 面 内 容 --> 
</body> 

</html> 


这 种 做 法 的 主要 目的 是 把 外 部 的 CSS 和 JavaScript 文件 都 集中 放 到 一 起 。 不 过 ， 把 所 有 JavaScript 
文件 都 放 在 <nead> 里 ,也 就 意味 着 必须 把 所 有 JavaScript 代码 都 下 载 、 解 析 和 解释 完成 后 ， 才 能 开始 泻 
染 页 面 (页面 在 浏览 咒 解 析 到 <body> 的 起 始 标 签 时 开始 渲染 )。 对 于 需要 很 多 JavaScript 的 页 面 ， 这 会 
导致 页 面 演 染 的 明显 延迟 ， 在 此 期 间 浏览 器 窗口 完全 空白 。 为 解决 这 个 问题 ， 现 代 Web 应 用 程序 通常 
将 所 有 JavaScript 引用 放 在 <body> 元 素 中 的 页 面 内 容 后 面 ， 如 下 面 的 例子 所 示 : 
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<!DOCTYPE html> 

<html> 
<head> 
<title>Example HTML Page</title> 
</head> 
<body> 
<!-- 这 里 是 页 面 内 容 --> 
<script src="examplel.js"></script> 
<script src="example2.js"></script> 
</body> 

</html> 


这 样 一 来 ， 页 面 会 在 处 理 JavaScript 代码 之 前 完全 演 染 页 面 。 用 户 会 感觉 页 面 加 载 更 快 了 ， 因 为 浏 
览 絮 显示 空白 页 面 的 时 间 短 了 。 


2.1.2 ”推迟 执行 脚本 


HTML 4.01 为 <script> 元 素 定义 了 一 个 叫 gefer 的 属性 。 这 个 属性 表示 脚本 在 执行 的 时 候 不 会 改 
变 页面 的 结构 。 也 就 是 说 ， 脚 本 会 被 延迟 到 整个 页 面 都 解析 完毕 后 再 运行 。 因 此 ， 在 <script> 元 素 上 
设置 aefer 属性 ， 相 当 于 告诉 浏览 器 立即 下 载 ， 但 延迟 执行 。 
<!DOCTYPE html> 
<html> 
<head> 
<title>Example HTML Page</title> 
<script defer src="examplel.js"></script> 
<script defer src="example2.js"></script> 
</head> 
<body> 
<!-- 这 里 是 页 面 内 容 --> 
</body> 
</html> 


虽然 这 个 例子 中 的 <script> 元 素 包含 在 页 面 的 <head> 中 ， 但 它们 会 在 浏览 器 解析 到 结束 的 
</html> 标 签 后 才 会 执行 。HTMLS 规范 要 求 脚 本 应 该 按照 它们 出 现 的 顺序 执行 ， 因 此 第 一 个 推迟 的 脚 
本 会 在 第 二 个 推迟 的 脚本 之 前 执行 ， 而 且 两 者 都 会 在 DOMContentLoaded 事件 之 前 执行 (关于 事件 ， 
请 参考 第 17 章 ), 不 过 在 实际 当中 , 推迟 执行 的 脚本 不 一 定 总 会 按 顺 序 执行 或 者 在 DOMContentLoaded 
事件 之 前 执行 ， 因 此 最 好 只 包含 一 个 这 样 的 脚本 。 

如 前 所 述 ，defer 属性 只 对 外 部 脚本 文件 才 有 效 。 这 是 HTML5 中 明确 规定 的 ， 因 此 支持 HTML5 
的 浏览 器 会 忽略 行内 脚本 的 aefer 属性 。IE4~7 展示 出 的 都 是 旧 的 行为 , IE8 及 更 高 版 本 则 支持 HTML5 
定义 的 行为 。 

对 aefer 属性 的 支持 是 从 IE4、Firefox 3.5、Safari5 和 Chrome 7 开始 的 。 其 他 所 有 浏览 器 则 会 忽略 这 
个 属性 ， 按 照 通 常 的 做 法 来 处 理 脚 本 。 考 虑 到 这 一 点 ， 还 是 把 要 推迟 执行 的 脚本 放 在 页 面 底部 比较 好 。 












































































































































注意 ”对 于 XHTML 文档， 指定 defer 属性 时 应 该 写成 defer="defer"。 





2.1.3 ”异步 执行 脚本 
HTMLS5 为 <script> 元 素 定义 了 async 属性 。 从 改变 脚本 处 理 方式 上 看 ，async 属性 与 defer 类 
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似 。 当 然 ， 它 们 两 者 也 都 只 适用 于 外 部 脚本 ， 都 会 告诉 浏览 器 立即 开始 下 载 。 不 过 ,与 defer 不 同 的 
是 ,标记 为 async 的 脚本 并 不 保证 能 按照 它们 出 现 的 次 序 执行 ， 比 如 : 
<!DOCTYPE html> 
<html> EE 
<head> 
<title>Example HTML Page</title> 
<script async src="examplel.js"></script> 
<script async src="example2.js"></script> 
</head> 
<body> 
<!-- 这 里 是 页 面 内 容 --> 
</body> 
</html> 
在 这 个 例子 中 ,第 二 个 脚本 可 能 先 于 第 一 个 脚本 执行 。 因此 ,重点 在 于 它们 之 间 没 有 依赖 关系 。 给 
脚本 添加 async 属性 的 目的 是 告诉 浏览 器 ， 不 必 等 脚本 下 载 和 执行 完 后 再 加 载 页 面 ， 同 样 也 不 必 等 到 
该 异步 脚本 下 载 和 执行 后 再 加 载 其 他 脚本 。 正 因为 如 此 ， 异 步 脚 本 不 应 该 在 加 载 期 间 修改 DOM。 
异步 脚本 保证 会 在 页 面 的 10ad 事件 前 执行 ， 但 可 能 会 在 DOMContentLoaded (参见 第 17 章 ) 之 
前 或 之 后 。Firefox 3.6、Safari 5 和 Chrome 7 支持 异步 脚本 。 使 用 async 也 会 告诉 页 面 你 不 会 使 用 
document .write， 不 过 好 的 Web 开发 实践 根本 就 不 推荐 使 用 这 个 方法 。 






























































注意 ”对 于 XHTML 文档 ， 指 定 async 属性 时 应 该 写成 async="async"。 





2.1.4 动态 加 载 脚本 


除了 <script> 标 签 ， 还 有 其 他 方式 可 以 加 载 脚本 。 因 为 JavaScript 可 以 使 用 DOM API， 所 以 通过 
向 DOM 中 动态 添加 script 元 素 同样 可 以 加 载 指定 的 脚本 。 只 要 创建 一 个 script 元 素 并 将 其 添加 到 
DOM 即 可 。 


let Script = dqocument .createElement ('script'); 
Seript.sre Sqlibberish, 本 各 
dqocument .head.appendChild(script); 


当然 ， 在 把 HTMLElement 元 素 添 加 到 DOM 且 执 行 到 这 段 代 码 之 前 不 会 发 送 请 求 。 默 认 情 况 下 ， 
以 这 种 方式 创建 的 <script> 元 素 是 以 异步 方式 加 载 的 ,相当 于 添加 了 async 属性 。 不 过 这 样 做 可 能 会 
有 问题 , 因为 所 有 浏览 器 都 支持 createElement () 方 法 , 但 不 是 所 有 浏览 器 都 支持 async 属性 。 因 此 ， 
如 果 要 统一 动态 脚本 的 加 载 行为 ， 可 以 明确 将 其 设置 为 同步 加 载 : 

let Script = dqocument .createElement ('script'); 

script. src 3 "ybBerieshi, 村 E 


script.async = false; 
document .head.appendChild(script); 


以 这 种 方式 获取 的 资源 对 浏览 器 预 加 载 器 是 不 可 见 的 。 这 会 严重 影响 它们 在 资源 获取 队列 中 的 优先 
级 。 根 据 应 用 程序 的 工作 方式 以 及 怎么 使 用 , 这 种 方式 可 能 会 严重 影响 性 能 。 要 想 让 预 加 载 右 知道 这 些 
动态 请 求 文件 的 存在 ， 可 以 在 文档 头 部 显 式 声明 它们 : 


<link rel="preload" href="gibberish.js"> 
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2.1.5 XHTML 中 的 变化 


可 扩展 超 文本 标记 语言 (XHTML ，Extensible HyperText Markup Language ) 是 将 HTML 作为 XML 
的 应 用 重新 包装 的 结果 。 与 HTML 不 同 ,在 XHTML 中 使 用 JavaScript 必须 指定 type 属性 且 值 为 
text/javascript，HTML 中 则 可 以 没有 这 个 属性 。XHTML 虽然 已 经 退出 历史 舞台 ,但 实践 中 偶尔 
可 能 也 会 遇 到 遗留 代码 ， 为 此 本 节 稍 作 介 绍 。 

在 XHTML 中 编写 代码 的 规则 比 HTML 中 严格 , 这 会 影响 使 用 <script> 元 素 舱 入 JavaScript 代码 。 
下 面 的 代码 块 虽然 在 HTML 中 有 效 ， 但 在 XHML 中 是 无 效 的 。 


<script type="text/javascript"> 
function compare(a, b) { 
if (a < pb) { 
console.log("A is less than B"); 
} else if (a > b) { 
console.log("A is greater than B"); 
} else { 
console.log('"A is equal to B"); 
} 
} 


</script> 

在 HIML 中 ,解析 <script> 元 素 会 应 用 特殊 规则 。XHTML 中 则 没有 这 些 规则 。 这 意味 着 a < b 
语句 中 的 小 于 号 ( < ) 会 被 解释 成 一 个 标签 的 开始 ， 并 且 由 于 作为 标签 开始 的 小 于 号 后 面 不 能 有 空格 ， 
这 会 导致 语法 错误 。 

避免 XHTML 中 这 种 语法 错误 的 方法 有 两 种 。 第 一 种 是 把 所 有 小 于 号 ( < ) 都 替换 成 对 应 的 HTML 
实体 形式 ( &1t ; )。 结 果 代 码 就 是 这 样 的 : 


<script type="text/javascript"> 
function compare(a, b) { 
if (a &lt; b) { 
console.log("A is less than B"); 
} else if (a > pb) { 
console.log("A is greater than B"); 
} else { 
console.log('"A is equal to B"); 
} 
} 


</script> 

这 样 代码 就 可 以 在 XHTML 页 面 中 运行 了 。 不 过 ， 缺 点 是 会 影响 阅读 。 好 在 还 有 另 一 种 方法 。 
第 二 种 方法 是 把 所 有 代码 都 包含 到 一 个 CDATA 块 中 。 在 XHTML (及 XML ) 中 ，CDATA 块 表 示 
文档 中 可 以 包含 任意 文本 的 区 块 ， 其 内 容 不 作为 标签 来 解析 ， 因 此 可 以 在 其 中 包含 任意 字符 ,包括 小 于 
号 ， 并 且 不 会 引发 语法 错误 。 使 用 CDATA 的 格式 如 下 : 


<script type="text/javascript"><! [CDATAI[ 
function compare(a, b) { 
if (a < pb) { 
console.log("A is less than B"); 
} else if (a > b) { 
console.log("A is greater than B"); 
} else { 
console.log('"A is equal to B"); 
} 
} 


]]></script> 
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在 兼容 XHTML 的 浏览 器 中 ， 这 样 能 解决 问题 。 但 在 不 支持 CDATA 块 的 非 XHTML 兼容 浏览 右 中 
则 不 行 。 为 此 ，CDATA 标记 必须 使 用 JavaScript 注释 来 抵消 : 


<script type="text/javascript"> 


//<! [CDATATI 
function compare(a, b) { 


if (a < b) { 
console.log('"A is less than B"); 
else if (a > b) { 
console.log('"A is greater than B"); 
else { 
console.1log('"A is equal to B"); 

} 

} 

//]]> 
</script> 


这 种 格式 适用 于 所 有 现代 浏览 器 。 虽 然 有 点 黑 科 技 的 味道 ， 但 它 可 以 通过 XHTML 验证 ， 而 且 对 
XHTML 之 前 的 浏览 右 也 能 优雅 地 降级 。 











—_ 


一 




















注意 XHTML 模式 会 在 页 面 的 MIME 类 型 被 指定 为 "application/xhtml+xml" 时 触 


发 。 并 不 是 所 有 浏览 器 都 支持 以 这 种 方式 送 达 的 XHTML 。 





2.1.6 ”废弃 的 语法 


自 1995 年 Netscape 2 发布 以 来 ， 所 有 浏览 器 都 将 JavaScript 作 为 默认 的 编程 语言 。type 属性 使 用 
一 个 MIME 类 型 字符 串 来 标识 <script> 的 内 容 , 但 MIME 类 型 并 没有 跨 浏 览 器 标准 化 。 即 使 浏览 器 默 
认 使 用 JavaScript， 在 某 些 情况 下 某 个 无 效 或 无 法 识别 的 MIME 类 型 也 可 能 导致 浏览 器 跳 过 (不 执行 ) 
相关 代码 。 因 此 ,除非 你 使 用 XHTML 或 <script> 标 签 要 求 或 包含 非 JavaScript 代码 , 最 佳 做 法 是 不 指 
定 type 属性 。 

在 最 初 采用 script 元 素 时 , 它 标 志 着 开始 走向 与 传统 HTML 解析 不 同 的 流程 。 对 这 个 元 素 需要 应 
用 特殊 的 解析 规则 ， 而 这 在 不 支持 JavaScript 的 浏览 器 ( 特别 是 Mosaic ) 中 会 导致 问题 。 不 支持 的 浏览 
需 会 把 <script> 元 素 的 内 容 输出 到 页 面 上 ， 从 而 破坏 页 面 的 外 观 。 

Netscape 联合 Mosaic 拿 出 了 一 个 解决 方案 ， 对 不 支持 JavaScript 的 浏览 器 隐藏 租 入 的 JavaScript 代 
人 码 。 最 终 方 案 是 把 脚本 代码 包含 在 一 个 HTML 注释 中 ， 像 这 样 : 

Te 

console.log("Hi!"); 


} 


//--></script> 

使 用 这 种 格式 ，Mosaic 等 浏览 器 就 可 以 忽略 <script> 标 签 中 的 内 容 ， 而 支持 JavaScript 的 浏览 器 
则 必须 识别 这 种 模式 ， 将 其 中 的 内 容 作 为 JavaScript 来 解析 。 

虽然 这 种 格式 仍然 可 以 被 所 有 浏览 器 识别 和 解析 ， 但 已 经 不 再 必要 ， 而 且 不 应 该 再 使 用 了 。 在 
XHTML 模式 下 ， 这 种 格式 也 会 导致 脚本 被 忽略 ， 因 为 代码 处 于 有 效 的 XML 注释 当中 。 
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2.2 行内 代码 与 外 部 文件 


虽然 可 以 直接 在 HTML 文件 中 舰 入 JavaScript 代码 ， 但 通常 认为 最 佳 实践 是 尽 可 能 将 JavaScript 代 
码 放 在 外 部 文件 中 。 不 过 这 个 最 佳 实践 并 不 是 明确 的 强制 性 规则 。 推 荐 使 用 外 部 文件 的 理由 如 下 。 

口 可 维护 性 。JavaScript 代码 如 果 分 散 到 很 多 HTML 页 面 ， 会 导致 维护 困难 。 而 用 一 个 目录 保存 
所 有 JavaScript 文件 ， 则 更 容易 维护 ， 这 样 开发 者 就 可 以 独立 于 使 用 它们 的 HTML 页 面 来 编辑 
代码 。 

口 缓存 。 浏览 器 会 根据 特定 的 设置 缓存 所 有 外 部 链接 的 JavaScript 文件 ， 这 意味 着 如 果 两 个 页 面 都 

用 到 同一 个 文件 ， 则 该 文件 只 需 下 载 一 次 。 这 最 终 意 味 着 页 面 加 载 更 快 。 

口 适应 未 来 ,通过 把 JavaScript 放 到 外 部 文件 中 , 就 不 必 考 虑 用 XHTML 或 前 面 提 到 的 注释 黑 科 技 。 
包含 外 部 JavaScript 文件 的 语法 在 HTML 和 XHTML 中 是 一 样 的 。 

在 配置 浏览 器 请 求 外 部 文件 时 ， 要 重点 考虑 的 一 点 是 它们 会 占用 多 少 带 宽 。 在 SPDY/HTTP2 中 ， 

预 请 求 的 消耗 已 显著 降低 ， 以 轻 量 、 独 立 JavaScript 组 件 形 式 向 客户 端 送 达 脚 本 更 具 优 势 。 
比如 ， 第 一 个 页 面包 含 如 下 脚本 : 


<script src="mainA.js"></script> 

<script src="component1.js"></script> 
<script src="component2.js"></script> 
<script src="component3.js"></script> 











































































































































































































后 续 页 面 可 能 包含 如 下 脚本 : 

<script src="mainB.js"></script> 
<script src="component3.js"></script> 
<script src="component4.js"></script> 
<script src="component5.js"></script> 

















在 初次 请 求 时 ， 如 果 浏 览 器 支持 SPDY/HTTP2, 就 可 以 从 同一 个 地 方 取得 一 批文 件 ， 并 将 它们 逐个 
放 到 浏览 器 缓存 中 。 从 浏览 器 角度 看 ， 通 过 SPDY/HTTP2 获取 所 有 这 些 独立 的 资源 与 获取 一 个 大 
JavaScript 文件 的 延迟 差不多 。 

在 第 二 个 页 面 请 求 时 ,由 于 你 已 经 把 应 用 程序 切割 成 了 轻 量 可 缓存 的 文件 ,第 二 个 页 面 也 依赖 的 某 
些 组 件 此 时 已 经 存在 于 浏览 器 缓存 中 了 。 

当然 , 这 里 假设 浏览 器 支持 SPDY/HTTP2, 只 有 比较 新 的 浏览 器 才 满 足 。 如 果 你 还 想 支 持 那 些 比较 
老 的 浏览 器 ， 可 能 还 是 用 一 个 大 文件 更 合适 。 


2.3 文档 模式 


IE5.5 发 明了 文档 模式 的 概念 ， 即 可 以 使 用 doctype 切换 文档 模式 。 最 初 的 文档 模式 有 两 种 : 混杂 
模式 ( quirks mode ) 和 标准 模式 ( standards mode )。 前 者 让 正 像 下 5 一样 (支持 一 些 非 标 准 的 特性 )， 
后 者 让 IE 具有 兼容 标准 的 行为 。 虽 然 这 两 种 模式 的 主要 区 别 只 体现 在 通过 CSS 泻 染 的 内 容 方面 ， 但 对 
JavaScript 也 有 一 些 关联 影响 ， 或 称 为 副作用 。 本 书 会 经 常 提 到 这 些 副作用 。 

下 初次 支持 文档 模式 切换 以 后 ,其 他 浏览 器 也 跟着 实现 了 。 随 着 浏览 器 的 普遍 实现 , 又 出 现 了 第 三 
种 文档 模式 : 准 标准 模式 (almost standards mode )。 这 种 模式 下 的 浏览 器 支持 很 多 标准 的 特性 ， 但 是 没 
有 标准 规定 得 那么 严格 。 主 要 区 别 在 于 如 何 对 待 图 片 元 素 周围 的 空白 ( 在 表格 中 使 用 图 片 时 最 明显 )。 
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混杂 模式 在 所 有 浏览 器 中 都 以 省 略 文档 开头 的 doctype 声明 作为 开关 。 这 种 约定 并 不 合理 ， 因 为 
混杂 模式 在 不 同 浏览 需 中 的 差异 非常 大 ， 不 使 用 黑 科 技 基本 上 就 没有 浏览 器 一 致 性 可 言 。 
标准 模式 通过 下 列 几 种 文档 类 型 声明 开启 : 


<!-—- HTML 4.01 Strict --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3 .org/TR/html4/strict.dtd"> 





<!-—- XHTML 1.0 Strict --> 

<!IDOCTYPE html PUBLIC 

"-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.o0org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<l== HTMT 5 ==> 
<!DOCTYPE html> 


准 标 准 模 式 通过 过 渡 性 文档 类 型 ( Transitional ) 和 框架 集 文档 类 型 ( Frameset ) 来 触发 : 


<!-- HTML 4.01 Transitional --> 
<!DOCTYPE HIML PUBLIC 

"-//W3C//DTD HTML 4.01 Transitional//EN" 
"nttp://www.w3.o0rg/TR/html4/loose.dtd"> 














La 


<!-—- HIML 4.01 Frameset --> 

<!DOCTYPE HIML PUBLIC 

"-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.o0rg/TR/html4/frameset .dtd"> 


<!-—- XHTML 1.0 Transitional --> 

<!IDOCTYPE html PUBLIC 

"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 


<!-—- XHTML 1.0 Frameset --> 

<!IDOCTYPE html PUBLIC 

"-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.o0org/TR/xhtmll1l/DTD/xhtmll-frameset .dtd"> 


准 标准 模式 与 标准 模式 非常 接近 ,很 少 需要 区 分 。 人 们 在 说 到 “标准 模式 ”时 ， 可 能 指 其 中 任何 一 
。 而 对 文档 模式 的 检测 ( 本 书后 面 会 讨论 ) 也 不 会 区 分 它们 。 本 书后 面 所 说 的 标准 模式 ， 指 的 就 是 除 
i 


























2.4 <noscript> 元 素 





针对 早期 浏览 器 不 支持 JavaScript 的 问题 , 需要 一 个 页 面 优雅 降级 的 处 理 方案 。 最 终 , <noscript> 
元 素 出 现 ， 被 用 于 给 不 支持 JavaScript 的 浏览 器 提供 痊 代 内 容 。 虽然 如 今 的 浏览 器 已 经 100% 支 持 
JavaScript， 但 对 于 禁用 JavaScript 的 浏览 器 来 说 ， 这 个 元 素 仍然 有 它 的 用 处 。 

<noscript> 元 素 可 以 包含 任何 可 以 出 现在 <pody> 中 的 HTML 元 素 ，<script> 除 外 。 在 下 列 两 种 
情况 下 ， 浏 览 器 将 显示 包含 在 <noscript> 中 的 内 容 : 
口 浏览 器 不 支持 脚本 ; 
口 浏览 器 对 脚本 的 支持 被 关闭 。 

任何 一 个 条 件 被 满足 ， 包 含 在 <noscript> 中 的 内 容 就 会 被 演 染 。 否 则 ， 浏 览 絮 不 会 演 染 <noscript> 
中 的 内 容 。 
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下 面 是 一 个 例子 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>Example HTML Page</title> 
<script defer="defer" src="examplel.js"></script> 
<script defer="defer" src="example2.js"></script> 
</head> 
<body> 
<noscript> 
<p>This page requires a JavaScript-enabled browser.</p> 
</noscript> 
</body> 
</html> 


这 个 例子 是 在 脚本 不 可 用 时 让 浏览 器 显示 一 段 话 。 如 果 浏 览 器 支持 脚本 ， 则 用 户 永远 不 会 看 到 它 。 












































2.5 小 结 


JavaScript 是 通过 <script> 元 素 搬入 到 HTML 页 面 中 的 。 这 个 元 素 可 用 于 把 JavaScript 代码 谍 人 到 
HTML 页 面 中 ， 跟 其 他 标记 混合 在 一 起 ， 也 可 用 于 引入 保存 在 外 部 文件 中 的 JavaScript。 本 章 的 重点 可 
以 总 结 如 下 。 

口 要 包含 外 部 JavaScript 文件 ， 必 须 将 src 属性 设置 为 要 包含 文件 的 URL。 文 件 可 以 跟 网 页 在 同 
一 台 服 务 器 上 ， 也 可 以 位 于 完全 不 同 的 域 。 

口 所 有 <script> 元 素 会 依照 它们 在 网 页 中 出 现 的 次 序 被 解释 。 在 不 使 用 aefer 和 async 属性 的 
情况 下 ， 包 含 在 <script> 元 素 中 的 代码 必须 严格 按 次 序 解释 。 

口 对 不 推迟 执行 的 脚本 ， 浏 览 器 必须 解释 完 位 于 <script> 元 素 中 的 代码 ， 然 后 才能 继续 泻 染 页 面 
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的 剩余 部 分 。 为 此 ， 通常 应 该 把 <script> 元 素 放 到 页 面 末尾 ， 介 于 主 内 容 之 后 及 </body> 标 签 
之 前 。 

口 可 以 使 用 aefer 属性 把 脚本 推迟 到 文档 泻 染 完毕 后 再 执行 。 推 迟 的 脚本 原则 上 按照 它们 被 列 出 
的 次 序 执行 。 

口 可 以 使 用 async 属性 表示 脚本 不 需要 等 待 其 他 脚本 ， 同 时 也 不 阻塞 文档 泻 染 ， 即 异步 加 载 。 异 




















步 脚本 不 能 保证 按照 它们 在 页 面 中 出 现 的 次 序 执行 。 
口 通过 使 用 <noscript> 元 素 , 可 以 指定 在 浏览 器 不 支持 脚本 时 显示 的 内 容 。 如 果 浏 览 器 支持 并 启 
用 脚本 ， 则 <noscript> 元 素 中 的 任何 内 容 都 不 会 被 演 染 。 




































































第 可 间 


本 章 内 容 
口 语法 
口 数据 类 型 
口 流 控制 语句 
口 理解 函数 




















任何 语言 的 核心 所 描述 的 都 是 这 门 语言 在 最 基本 的 层面 上 如 何 工 作 , 涉及 语法 、 操 作 符 、 数 据 类 型 
以 及 内 置 功 能 ,在 此 基础 之 上 才 可 以 构建 复杂 的 解决 方案 .如 前 所 述 ,ECMA-262 以 一 个 名 为 ECMAScript 
的 伪 语 言 的 形式 ， 定 义 了 JavaScript 的 所 有 这 些 方面 。 

ECMA-262 第 5 版 (ES5 ) 定义 的 ECMAScript, 是 目前 为 止 实现 得 最 为 广泛 ( 即 受 浏览 器 支持 最 好 ) 
的 一 个 版 本 。 第 6 版 (ES6 ) 在 浏览 器 中 的 实现 ( 即 受 支持 ) 程度 次 之 。 到 2017 年 底 ， 大 多 数 主流 浏览 
器 几乎 或 全 部 实现 了 这 一 版 的 规范 。 为 此 ， 本 章 接 下 来 的 内 容 主 要 基于 ECMAScript 第 6 版 。 


3.1 语法 


ECMAScript 的 语法 很 大 程度 上 借鉴 了 C 语言 和 其 他 类 C 语言 ， 如 Java 和 Perl。 熟 悉 这 些 语 言 的 开 
发 者 ， 应 该 很 容易 理解 ECMAScript 宽松 的 语法 。 


3.1.1 区 分 大 小 写 

首先 要 知道 的 是 ，ECMAScript 中 一 切 都 区 分 大 小 写 。 无 论 是 变量 、 涵 数 名 还 是 操作 符 ， 都 区 分 大 
小 写 。 换 句 话 说 ， 变 量 test 和 变量 Test 是 两 个 不 同 的 变量 。 类 似 地 ，typeof 不 能 作为 函数 名 ， 因 
为 它 是 一 个 关键 字 ( 后面 会 介绍 )。 但 Typeof 是 一 个 完全 有 效 的 函数 名 。 








































































































3.1.2 ”标识 符 


所 谓 标识 符 ， 就 是 变量 、 函 数 、 属 性 或 函数 参数 的 名 称 。 标 识 符 可 以 由 一 或 多 个 下 列 字符 组 成 : 
口 第 一 个 字符 必须 是 一 个 字母 、 下 划 线 ( _ ) 或 美元 符号 ($ ); 
口 剩 下 的 其 他 字符 可 以 是 字母 、 下 划 线 、 美 元 符号 或 数字 。 

标识 符 中 的 字母 可 以 是 扩展 ASCII ( Extended ASCII ) 中 的 字母 ， 也 可 以 是 Unicode 的 字母 字符 ， 
如 入 和 下 (但 不 推荐 使 用 )。 

按照 惯例 ，ECMAScript 标识 符 使 用 驼峰 大 小 写 形式 ， 即 第 一 个 单词 的 首 字母 小 写 ， 后 面 每 个 单词 
的 首 字 母 大 写 ， 如 : 
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firstSecond 
myCar 
doSomethingImportant 


虽然 这 种 写法 并 不 是 强制 性 的 ， 但 因为 这 种 形式 跟 ECMAScript 内 置 函数 和 对 象 的 命名 方式 一 致 ， 
所 以 算是 最 佳 实践 。 








注意 关键 字 、 保 留 字 、true、false 和 null 不 能 作为 标识 符 。 有 具体 内 容 请 参考 3.2 节 。 





3.1.3 ”注释 
ECMAScript 采用 C 语言 风格 的 注释 , 包括 单行 注释 和 块 注释 。 单 行 注释 以 两 个 斜 杠 字符 开 
// 单行 注释 
块 注释 以 一 个 斜 杜 和 一 个 星 号 ( /* ) 开头 ， 以 它们 的 反 向 组 合 (*/ ) 结尾 ， 如 : 


/* 这 是 多 行 
注释 */ 





头 , 如 : 


3.1.4 严格 模式 


ECMAScript 5 增加 了 严格 模式 ( strict mode ) 的 概念 。 严 格 模式 是 一 种 不 同 的 JavaScript 解析 和 执 
行 模型 ， ECMAScript 3 的 一 些 不 规范 写法 在 这 种 模式 下 会 被 处 理 , 对 于 不 安全 的 活动 将 抛 出 错误 。 要 对 
整个 脚本 启用 严格 模式 ， 在 脚本 开头 加 上 这 一 行 : 

EL 

虽然 看 起 来 像 个 没有 赋值 给 任何 变量 的 字符 串 , 但 它 其 实 是 一 个 预 处 理 指令 。 任何 支持 的 JavaScript 
引擎 看 到 它 都 会 切换 到 严格 模式 。 选 择 这 种 语法 形式 的 目的 是 不 破坏 ECMAScript 3 语法 。 

也 可 以 单独 指定 一 个 函数 在 严格 模式 下 执行 ， 只 要 把 这 个 预 处 理 指令 放 到 函数 体 开头 即 可 : 

function doSomething() { 

"Use StEiet"; 

, // 函数 体 

严格 模式 会 影响 JavaScript 执行 的 很 多 方面 ， 因 此 本 书 在 用 到 它 时 会 明确 指出 来 。 所 有 现代 浏览 
都 支持 严格 模式 。 


3.1.5 ”语句 


ECMAScript 中 的 语句 以 分 号 结尾 。 省 略 分 号 意味 着 由 解析 器 确定 语句 在 哪里 结尾 ， 如 下 面 的 例子 
所 示 : 

let sum =a+b // 没有 分 号 也 有 效 ， 但 不 推荐 

let diff = a - b; // 加 分 号 有 效 ， 推 荐 

即使 语句 末尾 的 分 号 不 是 必需 的 ， 也 应 该 加 上 。 记 着 加 分 号 有 助 于 防止 省 略 造成 的 问题 ， 比 如 可 以 
避免 输入 内 容 不 完整 。 此 外 ， 加 分 号 也 便于 开发 者 通过 删除 空 行 来 压缩 代码 ( 如 果 没 有 结尾 的 分 号 ， 只 
删除 空 行 ， 则 会 导致 语法 错误 )。 加 分 号 也 有 助 于 在 某 些 情况 下 提升 性 能 ， 因 为 解析 器 会 尝试 在 合适 的 
位 置 补 上 分 号 以 纠正 语法 错误 。 
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多 条 语句 可 以 合并 到 一 个 C 语言 风格 的 代码 块 中 。 代 码 块 由 一 个 左 花 括号 ({ ) 标识 开始 ， 一 个 右 
花 括号 (} ) 标识 结束 : 


if (test) { 
test = false; 
console.log(test); 


} 
if 之 类 的 控制 语句 只 在 执行 多 条 语句 时 要 求 必须 有 代码 块 。 不 过 ， 最 佳 实践 是 始终 在 控制 语句 中 | 














使 用 代码 块 ， 即 使 要 执行 的 只 有 一 条 语句 ， 如 下 例 所 示 : 


// 有 效 ， 但 容易 导致 错误 ， 应 该 避免 
if (test) 
console.log(test); 





// 推荐 
Ef: (Eesty 
console.log(test); 


} 
在 控制 语句 中 使 用 代码 块 可 以 让 内 容 更 清晰 ， 在 需要 修改 代码 时 也 可 以 减少 出 错 的 可 能 性 。 


3.2 ”关键 字 与 保留 字 


ECMA-262 描述 了 一 组 保留 的 关键 字 ， 这 些 关键 字 有 特殊 用 途 ， 比 如 表示 控制 语句 的 开始 和 结束 ， 
或 者 执行 特定 的 操作 。 按 照 规定 ， 保 留 的 关键 字 不 能 用 作 标 识 符 或 属性 名 。ECMA-262 第 6 版 规定 的 所 
有 关键 字 如 下 : 




















break do in typeof 
case else instanceof var 
catch export new Volid 
class extends return while 
const finally super with 
continue for switch yield 
debugger fni 人 ction this 

default if throw 

delete import try 











规范 中 也 描述 了 一 组 未 来 的 保留 字 , 同样 不 能 用 作 标 识 符 或 属性 名 。 虽然 保留 字 在 语言 中 没有 特定 
用 途 ， 但 它们 是 保留 给 将 来 做 关键 字 用 的 。 
以 下 是 ECMA-262 第 6 版 为 将 来 保留 的 所 有 词汇 。 


始终 保留 : 





























enum 


严格 模式 下 保留 : 

implements package public 
interface protected static 
let private 

模块 代码 中 保留 : 


await 
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这 些 词 汇 不 能 用 作 标 识 符 , 但 现在 还 可 以 用 作对 象 的 属性 名 。 一般 来 说 ,最 好 还 是 不 要 使 用 关键 3 
和 保留 字 作 为 标识 符 和 属性 名 ， 以 确保 兼容 过 去 和 未 来 的 ECMAScript 版 本 。 


3.3 变量 i 
文旦 视频 讲解 


ECMAScript 变量 是 松散 类 型 的 ， 意 思 是 变量 可 以 用 于 保存 任何 类 型 的 数据 。 每 个 变量 只 不 过 是 一 
个 用 于 保存 任意 值 的 命名 占 位 符 。 有 3 个 关键 字 可 以 声明 变量 : var 、const 和 let。 其 中 , var 在 
ECMAScript 的 所 有 版 本 中 都 可 以 使 用 ， 而 const 和 let 只 能 在 ECMAScript 6 及 更 晚 的 版 本 中 使 用 。 





























































































3.3.1 var 关键 字 
要 定义 变量 , 可 以 使 用 var 操作 符 ( 注意 var 是 一 个 关键 字 ), 后 跟 变 量 名 ( 即 标识 符 , 如 前 所 述 ): 


Var message; 

这 行 代码 定义 了 一 个 名 为 message 的 变量 , 可 以 用 它 保存 任何 类 型 的 值 。( 不 初始 化 的 情况 下 , 变 
量 会 保存 一 个 特殊 值 undefined， 下 一 节 讨 论 数 据 类 型 时 会 谈 到 。) ECMAScript 实现 变量 初始 化 ， 
此 可 以 同时 定义 变量 并 设置 它 的 值 : 

Var message = "hi"; 

这 里 , message 被 定义 为 一 个 保存 字符 串 值 hi 的 变量 。 像 这 样 初始 化 变量 不 会 将 它 标 识 为 字符 
类 型 ， 只 是 一 个 简单 的 赋值 而 已 。 随 后 ， 不 仅 可 以 改变 保存 的 值 ， 也 可 以 改变 值 的 类 型 : 


Var message = "hi"; 
message = 100; // 合法 ， 但 不 推荐 


在 这 个 例子 中 , 变量 message 首先 被 定义 为 一 个 保存 字符 串 值 hi 的 变量 , 然后 又 被 重 写 为 保存 了 
数值 100。 虽 然 不 推荐 改变 变量 保存 值 的 类 型 ， 但 这 在 ECMAScript 中 是 完全 有 效 的 。 

1. vaz 声明 作用 域 

关键 的 问题 在 于 ,使 用 var 操作 符 定义 的 变量 会 成 为 包含 它 的 函数 的 局 部 变量 。 比 如 ,使 用 var 
在 一 个 函数 内 部 定义 一 个 变量 ， 就 意味 着 该 变量 将 在 函数 退出 时 被 销毁 

function test() { 

var message = "hi"; // 局 部 变量 
} 


test (); 
console.log(message); // 出 错 | 


这 里 , message 变量 是 在 函数 内 部 使 用 var 定义 的 。 函数 叫 test (), 调用 它 会 创建 这 个 变量 并 给 
它 赋 值 。 调 用 之 后 变量 随即 被 销毁 ， 因 此 示例 中 的 最 后 一 行 会 导致 错误 。 不 过 , 在 函数 内 定义 变量 时 省 
略 var 操作 符 ， 可 以 创建 一 个 全 局 变量 : 


function test() { 
message = "hi",; // 全 局 变量 
} 
test (); 
console.log(message); // "hi" 


去 掉 之 前 的 var 操作 符 之 后 , message 就 变 成 了 全 局 变量 。 只 要 调用 一 次 函数 test () ,就 会 定义 
这 个 变量 ,， 并且 可 以 在 函数 外 部 访问 到 。 
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注意 虽然 可 以 通过 省 略 va 操作 符 定义 全 局 变量 ， 但 不 推荐 这 么 做 。 在 局 部 作用 域 中 定 
义 的 全 局 变量 很 难 维护 ， 也 会 造成 困惑 。 这 是 因为 不 能 一 下 子 断 定 省 略 var 是 不 是 有 意 而 


为 之 。 在 严格 模式 下 ， 如 果 像 这 样 给 未 声明 的 变量 赋值 ， 则 会 导致 抛 出 ReferenceError。 














如 果 需 要 定义 多 个 变量 ， 可 以 在 一 条 语句 中 用 逗号 分 隔 每 个 变量 〈 及 可 选 的 初始 化 ): 


Var message = "hi", 
found = false， 和 | 
age = 29; 


这 里 定义 并 初始 化 了 3 个 变量 。 因 为 ECMAScript 是 松散 类 型 的 ， 所 以 使 用 不 同 数据 类 型 初始 化 的 
变量 可 以 用 一 条 语句 来 声明 。 插 入 换行 和 空格 缩 进 并 不 是 必需 的 ， 但 这 样 有 利于 阅读 理解 。 

在 严格 模式 下 ， 不 能 定义 名 为 eval 和 arguments 的 变量 ， 否 则 会 导致 语法 错误 。 

2. var 声明 提升 

使 用 var 时, 下面 的 代码 不 会 报错 。 这 是 因为 使 用 这 个 关键 字 声 明 的 变量 会 自动 提升 到 函数 作用 域 
顶部 : 


function foo() { 
console.log(age); 
Var age = 26; 

} 

foo(); // undefined 


之 所 以 不 会 报错 ， 是 因为 ECMAScript 运行 时 把 它 看 成 等 价 于 如 下 代码 : 


function foo() { 
var age; 
console.log(age); 
age = 26; 

} 

foo(); // undefined 


这 就 是 所 谓 的 “提升 ”( hoist )， 也 就 是 把 所 有 变量 声明 都 拉 到 函数 作用 域 的 项 部。 此 外 ， 反复 多 次 
使 用 var 声明 同一 个 变量 也 没有 问题 : 


function foo() { 



























































Var age = 16; 
Var age = 26; 
Var age = 36; 
console.log(age); 


} 
fo0(); // 36 


3.3.2 1let 声明 


let 跟 var 的 作用 差不多 , 但 有 着 非常 重要 的 区 别 。 最 明显 的 区 别 是 , let 声明 的 范围 是 块 作 用 域 ， 
而 var 声明 的 范围 是 函数 作用 域 。 


if (true) { 
Var name = 'Matt'; 
console.log(name); // Matt 
} 


console.log (name); // Matt 

















ml 
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if (true) { 
let age = 26; 
console.log(age); /26 
} 
console.1log (age); // ReferenceError: age 没有 定义 


在 这 里 ，age 变量 之 所 以 不 能 在 if 块 外 部 被 引用 ， 是 因为 它 的 作用 域 仅 限 于 该 块 内 部 。 块 作用 域 











是 函数 作用 域 的 子 集 ， 因 此 适用 于 var 的 作用 域 限 制 同 样 也 适用 于 let。 








let 也 不 允许 同一 个 块 作用 域 中 出 现 宛 余 声明 。 这 样 会 导致 报错 : 


Var ame 
Var name; 


le 
le 








t age; 
t age; // SyntaxError; 标识 符 age 已 经 声明 过 了 























当然 ，JavaScript 引擎 会 记录 用 于 变量 声明 的 标识 符 及 其 所 在 的 块 作 用 域 ， 因 此 艇 套 使 用 相同 的 标 
识 符 不 会 报错 ， 而 这 是 因为 同一 个 块 中 没有 重复 声明 

Var name = 'Nicholas'; 

console.log (name);} // 'Nicholas' 


二 下 


} 


le 




















(true) { 


Var name = 'Matt'; 


console.log(name); // 'Matt' 


t age = 30; 


console.log(age); ed) 


SE 


(true) { 
let age = 26; 
console.log(age); // 26 











对 声明 元 余 报错 不 会 因 混用 let 和 var 而 受 影响 。 这 两 个 关键 字 声 明 的 并 不 是 不 同类 型 的 变量 ， 


它们 只 是 指出 变量 在 相关 作用 域 如 何 存在 。 


va 
le 


le 
va 


1. 


W- 








r name; 
t name; // SyntaxError 





t age; 
r age; // SyntaxError 


暂时 性 死 区 











let 与 var 的 另 一 个 重要 的 区 别 ， 就 是 1et 声明 的 变量 不 会 在 作用 域 中 被 提升 。 


A 











name 会 被 提升 


console.log(name); // undefined 


Va 


// 


r name = "Matt'; 


age 不 会 被 提升 


console.log(age); // ReferenceError: age 没有 定义 


le 


在 


t age = 26; 


解析 代码 时 ，JavaScript 引擎 也 会 注意 出 现在 块 后 面 的 let 声明 ， 只 不 过 在 此 之 前 不 能 以 任何 方 


式 来 引用 未 声明 的 变量 。 在 let 声明 之 前 的 执行 瞬间 被 称 为 “暂时 性 死 区 ”( temporal dead zone )， 在 此 


阶段 引 











用 任何 后 面 才 声 明 的 变量 都 会 抛 出 ReferenceError。 
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2. 全 局 声明 
与 var 关键 字 不 同 ， 使 用 let 在 全 局 作用 域 中 声明 的 变量 不 会 成 为 window 对 象 的 属性 (var 声 
明 的 变量 则 会 )。 


Var name = ' Matt ' : 
console.log(window.name); // 'Matt' 





ll 





let age = 26; 























console.log(window.age); // undefined 

不 过 ，1et 声明 仍然 是 在 全 局 作用 域 中 发 生 的 ， 相 应 变量 会 在 页 面 的 生命 周期 内 存续 。 因 此 , 为 了 3 
避免 syntaxError， 必 须 确保 页 面 不 会 重复 声明 同一 个 变量 。 

3. 条 件 声明 

在 使 用 var 声明 变量 时 ， 由 于 声明 会 被 提升 ，JavaScript 引擎 会 自动 将 多 余 的 声明 在 作用 域 项 部 合 
并 为 一 个 声明 。 因 为 1et 的 作用 域 是 块 ， 所 以 不 可 能 检查 前 面 是 否 已 经 使 用 let 声明 过 同名 变量 ， 同 
时 也 就 不 可 能 在 没有 声明 的 情况 下 声明 它 。 


<script> 
Var name = 'Nicholas'; 
let age = 26; 
</script> 















































<script> 
// 假设 脚本 不 确定 页 面 中 是 否 已 经 声明 了 同名 变量 
// 那 它 可 以 假设 还 没有 声明 过 





Var name = 'Matt'; 
// 这 里 没 问 题 ， 因 为 可 以 被 作为 一 个 提升 声明 来 处 理 
// 不 需要 检查 之 前 是 否 声 明 过 同名 变量 


let age = 36; 
// 如 果 age 之 前 声明 过 ， 这 里 会 报错 














</script> 
使 用 try/catch 语句 或 typeof 操作 符 也 不 能 解决 , 因为 条 件 块 中 1et 声明 的 作用 域 仅 限于 该 块 。 
<script> 

let name = 'Nicholas'; 


let age = 36; 
</script> 





<script> 
// 假设 脚本 不 确定 页 面 中 是 否 已 经 声明 了 同名 变量 
// 那 它 可 以 假设 还 没有 声明 过 
if (typeof name === 'undefined') { 
let name; 


} 
// name 被 限制 在 if {} 块 的 作用 域内 
// 因此 这 个 赋值 形 同 全 局 赋值 


name = 'Matt'; 


try { 

console.log(age); // 如 果 age 没有 声明 过 ， 则 会 报错 
} 
catch(error) { 

let age; 





// age 被 限制 在 catch {} 块 的 作用 域内 
// 因此 这 个 赋值 形 同 全 局 赋值 
age = 26; 

/EOLLOES 


为 此 ， 对 于 let 这 个 新 的 ES6 声明 关键 字 ， 不 能 依赖 条 件 声明 模式 。 


注意 不 能 使 用 let 进行 条 件 式 声明 是 件 好 事 , 因为 条 件 声明 是 一 种 反 模 式 ， 它 让 程序 变 


得 更 难 理解 。 如 果 你 发 现 自己 在 使 用 这 个 模式 ， 那 一 定 有 更 好 的 替代 方式 。 





4. for 循环 中 的 let 声明 
在 let 出 现 之 前 ，for 循环 定义 的 迭代 变量 会 渗透 到 循环 体外 部 : 
for (var 工 = 0; i < 5; ++i) { 
// 循环 逻辑 
} 


console.log(i); // 5 


改 成 使 用 1et 之 后 ， 这 个 问题 就 消失 了 ， 因 为 迭代 变量 的 作用 域 仅 限于 for 循环 块 内 部 : 
for (let i = 0; i < 5; ++i) { 

// 循环 逻辑 
} 


console.log(i); // ReferenceError: i 没有 定义 


在 使 用 var 的 时 候 ， 最 常见 的 问题 就 是 对 迭代 变量 的 奇特 声明 和 修改 : 


for (var i = 0; i < 5; ++i) { 
setTimeout(() => console.log(i), 0) 














i 

// 实际 上 会 输出 5、5、5、5、5 

之 所 以 会 这 样 ， 是 因为 在 退出 循环 时 ， 和 迭代 变量 保存 的 是 导致 循环 退出 的 值 : 5。 在 之 后 执行 超时 
逻辑 时 ， 所 有 的 :都 是 同一 个 变量 ， 因 而 输出 的 都 是 同一 个 最 终 值 。 

而 在 使 用 let 声明 迭代 变量 时 ，JavaScript 引擎 在 后 台 会 为 每 个 迭代 循环 声明 一 个 新 的 迭代 变量 。 
每 个 setTimeout 引用 的 都 是 不 同 的 变量 实例 , 所 以 console.1og 输出 的 是 我 们 期 望 的 值 ,也 就 是 循 
环 执 行 过 程 中 每 个 迭代 变量 的 值 。 


for (let i = 0; i < 5; ++i) { 
SetTimeout (() => console.log(i), 0) 






































} 
// 会 输出 0、1、2、3、4 


这 种 每 次 迭代 声明 一 个 独立 变量 实例 的 行为 适用 于 所 有 风格 的 for 循环 , 包括 for-in 和 for-of 
循环 。 

















3.3.3 ”const 声明 


const 的 行为 与 let 基本 相同 ， 唯 一 一 个 重要 的 区 别 是 用 它 声 明 变 量 时 必须 同时 初始 化 变量 ， 且 
尝试 修改 const 声明 的 变量 会 导致 运行 时 错误 。 


const age = 26; 
age = 36; // TypeError: 给 常量 赋值 
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// const 也 不 允许 重复 声明 
const name = 'Matt'; 
const name = 'Nicholas'; // SyntaxError 


// const 声明 的 作用 域 也 是 块 


const name = 'Matt'; 
if (true) { 
const name = 'Nicholas'; 


} 


console.log(name); // Matt 


const 声明 的 限制 只 适用 于 它 指向 的 变量 的 引用 。 换 句 话 说， 如 果 const 变量 引用 的 是 一 个 对 象 ， 
那么 修改 这 个 对 象 内 部 的 属性 并 不 违反 const 的 限制 。 


const person = {}; 
person.name = 'Matt'; // ok 


JavaScript 引擎 会 为 for 循环 中 的 let 声明 分 别 创 建 独立 的 变量 实例 ， 虽 然 const 变量 跟 let 变 
量 很 相似 ， 但 是 不 能 用 const 来 声明 迭代 变量 ( 因为 友 代 变 量 会 自 增 ): 

for (const i = 0; i < 10; ++i) {} // TypeError: 给 常量 赋值 

不 过 ， 如 果 你 只 想 用 const 声明 一 个 不 会 被 修改 的 for 循环 变量 ， 那 也 是 可 以 的 。 也 就 是 说 ， 
次 迭代 只 是 创建 一 个 新 变量 。 这 对 for-of 和 for-in 循环 特别 有 意义 : 


et A137;S, ,03 
for (const j = 7; i < 5; ++1i) ({ 
console.1o0g(j); 






























































er Wa Ma ore 


fo (COnst. Key Tn {as: TF bs 2}) 
console.log(key); 


ph t= 


for (const value of [1,2,3,4,5]) { 
console.log(value); 


A L203 dE 


3.3.4 ”声明 风格 及 最 佳 实践 


ECMAScript 6 增加 let 和 const 从 客观 上 为 这 门 语言 更 精确 地 声明 作用 域 和 语义 提供 了 更 好 的 支 
持 。 行 为 怪异 的 var 所 造成 的 各 种 问题 ， 已 经 让 JavaScript 社 区 为 之 苦恼 了 很 多 年 。 随 着 这 两 个 新 关键 
字 的 出 现 ， 新 的 有 助 于 提升 代码 质量 的 最 佳 实践 也 逐渐 显现 。 

1. 不 使 用 var 

有 了 let 和 const， 大 多 数 开 发 者 会 发 现 自 己 不 再 需要 var 了 。 限 制 自 己 只 使 用 let 和 const 
有 助 于 提升 代码 质量 ， 因 为 变量 有 了 明确 的 作用 域 、 声 明 位置 ， 以 及 不 变 的 值 。 

2. const 优先 ，let 次 之 

使 用 const 声明 可 以 让 浏览 器 运行 时 强制 保持 变量 不 变 ， 也 可 以 让 静态 代码 分 析 工 具 提 前 发 现 不 
合法 的 赋值 操作 。 因 此 ， 很 多 开发 者 认为 应 该 优先 使 用 const 来 声明 变量 ， 只 在 提前 知道 未 来 会 有 修 
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改 时 ， 再 使 用 let。 这 样 可 以 让 开发 者 更 有 信心 地 推断 某 些 变量 的 值 永远 不 会 变 ， 同 时 也 能 迅速 发 现 
意外 赋值 导致 的 非 预 期 行为 。 


3.4 数据 类 型 


ECMAScript 有 6 种 简单 数据 类 型 (也 称 为 原始 类 型 ): Undefined、Nul1、Boolean、Number、 
String 和 Symbol。sSymbol (符号 ) 是 ECMAScript 6 新 增 的 。 还 有 一 种 复杂 数据 类 型 叫 object (对 
象 )。object 是 一 种 无 序 名 值 对 的 集合 。 因 为 在 ECMAScript 中 不 能 定义 自己 的 数据 类 型 ， 所 有 值 都 可 
以 用 上 述 7 种 数据 类 型 之 一 来 表示 。 只 有 7 种 数据 类 型 似乎 不 足以 表示 全 部 数据 。 但 ECMAScript 的 数 
据 类 型 很 灵活 ， 一 种 数据 类 型 可 以 当 作 多 种 数据 类 型 来 使 用 。 





四 






































3.4.1 typeof 操作 符 


因为 ECMAScript 的 类 型 系统 是 松散 的 ， 所 以 需要 一 种 手段 来 确定 任意 变量 的 数据 类 型 。typeof 
操作 符 就 是 为 此 而 生 的 。 对 一 个 值 使 用 typeof 操作 符 会 返回 下 列 字符 串 之 一 : 

口 "undefined" 表 示 值 未 定义 ; 

"boolean" 表 示 值 为 布尔 值 ; 

"stzing" 表 示 值 为 字符 串 ; 
"number" 表 示 值 为 数值 ; 
"object "表示 值 为 对 象 〈 而 不 是 函数 ) 或 nul1; 
"function" 表 示 值 为 函数 ; 

"symbol" 表示 值 为 符号 。 

下 面 是 使 用 typeof 操作 符 的 例子 : 


let message = "some string"; 

console.log(typeof message); yA rile Ry 
console.log(typeof (message)); 7 六 “String™ 
console.log(typeof 95); // "number" 


在 这 个 例子 中 ， 我 们 把 一 个 变量 (message ) 和 一 个 数值 字面 量 传 给 了 typeof 操作 符 。 注 意 ， 
为 typeof 是 一 个 操作 符 而 不 是 函数 ， 所 以 不 需要 参数 (但 可 以 使 用 参数 )。 

注意 typeof 在 某 些 情 况 下 返回 的 结果 可 能 会 让 人 费解 ,但 技术 上 讲 还 是 正确 的 ,比如 ,调用 typeof 
null 返回 的 是 "object"。 这 是 因为 特殊 值 null 被 认为 是 一 个 对 空 对 象 的 引用 。 
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注意 ”严格 来 讲 ， 函 数 在 ECMAScript 中 被 认为 是 对 象 ， 并 不 代表 一 种 数据 类 型 。 可 是 ， 


函数 也 有 自己 特殊 的 属性 。 为 此 ， 就 有 必要 通过 typeof 操作 符 来 区 分 函数 和 其 他 对 象 。 





3.4.2 ”Undefined 类 型 


Undefined 类 型 只 有 一 个 值 , 就 是 特殊 值 undefined。 当 使 用 var 或 let 声明 了 变量 但 没有 初始 
化 时 ， 就 相当 于 给 变量 赋予 了 undefined 值 : 


let message; 
console.log(message == undefined); // true 
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在 这 个 例子 中 ,变量 message 在 声明 的 时 候 并 未 初始 化 。 而 在 比较 它 和 ungdefined 的 字面 值 时 ， 
两 者 是 相等 的 。 这 个 例子 等 同 于 如 下 示例 : 


let message = undefined; 
console.log(message == undefined); // true 


这 里 ,变量 message 显 式 地 以 undefined 来 初始 化 。 但 这 是 不 必要 的 ， 因 为 默认 情况 下 ,任何 未 
经 初始 化 的 变量 都 会 取得 undefineaq 值 。 



































注意 ”一般 来 说 ， 永 远 不 用 显 式 地 给 某 个 变量 设置 undefined 值 。 字 面值 undefined 


主要 用 于 比较 , 而 且 在 ECMA-262 第 3 版 之 前 是 不 存在 的 。 增 加 这 个 特殊 值 的 目的 就 是 为 
了 正式 明确 空 对 象 指 针 (null ) 和 未 初始 化 变量 的 区 别 。 























注意 ， 包 含 unaefined 值 的 变量 跟 未 定义 变量 是 有 区 别 的 。 请 看 下 面 的 例子 : 
let message; // 这 个 变量 被 声明 了 ， 只 是 值 为 undefined 


// 确保 没有 声明 过 这 个 变量 
// let age 


console.log(message); // "undefined" 
console.1log(age); // 报错 


在 上 面 的 例子 中 ， 第 一 个 console.1og 会 指出 变量 message 的 值 ， 即 "undefined"。 而 第 二 个 
console.1og 要 输出 一 个 未 声明 的 变量 age 的 值 ， 因 此 会 导致 报错 。 对 未 声明 的 变量 ， 只 能 执行 一 个 
有 用 的 操作 , 就 是 对 它 调 用 typeof。( 对 未 声明 的 变量 调用 aelete 也 不 会 报错 ,但 这 个 操作 没什么 用 ， 
实际 上 在 严格 模式 下 会 抛 出 错误 。) 

在 对 未 初始 化 的 变量 调用 typeof 时 ， 返 回 的 结果 是 "undaefined" ， 但 对 未 声明 的 变量 调用 它 时 ， 
返回 的 结果 还 是 "undaefined" ， 这 就 有 点 让 人 看 不 懂 了 。 比 如 下 面 的 例子 : 


let message; // 这 个 变量 被 声明 了 ， 只 是 值 为 undefined 














// 确保 没有 声明 过 这 个 变量 
// let age 


console.log(typeof message); // "undefined" 
console.log(typeof age); // "undefined" 


无 论 是 声明 还 是 未 声明 ，typeof 返回 的 都 是 字符 串 "ungefined"。 逻 辑 上 讲 这 是 对 的 ， 因 为 虽然 
严格 来 讲 这 两 个 变量 存在 根本 性 差异 ， 但 它们 都 无 法 执行 实际 操作 。 






































注意 ”即使 未 初始 化 的 变量 会 被 自动 赋予 undefined 值 ， 但 我 们 仍然 建议 在 声明 变量 的 
同时 进行 初始 化 。 这 样 ， 当 typeof 返回 "undefined" 时 ， 你 就 会 知道 那 是 因为 给 定 的 变 


量 尚未 声明 ， 而 不 是 声明 了 但 未 初始 化 。 














ungefined 是 一 个 假 值 。 因 此 ， 如 果 需 要 ,可 以 用 更 简洁 的 方式 检测 它 。 不 过 要 记 住 , 也 有 很 多 
其 他 可 能 的 值 同样 是 假 值 。 所 以 一 定 要 明确 自己 想 检 测 的 就 是 undefined 这 个 字面 值 ， 而 不 仅仅 是 
假 值 。 






































let message; // 这 个 变量 被 声明 了 ， 只 是 值 为 undefined 
// age 没有 声明 


if (message) { 
// 这 个 块 不 会 执行 
} 


if (!message) { 
// 这 个 块 会 执行 
} 


if (age) { 
// 这 里 会 报错 
} 


3.4.3 Null 类 型 


Null 类 型 同样 只 有 一 个 值 ， 即 特殊 值 nu11。 逻 辑 上 讲 ，nul1l 值 表 示 一 个 空 对 象 指针 ， 这 也 是 给 
typeof 传 一 个 nul1l 会 返回 "object "的 原因 : 


let Gar Ss nulils 
console.log(typeof car); // "object" 


在 定义 将 来 要 保存 对 象 值 的 变量 时 ， 建 议 使 用 nul1 来 初始 化 ， 不 要 使 用 其 他 值 。 这 样 ， 只 要 检查 
这 个 变量 的 值 是 不 是 nu11 就 可 以 知道 这 个 变量 是 否 在 后 来 被 重新 赋予 了 一 个 对 象 的 引用 ， 比 如 : 

0 

} 

undefined 值 是 由 null 值 派 生 而 来 的 ， 因 此 ECMA-262 将 它们 定义 为 对 
子 所 示 : 

console.log(null == undefined); // true 

用 等 于 操作 符 (== ) 比较 null 和 undefineg 始终 返回 true。 但 要 注意 ， 这 个 操作 符 会 为 了 比较 
而 转换 它 的 操作 数 ( 本 章 后 面 将 详细 介绍 )。 

即使 null 和 undefined 有 关系 ， 它 们 的 用 途 也 是 完全 不 一 样 的 。 如 前 所 述 ， 永 远 不 必 显 式 地 将 
变量 值 设 置 为 undefined。 但 null 不 是 这 样 的 。 任何 时 候 ， 只 要 变量 要 保存 对 象 ， 而 当时 又 没有 那个 
对 象 可 保存 ， 就 要 用 null 来 填充 该 变量 。 这 样 就 可 以 保持 null 是 空 对 象 指针 的 语义 ， 并 进一步 将 其 
与 undefined 区 分 开 来 。 

null 是 一 个 假 值 。 因 此 ， 如 果 需 要 ， 可 以 用 更 简洁 的 方式 检测 它 。 不 过 要 记 住 ， 也 有 很 多 其 他 可 
能 的 值 同样 是 假 值 。 所 以 一 定 要 明确 自己 想 检 测 的 就 是 null 这 个 字面 值 ， 而 不 仅仅 是 假 值 。 


let message = null; 
let age; 

































































而 上 相等 ， 如 下 面 的 例 
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if (message) { 
// 这 个 块 不 会 执行 
} 


if (!message) { 
// 这 个 块 会 执行 
} 
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if (age) { 
// 这 个 块 不 会 执行 
} 


if (!age) { 
// 这 个 块 会 执行 
} 


3.4.4 Boolean 类 型 | 


Boolean( 布尔 值 ) 类 型 是 ECMAScript 中 使 用 最 频繁 的 类 型 之 一 , 有 两 个 字面 值 : true 和 false。 
这 两 个 布尔 值 不 同 于 数值 ， 因 此 true 不 等 于 1，false 不 等 于 0。 下面 是 给 变量 赋 布 尔 值 的 例子 : 


let found = true; 
let lost = false; 


注意 , 布尔 值 字 面 量 true 和 false 是 区 分 大 小 写 的 , 因此 True 和 False( 及 其 他 大 小 混 写 形式 ) 
是 有 效 的 标识 符 ， 但 不 是 布尔 值 。 

虽然 布尔 值 只 有 两 个 ,但 所 有 其 他 ECMAScript 类 型 的 值 都 有 相应 布尔 值 的 等 价 形式 。 要 将 一 个 其 
他 类 型 的 值 转换 为 布尔 值 ， 可 以 调用 特定 的 Boolean ( ) 转型 函数 : 


let message = "Hello world!"; 
let messageAsBoolean = Boolean (message); 


在 这 个 例子 中 ， 字 符 串 message 会 被 转换 为 布尔 值 并 保存 在 变量 messageAsBoolean 中 。 
Boolean () 转型 函数 可 以 在 任意 类 型 的 数据 上 调用 ， 而 且 始 终 返 回 一 个 布尔 值 。 什 么 值 能 转换 为 true 
或 false 的 规则 取决 于 数据 类 型 和 实际 的 值 。 下 表 总 结 了 不 同类 型 与 布尔 值 之 间 的 转换 规则 。 

























































































数据 类 型 转换 为 true 的 值 转换 为 false 的 值 
Boolean true false 
String 非 空 字符 串 "" ( 空 字 符 串 ) 
Number 非 零 数值 ( 包括 无 穷 值 ) 0、NaN (参见 后 面 的 相关 内 容 ) 
Object 任意 对 象 null 
Undefined N/A (不 存在 ) undefined 
理解 以 上 转换 非常 重要 ， 因 为 像 if 等 流 控制 语句 会 自动 执行 其 他 类 型 值 到 布尔 值 的 转换 ， 例 如 : 
let message = "Hello world!"; 


if (message) { 
console.log("Value is true"); 


} 

在 这 个 例子 中 ，console.1og 会 输出 字符 串 "value is true"， 因 为 字符 串 message 会 被 自动 
转换 为 等 价 的 布尔 值 crue。 由 于 存在 这 种 自动 转换 ,理解 流 控 制 语 句 中 使 用 的 是 什么 变量 就 非常 重要 。 
错误 地 使 用 对 象 而 不 是 布尔 值 会 明显 改变 应 用 程序 的 执行 流 。 





























3.4.5 Number 类 型 


ECMAScript 中 最 有 意思 的 数据 类 型 或 许 就 是 Number 了 。Number 类 型 使 用 IEEE 754 格式 表示 整 
数 和 浮 点 值 (在 某 些 语言 中 也 叫 双 精度 值 )。 不 同 的 数值 类 型 相应 地 也 有 不 同 的 数值 字面 量 格式 。 
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最 基本 的 数值 字面 量 格式 是 十 进 制 整数 ， 直 接 写 出 来 即 可 : 

let intNum = 55; // 整数 

整数 也 可 以 用 八进制 ( 以 8 为 基数 ) 或 十 六 进 制 ( 以 16 为 基数 ) 字面 量 表示 。 对 于 八进制 字面 量 ， 
第 一 个 数字 必须 是 零 (0 )， 然 后 是 相应 的 八进制 数字 ( 数值 0~7 )。 如 果 字 面 量 中 包含 的 数字 超出 了 应 
有 的 范围 ， 就 会 忽略 前 级 的 零 ， 后 面 的 数字 序列 会 被 当成 十 进 制 数 ， 如 下 所 示 : 

let octalNuml 070; // 八进制 的 56 


let octalNum2 = 079; // 无 效 的 八进制 值 ， 当 成 79 处 理 
let octalNum3 = 08; // 无 效 的 八进制 值 ， 当 成 8 处 理 


八进制 字面 量 在 严格 模式 下 是 无 效 的 ， 会 导致 JavaScript 引擎 抛 出 语法 错误 。"™ 
要 创建 十 六 进 制 字 面 量 ， 必 须 让 真正 的 数值 前 级 0x (区 分 大 小 写 )， 然 后 是 十 六 进 制 数字 (0~9 以 
及 A~F )。 十 六 进 制 数字 中 的 字母 大 小 写 均 可 。 下 面 是 几 个 例子 : 


let hexNuml 0xA; // 十 六 进 制 10 
let hexNum2 0x1f; // 十 六 进 制 31 


使 用 八进制 和 十 六 进 制 格式 创建 的 数值 在 所 有 数学 操作 中 都 被 视 为 十 进 制 数值 。 






































































































































注意 ”由 于 JavaScript 保存 数值 的 方式 ， 实 际 中 可 能 存在 正 零 (+0 ) 和 负 零 (-0 )。 正 零 和 


负 零 在 所 有 情况 下 都 被 认为 是 等 同 的 ， 这 里 特地 说 明 一 下 。 





1. 浮 点 值 
要 定义 浮 点 值 ， 数 值 中 必须 包含 小 数 点 ， 而 且 小 数 点 后 面 必须 至 少 有 一 个 数字 。 虽 然 小 数 点 前 面 不 
是 必须 有 整数 ， 但 推荐 加 上 。 下 面 是 几 个 例子 : 


let floatNuml = 1.1; 
let floatNum2 = 0.1; 
let floatNum3 = .1; // 有效， 但 不 推荐 


因为 存储 浮 点 值 使 用 的 内 存 空间 是 存储 整数 值 的 两 倍 ， 所 以 ECMAScript 总 是 想方设法 把 值 转换 为 
整数 。 在 小 数 点 后 面 没有 数字 的 情况 下 ,数值 就 会 变 成 整数 。 类 似 地 ， 如 果 数 值 本 身 就 是 整数 ， 只 是 小 
数 点 后 面 跟着 0 ( 如 1.0 )， 那 它 也 会 被 转换 为 整数 ， 如 下 例 所 示 : 


let floatNuml = 1.; // 小 数 点 后 面 没有 数字 ， 当 成 整数 1 处 理 
let floatNum2 10.0; // 小 数 点 后 面 是 索 ， 当 成 整数 10 处 理 


对 于 非常 大 或 非常 小 的 数值 , 浮 点 值 可 以 用 科学 记 数 法 来 表示 。 科 学 记 数 法 用 于 表示 一 个 应 该 乘 以 
10 的 给 定 次 寡 的 数值 。ECMAScript 中 科学 记 数 法 的 格式 要 求 是 一 个 数值 ( 整数 或 浮 点 数 ) 后 跟 一 个 大 
写 或 小 写 的 字母 e， 再 加 上 一 个 要 乘 的 10 的 多 少 次 震 。 比 如 : 

let floatNum = 3.125e7; // 等 于 31250000 

在 这 个 例子 中 ，floatNum 等 于 31 250 000， 只 不 过 科学 记 数 法 显得 更 简洁 。 这 种 表示 法 实际 上 相 
当 于 说 :“ 以 3.125 作为 系数 ， 乘 以 10 的 7 次 宕 。 

科学 记 数 法 也 可 以 用 于 表示 非常 小 的 数值 ， 例 如 0.000 000 000 000 000 03。 这 个 数值 用 科学 记 数 法 
可 以 表示 为 3e-17。 默认 情况 下 , ECMAScript 会 将 小 数 点 后 至 少 包含 6 个 零 的 浮 点 值 转换 为 科学 记 数 法 







































































































































































GD ECMAScript 2015 或 ES6 中 的 八进制 值 通 过 前 绥 oo 来 表示 ; 严格 模式 下 ， 前 级 0 会 被 视 为 语法 错误 ， 如 果 要 表示 
八进制 值 ， 应 该 使 用 前 级 0o。 译 者 注 
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(例如 ，0.000 000 3 会 被 转换 为 3e-7 )。 

浮 点 值 的 精确 度 最 高 可 达 17 位 小 数 ， 但 在 算术 计算 中 远 不 如 整数 精确 。 例 如 ，0.1 加 0.2 得 到 的 不 
是 0.3， 而 是 0.300 000 000 000 00004。 由 于 这 种 微小 的 舍 入 错误 ， 导 致 很 难 测试 特定 的 浮 点 值 。 比 如 下 
面 的 例子 : 


if. (a 4 bi "0.3) // 别 这 么 干 ! 
console.log("You got 0.3."); 


} 


这 里 检测 两 个 数值 之 和 是 否 等 于 0.3。 如 果 两 个 数值 分 别 是 0.05 和 0.25, 或 者 0.15 和 0.15， 那 没 问 
题 。 但 如 果 是 0.1 和 0.2， 如 前 所 述 ， 测 试 将 失败 。 因 此 永远 不 要 测试 某 个 特定 的 浮 点 值 。 





























注意 之 所 以 存在 这 种 舍 入 错误 ,是 因为 使 用 了 IEEE 754 数值 ,这 种 错误 并 非 ECMAScript 


所 独 有 。 其 他 使 用 相同 格式 的 语言 也 有 这 个 问题 。 





2. 值 的 范围 

由 于 内 存 的 限制 ，ECMAScript 并 不 支持 表示 这 个 世界 上 的 所 有 数值 。ECMAScript 可 以 表示 的 最 小 
数值 保存 在 Number .MIN_VALUE 中 ， 这 个 值 在 多 数 浏览 右 中 是 5e-324; 可 以 表示 的 最 大 数值 保存 在 
Number . MAX_VALUE 中 ， 这 个 值 在 多 数 浏览 器 中 是 1.797 693 134 862 315 7e+308。 如 果 某 个 计算 得 到 的 
数值 结果 超出 了 JavaScript 可 以 表示 的 范围 ， 那 么 这 个 数值 会 被 自动 转换 为 一 个 特殊 的 Infinity (无 
穷 ) 值 。 任 何 无 法 表示 的 负数 以 -Infinity( 负 无 穷 大 ) 表示 ， 任何 无 法 表示 的 正 数 以 Infinity ( 正 
无 穷 大 ) 表示 。 

如 果 计 算 返 回 正 Infinity 或 负 Infinity， 则 该 值 将 不 能 再 进一步 用 于 任何 计算 。 这 是 因为 
Infinity 没有 可 用 于 计算 的 数值 表示 形式 。 要 确定 一 个 值 是 不 是 有 限 大 ( 即 介 于 JavaScript 能 表示 的 
最 小 值 和 最 大 值 之 间 )， 可 以 使 用 isFinite() 函数 ， 如 下 所 示 : 


let result = Number.MAX_ VALUE + Number .MAX_VALUE; 
console.log(isFinite(result)); // false 


虽然 超出 有 限 数值 范围 的 计算 并 不 多 见 , 但 总 归还 是 有 可 能 的 。 因 此 在 计算 非常 大 或 非常 小 的 数值 
时 ， 有 必要 监测 一 下 计算 结果 是 否 超 出 范围 。 






























































注意 使 用 Number.NEGATIVE_INFINITY 和 Number.POSITIVE_INFINITY 也 可 以 获 














取 正 、 负 Infinity。 没 错 ， 这 两 个 属性 包含 的 值 分 别 就 是 -Infinity 和 Infinity。 


3. NaN 

有 一 个 特殊 的 数值 叫 NaN， 意 思 是 “不 是 数值 ”( Not a Number )， 用 于 表示 本 来 要 返回 数值 的 操作 
失败 了 而 不 是 抛 出 错误 )。 比 如 ， 用 0 除 任意 数值 在 其 他 语言 中 通常 都 会 导致 错误 ， 从 而 中 止 代 码 执 
行 。 但 在 ECMAScript 中 ，0、+0 或 -0 相 除 会 返回 NaN: 

















console.10g(0/0); // NaN 

console.log(-0/+0); // NaN 

如 果 分 子 是 非 0 值 ， 分 母 是 有 符号 0 或 无 符号 0， 则 会 返回 Infinity 或 -Infinity: 
console.1og(5/0) ; // Infinity 


console.1og(5/-0); // -Infinity 
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NaN 有 几 个 独特 的 属性 。 首 先 , 任何 涉及 Na 的 操作 始终 返回 NaN (如 NaN/10 ), 在 连续 多 步 计 算 
时 这 可 能 是 个 问题 。 其 次 ，NaN 不 等 于 包括 NaN 在 内 的 任何 值 。 例 如 ， 下 面 的 比较 操作 会 返回 false: 

console.log(NaN == NaN); // false 

为 此 ，ECMAScript 提供 了 isNaN () 函数 。 该 函数 接收 一 个 参数 ， 可 以 是 任意 数据 类 型 ， 然 后 判断 
这 个 参数 是 否 “不 是 数值 ” 。 把 一 个 值 传 给 isNaN () 后 ,该 函数 会 尝试 把 它 转换 为 数值 。 某 些 非 数 值 的 
值 可 以 直接 转换 成 数值 ， 如 字符 串 "10" 或 布尔 值 。 任 何不 能 转换 为 数值 的 值 都 会 导致 这 个 函数 返回 
true。 举 例如 下 : 






































console.1log (isNaN (NaN) ); // true 

console.log (isNaN(10)); // false，10 是 数值 
console.log (isNaN("10")); // false， 可 以 转换 为 数值 10 
console.log(isNaN("blue")); // true， 不 可 以 转换 为 数值 
console.log(isNaN(true)); // false， 可 以 转换 为 数值 1 








上 述 的 例子 测试 了 5 个 不 同 的 值 。 首先 测试 的 是 NaN 本 身 ， 显然 会 返回 true。 接 着 测试 了 数值 10 
和 字符 串 "10"， 都 返回 false， 因 为 它们 的 数值 都 是 10。 字 符 串 "blue"' 不 能 转换 为 数值 ， 因 此 函数 返 
回 true。 布尔 值 true 可 以 转换 为 数值 1， 因 此 返回 false。 














注意 虽然 不 常见 , 但 isNaN() 可 以 用 于 测试 对 象 。 此 时 , 首先 会 调用 对 象 的 valueOf () 
方法 ， 然 后 再 确定 返回 的 值 是 否 可 以 转换 为 数值 。 如 果 不 能 ， 再 调用 toString () 方 法 ， 


并 测试 其 返回 值 。 这 通常 是 ECMAScript 内 置 函 数 和 操作 符 的 工作 方式 , 本 章 后 面 会 讨论 。 





4. 数值 转换 
有 3 个 函数 可 以 将 非 数 值 转换 为 数值 : Number () 、parseInt () 和 parseFloat ()。Number() 是 
转型 函数 ， 可 用 于 任何 数据 类 型 。 后 两 个 函数 主要 用 于 将 字符 串 转换 为 数值 。 对 于 同样 的 参数 ， 这 3 个 
函数 执行 的 操作 也 不 同 。 
Number () 函数 基于 如 下 规则 执行 转换 。 
口 布尔 值 ，true 转换 为 1，false 转换 为 0。 
口 数值 ， 直 接 返 回 。 
口 nul1， 返 回 0。 
口 undefined,， 返回 NaN。 
口 字符 串 ， 应 用 以 下 规则 。 

加 如 果 字 符 串 包 含 数值 字符 ， 包 括 数值 字符 前 面 带 加 、 减 号 的 情况 ， 则 转换 为 一 个 十 进 制 数值 。 
因此 ，Number ("1") 返 回 1，Number("123") 返 回 123，Number ("011") 返 回 11 (忽略 前 面 
的 零 )。 

加 如 果 字 符 串 包 含有 效 的 浮 点 值 格式 如 "1.1", 则 会 转换 为 相应 的 浮 点 值 ( 同样 ,忽略 前 面 的 零 )。 

四 如 果 字 符 串 包含 有 效 的 十 六 进 制 格式 如 "0xf"， 则 会 转换 为 与 该 十 六 进 制 值 对 应 的 十 进 制 整 

数值 。 

加 如 果 是 空 字符 串 ( 不 包含 字符 )， 则 返回 0。 

加 如 果 字 符 串 包 含 除 上 述 情况 之 外 的 其 他 字符 ， 则 返回 NaN。 

口 对 象 ， 调 用 valueof () 方 法 ， 并 按照 上 述 规则 转换 返回 的 值 。 如 果 转 换 结果 是 NaN， 则 调 月 
toString() 方 法 ， 再 按照 转换 字符 串 的 规则 转换 。 
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从 不 同 数据 类 型 到 数值 的 转换 有 时 候 会 比较 复杂 ， 看 一 看 Number () 的 转换 规则 就 知道 了 。 下 面 是 
几 个 具体 的 例子 : 


let numl = Number ("Hello world!"); // NaN 
let num2 = Number(""); $0 
let num3 = Number("000011"); // 11 
let num4 = Number (true); // 1 





可 以 看 到 ， 字 符 串 "Hello world" 转 换 之 后 是 NaN， 因 为 它 找 不 到 对 应 的 数值 。 空 字符 串 转 换 后 
是 0。 字符 串 000011 转换 后 是 11 ， 因 为 前 面 的 零 被 忽略 了 。 最 后 ，true 转换 为 1。 











注意 ”本章 后 面 会 讨论 到 的 一 元 加 操作 符 与 Number () 函数 遵循 相同 的 转换 规则 。 



































考虑 到 用 Number ( ) 函数 转换 字符 串 时 相对 复杂 且 有 点 反常 规 ， 通 常 在 需要 得 到 整数 时 可 以 优先 使 
用 parseInt () 图 数 。parseInt () 函数 更 专注 于 字符 串 是 否 包含 数值 模式 。 字 符 串 最 前 面 的 空格 会 被 
忽略 ， 从 第 一 个 非 空格 字符 开始 转换 。 如 果 第 一 个 字符 不 是 数值 字符 、 加 号 或 减 号 ，parseInt () 立 即 
返回 NaN。 这 意味 着 空 字 符 串 也 会 返回 NaN ( 这 一 点 跟 Numpber () 不 一 样 ， 它 返回 0 )。 如 果 第 一 个 字符 
是 数值 字符 、 加 号 或 减 号 ， 则 继续 依次 检测 每 个 字符 ， 直 到 字符 串 末 尾 ， 或 碰 到 非 数 值 字符 。 比 如 ， 
"1234blue" 会 被 转换 为 1234， 因 为 "blue" 会 被 完全 和 忽略。 类 似 地 ，"22 .5" 会 被 转换 为 22， 因 为 小 数 
点 不 是 有 效 的 整数 字符 。 

假设 字符 串 中 的 第 一 个 字符 是 数值 字符 ，parseInt () 函数 也 能 识别 不 同 的 整数 格式 ( 十进制 、 八 
进 制 、 十 六 进 制 ), 换 句 话说 ,如 果 字 符 串 以 "0x" 开 头 , 就 会 被 解释 为 十 六 进 制 整数 。 如 果 字 符 串 以 "0" 
开头 ， 且 紧 跟 着 数值 字符 ， 在 非 严格 模式 下 会 被 某 些 实现 解释 为 八进制 整数 。 

下 面 几 个 转换 示例 有 助 于 理解 上 述 规则 ; 






















































































let numl = parseInt ("1234blue"); // 1234 

let num2 = parseInt(" // NaN 

let num3 = parseInt ("OxA"); // 10， 解 释 为 十 六 进 制 整 数 
let num4 = parseInt (22. i A 22 

let num5 = parseInt ("70"); // 70， 解 释 为 十 进 制 值 
let num6 = parseInt ("0xf"); // 15， 解 释 为 十 六 进 制 整 数 


不 同 的 数值 格式 很 容易 混淆 ， 因 此 parseInt () 也 接收 第 二 个 参数 ， 用 于 指定 底数 ( 进 制 数 )。 如 
果 知 道 要 解析 的 值 是 十 六 进 制 ， 那 么 可 以 传人 16 作为 第 二 个 参数 ， 以 便 正确 解析 : 

let num = parseInt ("OxAF", 16); // 175 

事实 上 ， 如 果 提 供 了 十 六 进 制 参数 ， 那 么 字符 串 前 面 的 "0x" 可 以 省 掉 : 


let numl parseInt ("AF";, 16)3 .AAA 175 
let num2 parseInt ("AF"); // NaN 


在 这 个 例子 中 ,第 一 个 转换 是 正确 的 ， 而 第 二 个 转换 失败 了 。 区 别 在 于 第 一 次 传人 了 进 制 数 作为 参 
数 , 告诉 parseInt () 要 解析 的 是 一 个 十 六 进 制 字符 串 。 而 第 二 个 转换 检测 到 第 一 个 字符 就 是 非 数 值 字 


















































符 ， 随 即 自动 停止 并 返回 NaN。 
通过 第 二 个 参数 ， 可 以 极 大 扩展 转换 后 获得 的 结果 类 型 。 比 如 : 
let numl = parseInt ("10", 2); // 2， 按 二 进 制 解析 
let num2 = parseInt ("10", 8); // 8， 按 八进制 解析 
let num3 = barseInt("10"，10); // 10， 按 十 进 制 解 析 
let num4 = barseInt("10"，16); // 16， 按 十 六 进 制 解析 
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因为 不 传 底数 参数 相当 于 让 parseInt () 自己 决定 如 何 解析 ， 所 以 为 避免 解析 出 错 ， 建 议 始终 传 给 
它 第 二 个 参数 。 





注意 ”多数 情况 下 解析 的 应 该 都 是 十 进 制 数 ， 此 时 第 二 个 参数 就 要 传 入 10。 








parseFloat () 函数 的 工作 方式 跟 parseInt () 函数 类 似 , 都 是 从 位 置 0 开始 检测 每 个 字符 。 同样， 
它 也 是 解析 到 字符 串 末 尾 或 者 解析 到 一 个 无 效 的 浮 点 数值 字符 为 止 。 这 意味 着 第 一 次 出 现 的 小 数 点 是 有 
效 的 , 但 第 二 次 出 现 的 小 数 点 就 无 效 了 ,此 时 字符 串 的 剩余 字符 都 会 被 忽略 。 因 此 ，"22.34.5" 将 转换 
成 22.34。 

parseFloat () 函数 的 另 一 个 不 同 之 处 在 于 ， 它 始终 忽略 字符 串 开 头 的 零 。 这 个 函数 能 识别 前 面 讨 
论 的 所 有 浮 点 格式 ， 以 及 十 进 制 格式 〈 开 头 的 零 始终 被 忽略 )。 十 六 进 制 数值 始终 会 返回 0。 因 为 
parseFloat () 只 解析 十 进 制 值 ， 因 此 不 能 指定 底数 。 最 后 ， 如 果 字 符 串 表 示 整 数 (没有 小 数 点 或 者 小 
数 点 后 面具 有 一 个 零 )， 则 parseFloat () 返 回 整数 。 下 面 是 几 个 示例 : 
























































let numl = parseFloat ("1234blue"); // 1234， 按 整数 解析 
let num2 = parseFloat ("0xA"); // 0 

let num3 = parseFloat ("22.5"); A -DOES 

let num4 = parseFloat ("22.34.5"); A 2234 

let num5 = parseFloat ("0908.5"); /4 908:5 

let num6 = parseFloat ("3.125e7"); // 31250000 


3.4.6 String 类 型 


string (字符 串 ) 数据 类 型 表示 零 或 多 个 16 位 Unicode 字符 序列 。 字 符 串 可 以 使 用 双 引 号 (" )、 
单 引号 (') 或 反 引 号 (` ) 标示 ， 因 此 下 面 的 代码 都 是 合法 的 : 
Jet firstName = "John"; 


let lastName "JaCob.'; 
let lastName ‘Jingleheimerschmidt. 


跟 某 些 语言 中 使 用 不 同 的 引号 会 改变 对 字符 串 的 解释 方式 不 同 ，ECMAScript 语法 中 表示 字符 串 的 
引号 没有 区 别 。 不 过 要 注意 的 是 ， 以 某 种 引号 作为 字符 串 开 头 ， 必 须 仍 然 以 该 种 引号 作为 字符 串 结 尾 。 
比如 ， 下 面 的 写法 会 导致 语法 错误 : 


let firstName = 'Nicholas"; // 语法 错误 : 开头 和 结尾 的 引号 必须 是 同一 种 















































1. 字符 字面 量 

字符 串 数 据 类 型 包含 一 些 字 符 字面 量 ， 用 于 表示 非 打 印字 符 或 有 其 他 用 途 的 字符 ， 如 下 表 所 示 : 
字面 量 含 义 

\n 换行 

a 制 表 

\b 退 格 

\r 可 车 

\f 换 页 

\\ 反 斜 杜 (、\) 














Ni 单 引 号 (' )， 在 字符 串 以 单 引号 标示 时 使 用 ， 例 如 'He saigd, \'hey.\"' 
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( 续 ) 
字 面 量 含 义 
Nn 双 引 号 (" )， 在 字符 串 以 双 引 号 标示 时 使 用 ， 例 如 "He said, \"hey.\"" 
NS 反 引 号 (、)， 在 字符 串 以 反 引号 标示 时 使 用 ， 例 如 `He saida，\ hey 改 、 
\xnn 以 十 六 进 制 编码 nn 表示 的 字符 ( 其 中 n 是 十 六 进 制 数 字 0~F )， 例 如 \x41 等 于 "A" 
\unnnn 以 十 六 进 制 编码 nnnn 表示 的 Unicode 字符 ( 其 中 了 是 十 六 进 制 数字 0~F ), 例如 \u03a3 等 于 希腊 字 


这 些 字符 字面 量 可 以 出 现在 字符 串 中 的 任意 位 置 ， 且 可 以 作为 单个 字符 被 解释 : 

let text = "This is the letter sigma: \u03a3."; 

在 这 个 例子 中 , 即使 包含 6 个 字符 长 的 转 义 序列 , 变量 text 仍然 是 28 个 字符 长 。 因 为 转 义 序列 表 
示 一 个 字符 ， 所 以 只 算 一 个 字符 。 

字符 串 的 长 度 可 以 通过 其 length 属性 获取 : 

console.log(text.length); // 28 


这 个 属性 返回 字符 串 中 16 位 字符 的 个 数 。 












































注意 ”如 果 字 符 串 中 包含 双 字 节 字 符 , 那 么 1ength 属性 返回 的 值 可 能 不 是 准确 的 字符 数 。 


第 5 章 将 具体 讨论 如 何 解 决 这 个 问题 。 





2. 字符 串 的 特点 

ECMAScript 中 的 字符 串 是 不 可 变 的 (immutable ), 意思 是 一 旦 创建 , 它们 的 值 就 不 能 变 了 。 要 修改 
某 个 变量 中 的 字符 串 值 ， 必 须 先 销毁 原始 的 字符 串 ， 然 后 将 包含 新 值 的 男 一 个 字符 串 保存 到 该 变量 ,如 
下 所 示 : 


let lang = "Java"; 
lang = lang + "Script"; 


这 里 , 变量 1ang 一 开始 包含 字符 串 "Java"。 紧 接着 , 1ang 被 重新 定义 为 包含 "Java" 和 "Script" 
的 组 合 ， 也 就 是 "Javascript"。 整 个 过 程 首先 会 分 配 一 个 足够 容纳 10 个 字符 的 空间 ， 然 后 填充 上 
"Java" 和 "Script"。 最 后 销毁 原始 的 字符 串 "Java" 和 字符 串 "Script"， 因 为 这 两 个 字符 串 都 没有 用 
了 。 所 有 处 理 都 是 在 后 台 发 生 的 ， 而 这 也 是 一 些 早期 的 浏览 器 (如 Firefox 1.0 之 前 的 版 本 和 IE6.0 ) 在 
拼接 字符 串 时 非常 慢 的 原因 。 这 些 浏览 器 在 后 来 的 版 本 中 都 有 针对 性 地 解决 了 这 个 问题 。 

3. 转换 为 字符 串 

有 两 种 方式 把 一 个 值 转换 为 字符 串 。 首 先是 使 用 几乎 所 有 值 都 有 的 tostring () 方 法 。 这 个 方法 唯 
一 的 用 途 就 是 返回 当前 值 的 字符 串 等 价 物 。 比 如 : 


let age = 11; 





















































let ageAsString = age.toString(); // 字符 事 "11" 
let found = true; 
let foundAsString = found.toString(); // 字符 串 "true" 





toSstring() 方 法 可 见于 数值 ,布尔 值 、 对象 和 字符 串 值 。( 没 错 , 字符 串 值 也 有 tostring () 方 法 ， 
该 方法 只 是 简单 地 返回 自身 的 一 个 副本 。) null 和 undefined 值 没 有 toString () 方 法 。 
多 数 情况 下 ，tostring () 不 接收 任何 参数 。 不 过 ， 在 对 数值 调用 这 个 方法 时 ，tostring() 可 以 
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接收 一 个 底数 参数 ， 即 以 什么 底数 来 输出 数值 的 字符 串 表示 。 默 认 情况 下 ，tostring () 返 回 数值 的 十 
进 制 字 符 串 表示 。 而 通过 传人 参数 ， 可 以 得 到 数值 的 二 进 制 、 八 进 制 、 十 六 进 制 ， 或 者 其 他 任何 有 效 基 











数 的 字符 串 表 示 ， 比 如 : 


let num = 10; 


console.log (num.toString()); Vy A ND 
console.log(num.toString(2)); J2 A NO NDE 
console.log(num.toString(8)); Ly Wy 
console.log(num.toString(10)); XO 
console.log (num.toString(16)); // "a" 


这 个 例子 展示 了 传人 底数 参数 时 ,tostring () 输 出 的 字符 串 值 也 会 随 之 改变 。 数 值 10 可 以 输出 为 

















任意 数值 格式 。 注 意 ， 默 认 情况 下 〈 不 传 参数 ) 的 输出 与 传人 参数 10 得 到 的 结果 相同 。 












































如 果 你 不 确定 一 个 值 是 不 是 null 或 undefined, 可 以 使 用 String () 转 型 函数 ， 它 始终 会 返回 














示 相 应 类 型 值 的 字符 串 。string () 函数 遵循 如 下 规则 。 
口 如 果 值 有 tostring () 方 法 ， 则 调用 该 方法 (不 传 参数 ) 并 返回 结果 。 
口 如 果 值 是 aul11， 返 回 "null"。 

口 如 果 值 是 undefined， 返 回 "undefined"。 

下 面 看 几 个 例子 : 


let valuel = 10; 
Jet value2 = true; 
let value3 = null; 
let Value4: 











console.log(String (valuel)) ISO 
console.log(String(value2)); // "true" 
console.log(String (value3)) yp Rb 
console.log(String(value4)); // "undefined" 








xi 


这 里 展示 了 将 4 个 值 转换 为 字符 串 的 情况 :; 一 个 数值 、 一 个 布尔 值 、 一 个 null 和 一 个 undqefined。 
数值 和 布尔 值 的 转换 结果 与 调用 tostring () 相同。 因为 null 和 undefined 没有 tostring () 方 法 ， 





所 以 string () 方 法 就 直接 返回 了 这 两 个 值 的 字面 量 文本 。 





注意 ”用 加 号 操作 符 给 一 个 值 加 上 一 个 空 字符 串 "" 也 可 以 将 其 转换 为 字符 串 ( 加 号 操作 符 


本 章 后 面 会 介绍 )。 





4. 模板 字面 量 











ECMAScript 6 新 增 了 使 用 模板 字面 量 定义 字符 串 的 能 力 。 与 使 用 单 引号 或 双 引 号 不 同 , 模板 字 首 








Im| 
| 














保留 换行 字符 ， 可 以 跨行 定义 字符 串 : 
let myMultiLineString = 'first line\nsecond line'; 


let myMultiLineTemplateLiteral = ‘first line 
second line; 


console.log(myMultiLineString); 
// first line 
// second line" 


console.log(myMultiLineTemplateLiteral); 
// first line 
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// second line 
console.1og (myMultiDineString === myMultiLinetemplateLiteral); // true 
顾名思义 ， 模 板 字面 量 在 定义 模板 时 特别 有 用 ， 比 如 下 面 这 个 HTML 模板 : 
let pageHTML = 、 
<div> 

<a href="#"> 

<span>Jake</span> 

</a> 
</div>; 
由 于 模板 字面 量 会 保持 反 引 号 内 部 的 空格 ,因此 在 使 用 时 要 格外 注意 。 格式 正确 的 模板 字符 串 看 起 

来 可 能 会 缩 进 不 当 : 
// 这 个 模板 字面 量 在 换行 符 之 后 有 25 个 空格 符 
let myTemplateLiteral = ‘first line 
secongd line.; 

console.log(myTemplateLiteral.length); // 47 


// 这 个 模板 字面 量 以 一 个 换行 符 开头 
let secondTemplateLiteral = . 


iS 


line 


second line.; 
le.log(secondTemplateLiteral[0] === '\n'); // true 


Conso 


// 这 个 模板 字面 量 没有 意料 之 外 的 字符 


let thirdTemplateLiteral = ‘first line 
second line.; 
console.log(thirdTemplateLiteral); 

// first line 

// second line 


5. 字符 串 插值 
模板 字面 量 最 常用 的 一 个 特性 是 支持 字符 串 插 值 ， 也 就 是 可 以 在 一 个 连续 定义 中 插入 一 个 或 多 个 


值 。 技 术 上 讲 ， 模板 字 首 








是 字符 串 。 模 板 字 面 量 在 定义 时 立即 求 值 并 转换 为 字符 串 实 例 , 人 
用 域 中 取 值 。 
字符 串 插 值 通过 在 ${} 中 使 用 一 个 JavaScript 表达 式 实现 : 
let Value = 5; 
let exponent = 'second'; 






























































// 以 前 ， 字符 串 播 值 是 这 样 实现 的 : 


let i 
val 


nterpolatedString = 
Ue + 


// 现在 ， 可 以 用 模板 字面 量 这 样 实现 : 





let i 





nterpolatedTemplateLiteral = 





' to the ' + exponent + ' power is ' + (value * value); 


‘Ss{ value } to the ${ exponent } power is S${ value * value }.， 


Conso 
Conso 


所 有 掉 


le.log(interpolatedstring); // 5 to the second power is 25 
le.log(interpolatedTemplateLiteral); // 5 to the second power is 25 
入 的 值 都 会 使 用 tostring () 强制 转型 为 字符 串 ， 而 且 任 何 JavaScript 表达 式 都 可 以 





值 。 府 套 的 模板 字符 串 无 须 转 义 : 




















日 于 可 








j 量 不 是 字符 串 ， 而 是 一 种 特殊 的 JavaScript 句法 表达 式 ， 只 不 过 求 值 后 得 到 的 
F 何 插入 的 变量 也 会 从 它们 最 接近 的 作 


ED 
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console.log(‘Hello, S${ ‘World. }!`.); // Hello, World! 
将 表达 式 转换 为 字符 串 时 会 调用 tostring () : 
let- 于 @@O 二 { :toOStEInNng "() E> "WorLld®. 了 
console.log( ‘Hello, S${ foo }!.); // Hello, World! 
在 插值 表达 式 中 可 以 调用 函数 和 方法 : 
function capitalize(word) { 
return ‘${ word[0] .toUpperCase() }${ word.slice(1) ) 


} 


console.log(“${ capitalizel( 


'hello') }, S${ capitalize('world') }!.); // Hello, World! 


此 外 ,模板 也 可 以 插入 自己 之 前 的 值 : 


let Value = ''; 

function append() { 
value ‘$s{value}abc. 
console.log(value); 

} 

append (); 

append (); 

append (); 


6. 模板 字面 量 标签 函数 

模板 字面 量 
会 接收 被 插值 记号 分 隔 后 的 模板 和 对 

标签 函数 本 身 是 一 个 常规 函数 ， 


// abc 
// abcabc 
// abcabcabc 














也 支持 定义 标签 函数 (tag function )， 而 通过 








接收 到 的 参数 依次 是 原始 字符 串 数 组 





值得 到 的 字符 串 。 
最 好 通过 一 个 例子 来 理解 : 




















function simpleTag (strings, 
console.log(strings); 
console. ( 
console.1log( 
console. ( 


return 


} 


'foobar'; 


let untaggedResult 
let taggedResult 
Le 
L226 

Vs) 
/YS 


Pe 


wa 


console.log(untaggedResult); 


console.log(taggedResult); 


因为 表达 式 参 数 的 数量 
数组 中 : 

















To a 
= simpleTag  ${ a 


量 是 可 变 的 ， 所 以 通常 应 





标签 函数 可 以 自 定 义 持 值 行为 。 标 签 函 数 

















每 个 表达 式 求 值 的 结果 。 
通过 前 级 到 模板 字面 量 来 应 用 自 定义 行为 ， 如 下 例 所 示 。 标 签 函数 
和 对 每 个 表达 式 求 值 的 结果 。 这 个 函数 的 返回 值 是 对 模板 字面 量 求 






































aVvalExpression, bValExpression, sumExpression) { 


log(aValExpression); 
bValExpression); 
log(sumExpression); 


BD 
}+${b}= $sta+b}; 
2 el 
/1 "FOObar" 





应 该 使 用 剩余 操作 符 (rest operator ) 将 它们 收集 到 一 个 
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let a = 6; 
Let: .baS.93 
function simpleTag (strings, ...expressions) { 


console.log(strings); 
for(const expression of expressions) { 
console.log (expression); 


} 


return 'foobar'; 


} 
let taggedResult = simpleTag'$S{ a} + S${b}= S$S{a+b}.;} 





ep 上 ee 中 十 和 oh oh | 

ZG 

9 

:5 

console.log(taggedResult); // "foobar" 


对 于 及 个 插值 的 模板 字面 量 ， 传 给 标签 函数 的 表达 式 参数 的 个 数 始 终 是 n， 而 传 给 标签 函数 的 第 
一 个 参数 所 包含 的 字符 串 个 数 则 始终 是 n+1。 因 此 ， 如 果 你 想 把 这 些 字符 串 和 对 表达 式 求 值 的 结果 拼接 
起 来 作为 默认 返回 的 字符 串 ， 可 以 这 样 做 : 


























let a = 6; 
Let hb. Ee: 93 
function zipTag(strings, ...expressions) { 


return strings[0] + 
expressions.map((e, i) => ‘S${e}$s{strings[i + 1]}.) 
"JO 


} 


let untaggedResult = ‘Ss{a}r+s$s{b}= Sta+b}.; 
let taggedResult = zipTag sf a}+s${b}= Star+b ) 


5" 
5" 


console.log(untaggedResult); // "6 + 
console.log (taggedResult); // "6 + 


7. 原始 字符 串 
使 用 模板 字面 量 也 可 以 直接 获取 原始 的 模板 字面 量 内容 ( 如 换行 符 或 Unicode 字符 )， 而 不 是 被 转 
换 后 的 字符 表示 。 为 此 ， 可 以 使 用 默认 的 string .raw 标签 函数 : 


// Unicode 示例 

// \u00A9 是 版 权 符 号 

console.1og(`\u00A9 、) ; Le 
console.log(String.raw  \u00A9.); // \u00A9 


SA 
9 















































// 换行 符 示例 

console.log( “first line\nsecond line.); 
// first line 

// second line 


console.log(String.raw first line\nsecond line'); // "first line\nsecond line" 


// 对 实际 的 换行 符 来 说 是 不 行 的 
// 它们 不 会 被 转换 成 转 义 序列 的 形式 


console.log( “first line 
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second line ` ) 
2, iret. Tine 
// second line 


console.log(String.raw first line 
secongd line.); 
/firSt. .LLiNAe 
// second line 


另外 , 也 可 以 通过 标签 函数 的 第 一 个 参数 ， 即 字符 串 数组 的 .raw 属性 取得 


function printRaw(strings) { 
console.log('Actual characters:'); 
fo (CONSe sting Of StFindges:).: 攻 
console.log(string); 


} 











console.log('Escaped characters;'); 
for (const rawString of strings.raw) 
console.log (rawString); 
} 
} 


{ 


printRaw. Au00A9S{ 'and' 
// Actual characters: 
// © 

// (换行 符 ) 

// Escaped characters: 
// \u00A9 

A 


FN 


3.4.7 Symbol 类 型 





每 个 字符 串 的 原始 内 容 : 


Symbol (符号 ) 是 ECMAScript 6 新 增 的 数据 类 型 。 符 号 是 原始 值 ， 且 符号 实例 是 唯一 、 不 可 变 的 。 





























保 对 象 属性 使 用 唯一 标识 符 ， 不 会 发 生 
属性 有 点 类 似 ， 但 符号 并 不 是 为 了 提供 私有 


符号 的 用 途 是 型 属性 冲突 的 危险 。 


尽管 听 起 来 跟 私 有 
































三 
三 



































ObjectAPI 提供 了 方法 ， 可 以 更 方便 地 发 现 符号 属性 )。 相 反 , 符号 就 是 用 来 创建 只 
字符 串 形 式 的 对 象 属性 。 


1. 符号 的 基本 用 法 






































属性 的 行为 才 增 加 的 尤其 是 因为 
E 一 记号 ， 进 而 用 作 非 





符号 需要 使 用 Symbol () 函数 初始 化 。 因 为 符号 本 身 是 原始 类 型 ， 所 以 typeof 操作 符 对 符号 返回 


Symbol。 


let sym Symbol (); 
console.log(typeof sym); 


// symbol 





S 


调用 symbol () 国 数 时 ， 也 可 以 传人 一 个 字符 串 参 数 作为 对 符号 的 描述 (description )， 将 来 可 以 通 











过 这 个 字符 串 来 调试 代码 。 但 是 ， 这 个 字符 串 参 数 与 符 导 定义 或 标识 完全 无 关 : 
Symbol () ， 
Symbol () ; 


let 
let 


genericSymbol 
otherGenericSymbol 


let 
let 


Symbol ('foo'); 
Symbol ('foo'); 


fooSymbol 
otherFooSymbol 


console.log(genericSymbol == otherGenericSymbol); // false 
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console.log(fooSymbol == otherFooSymbol); // false 
符号 没有 字面 量 语 法 ， 这 也 是 它们 发 挥 作用 的 关键 。 按 照 规 范 ， 你 只 要 创建 symbo1l () 实例 并 将 其 
用 作对 象 的 新 属性 ， 就 可 以 保证 它 不 会 覆盖 已 有 的 对 象 属性 ， 无 论 是 符号 属性 还 是 字符 串 属性 。 


let genericSymbol = Symbol (); 








|. 









































console.log(genericSymbol); // Symbol() 
let fooSymbol = Symbol('foo'); 
console.log (fooSymbol); // Symbol (foo); 











最 重要 的 是 ，Symbol () 函数 不 能 与 new 关键 字 一 起 作为 构造 函数 使 用 。 这 样 做 是 为 了 避免 创建 符 
号 包装 对 象 ， 像 使 用 Boolean 、String 或 Number 那样 ， 它 们 都 支持 构造 函数 上 且 可 用 于 初始 化 包含 原 
始 值 的 包装 对 象 : 


let myBoolean = new Boolean(); 
console.log(typeof myBoolean); // "object" 














TK 








let myString = new String(); 
console.log(typeof myString); // "object" 





let myNumber = new Number (); 
console.log(typeof myNumber); // "object" 


let mySymbol = new Symbol(); // TypeError: Symbol is not a constructor 


如 果 你 确实 想 使 用 符号 包装 对 象 ， 可 以 借用 object () 函数 : 


let mySymbol = Symbol ();} 
let myWrappedSymbol = Object (mySymbol); 
console.log(typeof myWrappedSymbol); PObDject” 


2. 使 用 全 局 符号 注册 

i t 享 和 重用 符号 实例 , 那么 可 以 用 一 个 字符 串 作 为 键 , 在 全 局 符号 注册 
表 中 创建 并 重用 符号 。 

为 此 ， 需 要 使 用 Symbol . for () 方 法 : 


let fooGlobalSymbol = Symbol .for('foo'):; 
console.log(typeof fooGlobalSymbol); // symbol 


Symbol . for () 对 每 个 字符 串 键 都 执行 寡 等 操作 。 第 一 次 使 用 某 个 字符 串 调 用 时 ， 它 会 检查 全 局 运 
行 时 注册 表 ， 发 现 不 存在 对 应 的 符号 ， 于 是 就 会 生成 一 个 新 符号 实例 并 添加 到 注册 表 中 。 后 续 使 用 相同 


















































字符 串 的 调用 同样 会 检查 注册 表 ， 发 现存 在 与 该 字符 串 对 应 的 符号 ， 然 后 就 会 返回 该 符号 实例 。 
let fooGlobalSymbol = Symbol.for('foo'); // 创建 新 符号 
let otherFooGlobalSymbol = Symbol.for('foo'); // 重用 已 有 符号 
console.log(fooGlobalSymbol === otherFooGlobalSymbol); // true 
即使 采用 相同 的 符号 描述 ， 在 全 局 注册 表 中 定义 的 符号 跟 使 用 symbol () 定义 的 符号 也 并 不 等 同 : 
let localSymbol = Symbol('foo'); 
let globalSymbol = Symbol.for('foo'); 
console.log(localSymbol === globalSymbol); // false 











全 局 注册 表 中 的 符号 必须 使 用 字符 串 键 来 创建 , 因此 作为 参数 传 给 symbol . for () 的 任何 值 都 会 被 





语 


了 
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转换 为 字 


let emptyGlobalSymbol 
console.log(emptyGlobalSymbol); 


























Symbol.for(); 


符 串 。 此 外 ， 注 册 表 中 使 用 的 键 同 时 也 会 被 用 作 符号 描述 


// Symbol (undefined) 
































还 可 以 使 用 symbol .keyFor () 来 查询 全 局 注册 表 ， 这 个 方法 接收 符号 ， 返回 该 全 局 符号 对 应 的 字 
符 串 键 。 如 果 查 询 的 不 是 全 局 符号 ， 则 返回 undefined。 

// 创 | 建 全 局 符 人 号 

let s = 二 和 iort fod") 

console.log(Symbol .keyFor(s)); // foo 

// 创建 普通 符号 

let s2 = Symbol('bar'); 

console.log(Symbol.keyFor(s2)); // undefined 

如 果 传 给 symbol .keyFor () 的 不 是 符号 ， 则 该 方法 抛 出 TypeError: 

Symbol .keyFor (123); // TypeError: 123 is not a Symbol 

3. 使 用 符号 作为 属性 

凡是 可 以 使 用 字符 串 或 数值 作为 属性 的 地 方 ， 都 可 以 使 用 符号 。 这 就 包括 了 对 象 字面 量 属性 和 
object .qefineProperty()/object.dqefineProperties () 定 义 的 属性 。 对 象 字 面 量 只 能 在 计算 属 

















性 语法 中 使 用 符号 作为 属性 。 


let sl = Symbol('foo')， 

S2 = Symbol('bar'), 

S33 "SYmbol CBaz).; 

Ss4 = Sbol ("ue )s 
let o = { 

[s1] 'foo val' 

有 
// 这 样 也 可 以 : o[s1] = 'foo val'; 
console.1og(o);} 
// {Symbol (foo): foo val} 


FE 





ll 





Object .defineProperty(o, s2, {value: 'bar val'}); 
console.1og(o);} 
// {Symbol (foo): foo val, Symbol (bar): bar val} 
Object .defineProperties(o, { 

[s3]: {value: 'baz val'}, 

[s4]: {value: 'gqux val'} 
})s 
console.1og(o);} 
// {Symbol (foo): foo val, Symbol (bar): bar val, 
// Symbol(baz): baz val, Symbol (qux): qux val} 
类 似 于 object .getownPropertyNames () 返 回 对 象 实例 的 常规 


Symbols() 
会 返 





Descriptors() 


的 键 : 


回 同时 包含 常规 和 符号 属性 描述 





遇 性 数组 ，object .getOwnProperty- 


返回 对 象 实例 的 符号 属性 数组 。 这 两 个 方法 的 返回 值 彼 此 互 斥 .object .getOwnProperty- 
术 符 的 对 象 。Reflect .ownKeys ( 


() 会 返回 两 种 类 型 
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let sl = Symbol('foo')， 
S25 SVmbol tar.}s 
let o = { 
[ST]: fo0 Va. 
[s2] "bar :vals 


baz: 'baz val', 


console.log (Object .getOwnPropertySymbols (o) ) ; 
// [Symbol (foo), Symbol (bar) ] 


console.log (Object .getOwnPropertyNames (0o)); 
// [ba | 





console.log (Object .getOwnPropertyDescriptors (0o)); 
和 








console.1log(Reflect.ownKeys (o) ) ; 
// ["baz", "qux", Symbol (foo), Symbol (bar) ] 











因为 符号 属性 是 对 内 存 中 符号 的 一 个 引用 ,所 以 直接 创建 并 用 作 属 性 的 符号 不 会 丢失 。 但是， 如 果 
































没有 显 式 地 保存 对 这 些 属性 的 引用 ， 那 么 必须 遍历 对 象 的 所 有 符号 属性 才能 找到 相应 的 属性 键 : 


let Oo = { 

[Symbol('foo')]: 'foo val', 
[Symbol('bar')]: 'bar val' 
}3 





console.1o0g(o); 
// {Symbol (foo): "foo val", Symbol (bar): "bar val"} 


let barSymbol = Object.getOwnPropertySymbols (o) 
.find( (symbol) => symbol.toString() .match(/bar/)); 


console.log (barSymbol); 
// Symbol (bar) 


4. 常用 内 置 符号 


ECMAScript 6 也 引入 了 一 批 常用 内 置 符 号 ( well-known symbol )， 用 于 暴露 语言 内 部 行为 ， 开 发 者 
可 以 直接 访问 、 重 写 或 模拟 这 些 行为 。 这 些 内 置 符号 都 以 Symbol 工厂 函数 字符 串 属性 的 形式 存在 。 





这 些 内 置 符号 最 重要 的 用 途 之 一 是 重新 定义 它们 ， 从 而 改变 原生 结构 的 行为 。 比 如 ， 我 人 








门 知道 





for-of 循环 会 在 相关 对 象 上 使 用 Symbol .iterator 属性 ， 那 么 就 可 以 通过 在 自 定义 对 象 上 重新 定义 


Symbol .iterator 的 值 ， 来 改变 for-of 在 迭代 该 对 象 时 的 行为 。 











这 些 内 置 符号 也 没有 什么 特别 之 处 ,它们 就 是 全 局 函数 Symbol 的 普通 字符 串 属性 ,指向 一 个 符号 

















的 实例 。 所 有 内 置 符号 属性 都 是 不 可 写 、 不 可 枚 举 、 不 可 配置 的 。 








注意 在 提 到 ECMAScript 规 范 时 ， 经 常会 引用 符号 在 规范 中 的 名 称 ， 前 缓 为 ee。 比 如 ， 


eeiterator 指 的 就 是 Symbol .iterator。 
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5. Symbol .asyncIterator 

根据 ECMAScript 规范 ,这 个 符号 作为 一 个 属性 表示 “一 个 方法 ,该 方法 返回 对 象 默 认 的 AsyncIterator。 
由 for-await-of 语句 使 用 ”。 换 句 话 说 ， 这 个 符号 表示 实现 异步 迭代 器 API 的 函数 。 

for-await-of 循环 会 利用 这 个 函数 执行 异步 迭代 操作 。 循 环 时 ， 它 们 会 调用 以 Symbol .asyncTterator 
为 键 的 函数 ， 并 期 望 这 个 函数 会 返回 一 个 实现 迭代 器 API 的 对 象 。 很 多 时 候 , 返回 的 对 象 是 实现 该 API 


的 AsyncGenerator: 























class Foo { 
async *[Symbol.asyncIterator] () {} 


了 
let f = new Foo(); 


console.log(f[Symbol.asyncIterator] ()); 
// AsyncGenerator {<suspended>} 


技术 上 ， 这 个 由 symbol.asyncIterator 困 数 生成 的 对 象 应 该 通过 其 next () 方 法 陆续 返回 
Promise 实例 。 可 以 通过 显 式 地 调用 next () 方 法 返回 ， a 


class Emitter { 
constructor (max) { 
this.max = max; 
this.asyncIdx = 0; 
} 






































async *[Symbol.asyncIterator]() { 
while(this.asyncIdx < this.max) { 
yield new Promise( (resolve) => resolve(this.asyncIdx++)); 
} 
} 
} 


async function asyncCount() { 
let emitter = new Emitter(5); 


for await (const x of emitter) { 
console.1log (x); 
} 
} 


asyncCount (); 
// 0 
/7-1 
// 2 
LL 
// 4 


注意 Symbol.asyncIterator 是 ES2018 规范 定义 的 ， 因 此 只 有 版 本 非常 新 的 浏览 器 


支持 它 。 关 于 异步 迭代 和 for-await-of 循环 的 细节 ， 参 见 附录 A。 





6. Symbol .hasInstance 


根据 ECMAScript 规范 ， 这 个 符号 作为 一 个 属性 表示 “一 个 方法 ， 该 方法 决定 一 个 构造 器 对 象 是 否 











三 
如 
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认可 一 个 对 象 是 它 的 实例 。 由 instanceof 操作 符 使 用 "。instanceof 操作 符 可 以 用 来 确定 一 个 对 象 
实例 的 原型 链 上 是 否 有 原型 。instanceof 的 典型 使 用 场景 如 下 : 


function Foo() {} 
let f = new Foo(); 
console.log(f instanceof Foo); // true 



































lass Bar 
let b = new Bar(); 
console.log(b instanceof Bar); // true 


在 ES6 中 ，instanceof 操作 符 会 使 用 symbol .hasInstance 函数 来 确定 关系 。 以 Symbol . 
hasInstance 为 键 的 函数 会 执行 同样 的 操作 ， 只 是 操作 数 对 调 了 一 下 : 
function Foo() {} 


let f = new Foo(); 
console.log(Foo[Symbol.hasInstance] (f)); // true 




















lag Ber. 
let b = new Bar(); 
console.log(Bar[Symbol.hasInstance] (b)); // true 


这 个 属性 定义 在 Function 的 原型 上 ， 因 此 默认 在 所 有 函数 和 类 上 都 可 以 调用 。 由 于 instanceof 
操作 符 会 在 原型 链 上 寻找 这 个 属性 定义 ， 就 跟 在 原型 链 上 寻找 其 他 属性 一 样 ， 因 此 可 以 在 继承 的 类 上 通 
过 静态 方法 重新 定义 这 个 函数 : 


class Bar {} 
class Baz extends Bar { 
static [Symbol.hasInstance]() { 
return false; 
} 
} 





























let b = new Baz(); 


console.log(Bar[Symbol.hasInstance] (b)); // true 
console.log(b instanceof Bar); // true 
console.log(Baz[Symbol.hasInstance] (b)); // false 
console.log(b instanceof Baz); // false 


7. Symbol .isCconcatSpreadable 

根据 ECMAScript 规范 , 这 个 符号 作为 一 个 属性 表示 “一 个 布尔 值 ， 如 果 是 true， 则 意味 着 对 和 象 应 
该 用 Array.prototype.concat () 打 平 其 数组 元 素 ”。ES6 中 的 Array.prototype.concat () 方 法 会 
根据 接收 到 的 对 象 类 型 选择 如 何 将 一 个 类 数组 对 象 拼 接 成 数组 实例 。 覆 盖 Symbol .isconcat- 
Spreadable 的 值 可 以 修改 这 个 行为 。 

数组 对 象 默认 情况 下 会 被 打 平 到 已 有 的 数组 ，false 或 假 值 会 导致 整个 对 象 被 追加 到 数组 末尾。 类 
数组 对 象 默 认 情 况 下 会 被 扎 加 到 数组 末尾 ，true 或 真 值 会 导致 这 个 类 数组 对 象 被 打 平 到 数组 实例 。 其 
他 不 是 类 数组 对 象 的 对 象 在 Symbol .isconcatSpreaqapble 被 设置 为 true 的 情况 下 将 被 忽略 。 


























let initial = ['foo']; 

let array = ['bar']; 

console.log(array [Symbol.isConcatSpreadable]); // undefined 
console.log(initial.concat (array)); FY EGG Bar"] 


array[Symbol.isConcatSpreadable] = false; 
console.log (initial.concat (array)); // ['foo', Array(1)] 
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let arrayLikeObject = { length: 1, 0: 'baz' }; 
console.log(arrayLikeObject [Symbol.isConcatSpreadable]); 
console.log(initial.concat (arrayLikeObject)); 
arrayLikeObject [Symbol .isConcatSpreadable] 


= true; 
console.log(initial.concat (arrayLikeObject)); 








// undefined 
ZA SEO: as 


ZA SEGO. “ag 
let otherObject = new Set().add('gux'); 
console.log(otherObject[Symbol.isConcatSpreadablel]); // undefined 
console.log(initial.concat (otherObject)); // ['foo', Set(1)] 
otherObject [Symbol.isConcatSpreadable] = true; 
console.log(initial.concat (otherObject)); | 


8. Symbol .iterator 
根据 ECMAScript 规范 ， 这 个 符号 作为 一 个 











性 表示 





ol 


“一 个 方法 ， 该 方法 返回 对 象 默 认 的 迭代 器 。 


由 for-of 语句 使 用 ”。 换 句 话 说 ， 这 个 符号 表示 实现 迭代 器 API 的 函数 。 


for-of 循环 这 样 的 语言 结构 会 利用 这 个 函数 执行 达 代 操 作 。 循环 时 , 它们 会 调 














用 以 symbol .iterator 








为 键 的 函数 ， 并 默认 这 个 函数 会 返回 一 个 实现 迭代 带 API 的 对 象 。 很 多 时 候 , 返回 的 对 象 是 实现 该 API 





的 Generator: 


class Foo { 
*[Symbol.iterator] () {} 

3 

Jet f = new Foo(); 


console.log(f[Symbol.iterator] ()); 
// Generator {<suspended>} 


技术 上 ， 这 个 


























1 Symbol .iterator 函数 生成 的 对 象 应 该 通过 其 next () 方 法 陆续 返回 值 。 可 以 通 




















过 显 式 地 调用 next () 方 法 返回 ， 也 可 以 隐 式 地 通过 生成 器 函数 返回 : 


class Emitter { 
constructor (max) { 
this.max = max; 
Ethie LdX = 0 
} 


























* [Symbol .iterator]() { 
while(this.idx < this.max) { 
yield this.idx+t++; 
} 


} 


function count() { 
let emitter = new Emitter(5); 


for (const x of emitter) { 
console.1log (x); 
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Yo 
人 人 -之 
J 
// 4 


注意 ”和 迭代 器 的 相关 内 容 将 在 第 7 章 详细 介绍 。 






9. Symbol .match 

根据 ECMAScript 规范 ， 这 个 符号 作为 一 个 属性 表示 “一 个 正则 表达 式 方 法 ， 该 方法 用 正则 表达 式 
去 匹配 字符 串 。 由 String.prototype.match () 方 法 使 用 "。string.prototype.match () 方 法 会 使 
用 以 Symbol .match 为 键 的 函数 来 对 正则 表达 式 求 值 。 正 则 表达 式 的 原型 上 默认 有 这 个 函数 的 定义 ， 
因此 所 有 正则 表达 式 实例 默认 是 这 个 string 方法 的 有 效 参 数 : 


console.1og(RegExp .prototype [Symbol .match]) ; 
// f [Symbol.match]() { [native code] } 



































console.log('foobar'.match(/bar/)); 
// ["bar", index: 3, input: "foobar", groups: undefined] 


给 这 个 方法 传人 非 正 则 表达 式 值 会 导致 该 值 被 转换 为 RegExp 对 象 。 如 果 想 改变 这 种 行为 ,让 方法 
直接 使 用 参数 ， 则 可 以 重新 定义 Symbol .match 函数 以 取代 默认 对 正则 表达 式 求 值 的 行为 ， 从 而 让 
match () 方 法 使 用 非 正 则 表达 式 实例 。symbol .match 水 数 接收 一 个 参数 ， 就 是 调用 match ( ) 方 法 的 
字符 串 实 例 。 返 回 的 值 没有 限制 : 


class FooMatcher { 
static [Symbol.match] (target) { 
return target.includes('foo'); 
} 
} 














console.log('foobar'.match (FooMatcher)); // true 
console.log('barbaz'.match (FooMatcher)); // false 


class StringMatcher { 
constructor(str) { 
Chis Ss tr 


} 


[Symbol .match] (target) { 
return target.includes(this.str); 
} 
} 


console.log('foobar'.match(new StringMatcher('foo'))); // true 
console.log('barbaz'.match(new StringMatcher('gqux'))); // false 


10. symbol .replace 

根据 ECMAScript 规范 ， 这 个 符号 作为 一 个 属性 表示 “一 个 正则 表达 式 方 法 ， 该 方法 替换 一 个 字符 
串 中 匹配 的 子囊。 由 string.prototype.replace() 方 法 使 用 ”。String.prototype.replace() 
方法 会 使 用 以 symbol .replace 为 键 的 函数 来 对 正则 表达 式 求 值 。 正 则 表达 式 的 原型 上 默认 有 这 个 函 
数 的 定义 ， 因 此 所 有 正则 表达 式 实例 默认 是 这 个 string 方法 的 有 效 参数 : 
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console.1log (RegExp.prototypel[lSymbol.replacel]); 
// f [Symbol.replace]() { [native code] } 


console.log('foobarbaz' .replace(/bar/, 'qgqux')); 

// 'fooquxbaz' 

给 这 个 方法 传人 非 正 则 表达 式 值 会 导致 该 值 被 转换 为 RegExp 对 象 。 如 果 想 改变 这 种 行为 ， 让 方法 
直接 使 用 参数 ， 可 以 重新 定义 Symbol .replace 函数 以 取代 默认 对 正则 表达 式 求 值 的 行为 ， 从 而 让 
replace() 方 法 使 用 非 正 则 表达 式 实例 。symbol .replace 函数 接收 两 个 参数 ， 即 调用 replace() 方 


法 的 字符 串 实例 和 替换 字符 串 。 返 回 的 值 没有 限制 : 


class FooReplacer { 
static [Symbol.replace] (target, replacement) { 
return target.split('foo').join(replacement); 
} 
} 











下 




















console.1log('barfoobaz' .reblace(FEooReplacer， 'gqux')); 
// "barquxbaz" 


Class StringReplacer { 
constructor(str) { 
二 窑 : 守 电 到 “宇和 志和 


} 
[Symbol .replacel] (target, replacement) { 
return target.split(this.str).join(replacement); 


} 
} 


console.log('barfoobaz' .replace(new StringReplacer('foo'), 'qgqux')); 


// "barquxbaz" 


11. symbol .search 

根据 ECMAScript 规范 ， 这 个 符号 作为 一 个 属性 表示 “一 个 正则 表达 式 方法 ， 该 方法 返回 字符 串 中 
匹配 正则 表达 式 的 索引 。 由 String.prototype.search() 方法 使 用 ”。 String.prototype.search() 
方法 会 使 用 以 Symbol . search 为 键 的 函数 来 对 正则 表达 式 求 值 。 正则 表达 式 的 原型 上 默认 有 这 个 函数 
的 定义 ， 因 此 所 有 正则 表达 式 实例 默认 是 这 个 string 方法 的 有 效 参 数 : 


console.log (RegExp.prototypel[lSymbol.search]); 
// f [Symbol.search]() { [native code] } 











三 

















console.log('foobar'.search(/bar/)); 

LZ 3 

给 这 个 方法 传人 非 正 则 表达 式 值 会 导致 该 值 被 转换 为 RegExp 对 象 。 如 果 想 改变 这 种 行为 ， 让 方法 
直接 使 用 参数 ， 可 以 重新 定义 symbol .search 函数 以 取代 默认 对 正则 表达 式 求 值 的 行为 ， 从 而 让 
search() 方 法 使 用 非 正则 表达 式 实例 。symbol . search 函数 接收 一 个 参数 ， 就 是 调用 match ( ) 方 法 
的 字符 串 实 例 。 返 回 的 值 没 有 限制 : 


class FooSearcher { 
static [Symbol.search] (target) { 
return target.indexOf('foo'); 
} 
} 
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console.log('foobar'.search (FooSearcher)); // 0 
console.log('barfoo' .search (FooSearcher)); // 3 
console.log('barbaz'.search (FooSearcher)); // -1 


class StringSearcher { 
constructor(str) { 
te 
} 


[Symbol .search] (target) { 
return target.indexOf (this.str); 
} 





} 


console.log('foobar'.search (new StringSearcher('foo'))); // 0 
console.log('barfoo'.search (new StringSearcher ('foo'))); // 3 
console.log('barbaz'.search (new StringSearcher ('gux'))); // -1 


12. Symbol .species 

根据 ECMAScript 规范 ， 这 个 符号 作为 一 个 属性 表示 “一 个 函数 值 ， 该 函数 作为 创建 派生 对 象 的 构 
造 函 数 ”"。 这 个 属性 在 内 置 类 型 中 最 常用 ， eT 
法 。 用 symbol .species 定义 静态 的 获取 器 ( getter ) 方法 ， 可 以 覆盖 新 创建 实例 的 原型 定 


class Bar extends Array {} 
class Baz extends Array { 
static get [Symbol.species]() { 
return Array; 


} 









































} 


let bar = new Bar(); 

console.log(bar instanceof Array); // true 
console.log(bar instanceof Bar); // true 
bar ss baer concat {har 
console.log(bar instanceof Array); // true 
console.log(bar instanceof Bar); // true 


let baz = new Baz(); 
console.log(baz instanceof Array); // true 
console.log(baz instanceof Baz); // true 
baz = baz Concat (bar 
console.log(baz instanceof Array); // true 
console.log(baz instanceof Baz); // false 














13. Symbol .split 
根据 ECMAScript 规 范 ， 这 个 符号 作为 一 个 属性 表示 “一 个 正则 表达 式 方法 ， 该 方法 在 匹配 正则 表 
达 式 的 索引 位 置 拆 分 字符 串 。 由 String.prototype.split () 方 法 使 用 " 。sString.prototype . 
split ( () 方 法 会 使 用 以 Symbol .split ta 正则 表达 式 的 原型 上 默认 有 
这 个 函数 的 定义 ， 因 此 所 有 正则 表达 式 实 例 默认 是 这 个 string 方法 的 有 效 参数 : 


console.log (RegExp.prototype[lSymbol.split]); 
// f [Symbol.split]() { [native code] } 









































console.log('foobarbaz'.split(/bar/)); 
大 和 证 SG Ta 
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给 这 个 方法 传人 非 正 则 表达 式 值 会 导致 该 值 被 转换 为 RegExp 对 象 。 如 果 想 改变 这 种 行为 ， 让 方法 
直接 使 用 参数 ， 可 以 重新 定义 Symbol .split 函数 以 取代 默认 对 正则 表达 式 求 值 的 行为 , 从 而 让 split () 
方法 使 用 非 正 则 表达 式 实例 。symbol .split 函数 接收 一 个 参数 ， 就 是 调用 matchnh ( ) 方 法 的 字符 串 实 
例 。 返 回 的 值 没 有 限制 : 


class FooSplitter { 
static [Symbol.split] (target) { 
return target.split('foo'); 





















































UD 





KE 





} 
} 


console.log('barfoobaz' .split (FooSplitter)); 
| ae "baz"] 


class StringSplitter { 
constructor(str) { 
起 


} 


[Symbol .split] (target) { 
return target.split(this.str); 
} 
} 


console.log('barfoobaz'.split (new StringSplitter('foo'))); 
7 Las” "baz"] 


14. Symbol .toPrimitive 

根据 ECMAScript 规范 ， 这 个 符 导 作为 一 个 属性 表示 “一 个 方法 ， 该 方法 将 对 象 转换 为 相应 的 原始 
值 。 由 ToPrimitive 抽象 操作 使 用 "。 很 多 内 置 操作 都 会 尝试 强制 将 对 象 转换 为 原始 值 ， 包 括 字 符 串 、 
数值 和 未 指定 的 原始 类 型 。 对 于 一 个 自 定义 对 象 实例 ， 通 过 在 这 个 实例 的 Symbol .toPrimitive 属性 
上 定义 一 个 函数 可 以 改变 默认 行为 。 

根据 提供 给 这 个 函数 的 参数 ( string、number 或 default )， 可 以 控制 返回 的 原始 值 : 


class Foo {} 
Jet foo = new Foo(); 











三 



















































































console.log(3 + foo) // "3[object Object]" 
console.log(3 - foo); // NaN 
console.log(String (foo)); // "[object Object]" 


Class Bar € 
constructor() { 
this[Symbol.toPrimitive] = function(hint) { 
switch (hint) { 
case 'number': 
return 3; 
case 'string': 
return 'string bar'; 
case 'default': 
default: 
return 'default bar'; 


邮 
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let bar = new Bar(); 


console.log(3 + bar); // "3default bar" 
console.1og(3 - bar); £7 0 
ONSole.10g (String (Dar))¥ // "String Bar” 


15. Symbol .toSstringTag 





根据 ECMAScript 规范 ， 这 个 符号 作为 一 个 属性 表示 “一 个 字符 串 ， 该 字符 串 用 于 创建 对 象 的 默认 
字符 串 描 述 。 由 内 置 方法 object .prototype.toString() 使 用 "。 

通过 tostring () 方 法 获取 对 象 标识 时 ， 会 检索 由 symbol .toStringTag 指定 的 实例 标识 符 ， 默 
认为 "object"。 内 置 类 型 已 经 指定 了 这 个 值 ， 但 自 定 义 类 实例 还 需要 明确 定义 : 


let s = new Set(); 























console.1log(s); // Set(0) {} 
Goneole: L109 (SOString())s // [object Set] 
console.log(s[Symbol.toStringTag]); // Set 


class Foo {} 
let foo = new Foo(); 


console.1log (foo); // 
console.1log (foo.toString()); 六 
console.log(foo[Symbol.toStringTag]); // 


class Bar { 
CONstruetor() “f 
this[Symbol.toStringTag]l = 'Bar'; 
} 
} 
let bar = new Bar(); 


console.1log (bar); ey 
console.log(bar.toSstring()); // 
console.log(bar[Symbol.toSstringTag]); // 


16. symbol .unscopables 





ESG {3 
[object Object] 
undefined 


Bar {} 
[object Bar] 
Bar 








根据 ECMAScript 规范， 这 个 符号 作为 一 个 属性 表示 “一 个 对 象 ， 该 对 象 所 有 的 以 及 继承 的 属性 ， 
都 会 从 关联 对 象 的 with 环境 绑 定 中 排除 ”。 设 置 这 个 符号 并 让 其 映射 对 应 属性 的 键 值 为 true， 就 可 以 


阻止 该 属性 出 现在 with 环境 绑 定 中 ， 如 下 例 所 示 : 


let © = { E00 bar™ }3 





with (o) { 
console.log(foo); // bar 
} 


o[lSymbol .unscopables] = { 
foo: true 
}; 


with (o) { 
console.log(foo); // ReferenceError 
} 





本 





注意 不 推荐 使 用 with， 因此 也 不 推荐 使 用 Symbol .unscopables。 





56 第 3 章 语言 基础 





3.4.8 object 类 型 


ECMAScript 中 的 对 象 其 实 就 是 一 组 数据 和 功能 的 集合 。 对 象 通过 new 操作 符 后 跟 对 象 类 型 的 名 称 
来 创建 。 开 发 者 可 以 通过 创建 object 类 型 的 实例 来 创建 自己 的 对 象 ， 然 后 再 给 对 象 添 加 属性 和 方法 : 

let o = new Object (); 

这 个 语法 类 似 Java,， 但 ECMAScript 只 要 求 在 给 构造 函数 提供 参数 时 使 用 括号 。 如 果 没 有 参数 ， 如 
上 面 的 例子 所 示 ， 那 么 完全 可 以 省 略 括 号 (不 推荐 ): 

let o = new Object; // 合法 ， 但 不 推荐 

Object 的 实例 本 身 并 不 是 很 有 用 ， 但 理解 与 它 相 关 的 概念 非常 重要 。 类 似 Java 中 的 java.1ang. 
object，ECMAScript 中 的 object 也 是 派生 其 他 对 象 的 基 类 。object 类 型 的 所 有 属性 和 方法 在 派生 
的 对 象 上 同样 存在 。 

每 个 object 实例 都 有 如 下 属性 和 方法 。 
口 constructor: 用 于 创建 当前 对 象 的 函数 。 在 前 面 的 例子 
口 hasownProperty (propertyName) : 用 于 判断 当前 对 象 实例 (不 是 原型 ) 上 是 和 否 存在 给 定 的 属 
性 。 要 检查 的 属性 名 必须 是 字符 串 ( 如 o.hasownProperty("name") ) 或 符号 。 
口 isPrototypeof (opject): 用 于 判断 当前 对 象 是 否 为 另 一 个 对 象 的 原型 。( 第 8 章 将 详细 介绍 
原型 。) 
口 propertyIsEnumerable (propertyName) : 用 于 判断 给 定 的 属性 是 否 可 以 使 用 ( 本章 稍 后 讨 
论 的 ) for-in 语句 枚 举 。 与 hasOownProperty () 一 样 ， 属 性 名 必须 是 字符 串 。 
口 toLocalestring(): 返回 对 象 的 字符 串 表 示 ， 该 字符 串 反 映 对 象 所 在 的 本 地 化 执行 环境 。 
口 tostring (): 返回 对 象 的 字符 串 表 示 。 
口 valueof () : 返回 对 象 对 应 的 字符 串 、 数 值 或 布尔 值 表 示 。 通 常 与 toString() 的 返回 值 相同 。 
因为 在 ECMAScript 中 object 是 所 有 对 象 的 基 类 ， 所 以 任何 对 象 都 有 这 些 属性 和 方法 。 第 8 章 将 
介绍 对 象 间 的 继承 机 制 。 











































































































让 



































， 这 个 属性 的 值 就 是 object () 


























































































































注意 ”严格 来 讲 ，ECMA-262 中 对 象 的 行为 不 一 定 适合 JavaScript 中 的 其 他 对 象 。 比 如 浏 
览 器 环境 中 的 BOM 和 DOM 对 象 ， 都 是 由 宿主 环境 定义 和 提供 的 宿主 对 象 。 而 宿主 对 象 


不 受 ECMA-262 约束 ， 所 以 它们 可 能 会 也 可 能 不 会 继承 Object。 





3.5 ”操作 符 


ECMA-262 描述 了 一 组 可 用 于 操作 数据 值 的 操作 符 ， 包 括 数学 操作 符 ( 如 加 、 减 )、 位 操作 符 、 关 
系 操作 符 和 相等 操作 符 等 。ECMAScript 中 的 操作 符 是 独特 的 ， 因 为 它们 可 用 于 各 种 值 ， 包 括 字符 串 、 
数值 、 布 尔 值 ， 甚 至 还 有 对 象 。 在 应 用 给 对 象 时 ， 操 作 符 通常 会 调用 valueof () 和 /或 tostring() 方 
法 来 取得 可 以 计算 的 值 。 
3.5.1 一 元 操作 符 

只 操作 一 个 值 的 操作 符 叫 一 元 操作 符 (unary operator )。 一 元 操作 符 是 ECMAScript 中 最 简单 的 操作 符 。 
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1. 递增 /递减 操作 符 























递增 和 递减 操作 符 直接 照搬 自 C 语 言 , 但 有 两 个 版 本 : 前 缀 版 和 后 级 版 。 顾名思义 ， 前 级 版 就 是 位 
于 要 操作 的 变量 前 头 ， 后 绥 版 就 是 位 于 要 操作 的 变量 后 头 。 前 绥 递 增 操作 符 会 给 数值 加 1， 把 两 个 加 号 


(++ ) 放 到 变量 前 头 即 可 : 


let age = 29; 


++age; 
在 这 个 例子 中 , 前缀 递增 操作 符 把 age 的 值 变 成 了 30 ( 给 之 前 的 值 29 加 1)。 因此 , 它 实际 上 等 于 
如 下 表达 式 : 


let age = 29; 
age = age + 1; 


前 缀 递减 操作 符 也 类 似 ， 只 不 过 是 从 一 个 数值 减 1。 使 用 前 级 递减 操作 符 ， 只 要 把 两 个 减 号 (--) 
放 到 变量 前 头 即 可 : 


let age = 29; 
--age; 


执行 操作 后 ， 变 量 age 的 值 变 成 了 28 (从 29 减 1)。 
无 论 使 用 前 缀 递增 还 是 前 级 递减 操作 符 , 变量 的 值 都 会 在 语句 被 求 值 之 前 改变 。( 在 计算 机 科学 中 ， 
这 通常 被 称 为 具有 副作用 。) 请 看 下 面 的 例子 : 


let age = 29; 


let anotherAge = --age + 2; 
console.1log (age); // 28 
console.log(anotherAge); // 30 


让 











在 这 个 例子 中 ， 变 量 anotherage 以 age 减 1 后 的 值 再 加 2 进行 初始 化 。 因 为 递减 操作 先 发 生 
所 以 age 的 值 先 变 成 28 ， 然 后 再 加 2， 结 果 是 30。 
前 级 递增 和 递减 在 语句 中 的 优先 级 是 相等 的 ， 因 此 会 从 左 到 右 依 次 求 值 。 比 如 : 























let numl = 2; 

let num2 = 20; 

let num3 = --numl + num2; 

let num4 = numl + num2; 

console.log(num3); // 21 

console.log(num4); // 21 

这 里 ，num3 等 于 21 是 因为 numl 先 减 1 之 后 才 加 num2。 变 量 num4 也 是 21， 那 是 因为 加 法 使 用 
的 也 是 递减 后 的 值 。 





递增 和 递减 的 后 缀 版 语法 一 样 (分别 是 ++ 和 -- )， 只 不 过 要 放 在 变量 后 面 。 后 缀 版 与 前 级 版 的 主要 
区 别 在 于 ， 后缀 版 递增 和 递减 在 语句 被 求 值 后 才 发 生 。 在 某 些 情况 下 ， 这 种 差异 没什么 影响 ， 比 如 : 


let age = 29; 
age++; 


把 递增 操作 符 放 到 变量 后 面 不 会 改变 语句 执行 的 结果 ， 因 为 递增 是 唯一 的 操作 。 可 是 , 在 跟 其 他 操 
作 混 合 时 ， 差 异 就 会 变 明显 ， 比 如 : 





let numl = 2; 
Te TmZ es: Os 
let num3 = Dum1-- + num2; 


let num4 numl + num2; 





58 第 3 章 语言 基础 





console.log(num3); // 22 
console.log(num4); // 21 


这 个 例子 跟前 面 的 那个 一 样 ， 只 是 把 前 绥 递 减 改 成 了 后 组 递 
1，num3 和 num4 的 值 都 是 21。 而 在 这 个 例子 中 ，num3 的 值 是 22，num4 的 值 是 21。 这 里 的 不 同 之 处 


























减 ， 区 别 很 明显 。 在 使 用 前 级 版 的 例子 








在 于 ,计算 num3 时 使 用 的 是 numl 的 原始 值 (2 )， 而 计算 num4 时 使 用 的 是 numl 递减 后 的 值 (1 )。 
这 4 个 操作 符 可 以 作用 于 任何 值 ， 意 思 是 不 限于 整数 一 一 字符 串 、 布 尔 值 、 浮 点 值 ， 甚 至 对 象 都 可 























以 。 递 增 和 递减 操作 符 遵循 如 下 规则 。 
























































口 对 于 字符 串 ， 如 果 是 有 效 的 数值 形式 ， 则 转换 为 数值 再 应 用 改变 。 变 量 类 型 从 字符 串 变 成 数值 。 














口 对 于 字符 串 ， 如 果 不 是 有 效 的 数值 形式 ， 则 将 变量 的 值 设 置 为 NaN 。 变 量 类 型 从 字符 串 变 成 




















数值 。 

















口 对 于 布尔 值 ， 如 果 是 false， 则 转换 为 0 再 应 用 改变 。 变 量 类 型 从 布尔 值 变 成 数值 。 
口 对 于 布尔 值 ， 如 果 是 true， 则 转换 为 1 再 应 用 改变 。 变 量 类 型 从 布尔 值 变 成 数值 。 








口 对 于 浮 点 值 ， 加 1 或 减 1。 












































口 如 果 是 对 象 ， 则 调用 其 〈 第 5 章 会 详细 介绍 的 ) valueof () 方 法 取得 可 以 操作 的 值 。 对 得 到 的 








值 应 用 上 述 规则 。 如 果 是 NaN, 则 调用 tostring () 并 再 次 应 用 其 他 规则 。 变 量 类 型 从 对 象 变 成 














数值 。 
下 面 的 例子 演示 了 这 些 规 则 : 
et .2 
18t. 82 E72 


let oO = 
valueof() { 
return -1; 


sl++; // 值 变 成 数值 3 

Ss2++; // 值 变 成 NaN 

区 二 // 值 变 成 数值 1 

£--; // 值 变 成 0.10000000000000009 (因为 浮 点 数 不 精 确 ) 
o--; ”// 值 变 成 -2 


2. 一 元 加 和 减 


一 元 加 和 减 操作 符 对 大 多 数 开发 者 来 说 并 不 陌生 ， 它 们 在 ECMAScript 中 跟 在 高 中 数学 中 的 用 途 一 
样 。 一 元 加 由 一 个 加 号 (+ ) 表示 ， 放 在 变量 前 头 ， 对 数值 没有 任何 影响 : 





Jet num = 25; 
num = +num; 
console.log(num); // 25 











如 果 将 一 元 加 应 用 到 非 数值 ， 则 会 执行 与 使 用 Number () 转型 函数 一 样 的 类 型 转换 : 布尔 值 false 











和 true 转换 为 0 和 1 ,字符 串 根 据 特殊 规则 进行 解析 ,对 象 会 调 
方法 以 得 到 可 以 转换 的 值 。 
下 面 的 例子 演示 了 一 元 加 在 应 用 到 不 同 数据 类 型 时 的 行为 : 


lJet sl 
let S2 


























OL™; 
ws Tw 











用 它们 的 valueof () 和 /或 tostring () 
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Tet 3 到 
let b = false; 
Let fs3 Tl 
let Oo = { 


ValueoOf () { 
return -1; 


} 




















sl = +S1; // 值 变 成 数值 1 

Ss2 = +S2; // 值 变 成 数值 1 .1 

s3 = +S3; // 值 变 成 NaN 

b = +b; // 值 变 成 数值 0 

下 3 二 下 // 不 变 , 还 是 1.1 

Oo = +0; // 值 变 成 数值 -1 

元 减 由 一 个 减 号 ( - ) 表示 ， 放 在 变量 前 头 ， 主 要 用 于 把 数值 变 成 负 值 ， 如 把 1 转换 为 1。 示例 

如 下 : 

let num = 25; 

num = -num; 

console.log(num); // -25 





对 数值 使 用 一 元 减 会 将 其 变 成 相应 的 负 值 (如 上 面 的 例子 所 示 )。 在 应 用 到 非 数 值 时 ， 一 元 减 会 遵 


循 与 一 元 加 同样 的 规则 ， 先 对 它们 进行 转换 ， 然 后 再 取 负 值 : 





let 81 SS 1 
eb 2 
et S38 = "2Z" 
let b = false; 
Tet "Ef S13 
let o = { 


valueOof() { 
return -1; 


sl = -sl; // 值 变 成 数值 -1 
s2 = -s2 // 值 变 成 数值 -1 .1 
Ss3 = -Ss3; // 值 变 成 NaN 

b = -b; // 值 变 成 数值 0 


变 成 -1.1 


Hh 
Li 
上 
二 
pi 
a 


























3.5.2 ”位 操作 符 














一 元 加 和 减 操作 符 主要 用 于 基本 的 算术 ,但 也 可 以 像 上 面 的 例子 那样 ， 用 于 数据 类 型 转换 。 


接 下 来 要 介绍 的 操作 符 用 于 数值 的 底层 操作 , 也 就 是 操作 内 存 中 表示 数据 的 比特 ( 位 ), ECMAScript 
中 的 所 有 数值 都 以 IEEE 754 64 位 格式 存储 ， 但 位 操作 并 不 直接 应 用 到 64 位 表示 ， 而 是 先 把 值 转换 为 
32 位 整数 ， 再 进行 位 操作 ， 之 后 再 把 结果 转换 为 64 位 。 对 开发 者 而 言 ， 就 好 像 只 有 32 位 整数 一 样 ， 


























为 64 位 整数 存储 格式 是 不 可 见 的 。 既 然 知 道 了 这 些 ， 就 只 需要 考虑 32 位 整数 即 可 。 





有 符号 整数 使 用 32 位 的 前 31 位 表示 整数 值 。 第 32 位 表示 数值 的 符号 ， 如 0 表示 正 ，! 表示 负 。 这 
一 位 称 为 符号 位 (sign bit )， 它 的 值 决定 了 数值 其 余部 分 的 格式 。 正 值 以 真正 的 二 进 制 格 式 存储 ， 即 31 





位 中 的 每 一 位 都 代表 2 的 短 。 第 一 位 ( 称 为 第 0 位 ) 表示 2”, 第 二 位 表示 2 ， 依 此 类 推 。 如 玉 





一 个 位 是 
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空 的 , 则 以 0 填充 ,相当 于 忽略 不 计 。 比 如 ,数值 18 的 二 进 制 格式 为 00000000000000000000000000010010， 
或 更 精简 的 10010。 后 者 是 用 到 的 5 个 有 效 位 ， 决 定 了 实际 的 值 ( 如 图 3-1 所 示 )。 


11010,1|10 


2XD)+2 0 + 0 +2 1) + x0) 

















16 + 0 十 0 十 2 十 0 
18 
图 3-1 


负 值 以 一 种 称 为 二 补 数 (或 补 码 ) 的 二 进 制 编码 存储 。 一 个 数值 的 二 补 数 通 过 如 下 3 个 步骤 计算 
得 到 : 

(1) 确定 绝对 值 的 二 进 制 表示 (如 ， 对 于 -18， 先 确定 18 的 二 进 制 表示 ); 

(2) 找到 数值 的 一 补 数 ( 或 反 人 码 )， 换 名 话说， 就 是 每 个 0 都 变 成 1， 每 个 1 都 变 成 0; 

(3) 给 结果 加 1。 

基于 上 述 步 又 确定 -18 的 二 进 制 表示 ， 首 先 从 18 的 二 进 制 表示 开始 : 

0000 0000 0000 0000 0000 0000 0001 0010 




























































































然后 ， 计 算 一 补 数 ， 即 反 转 每 一 位 的 二 进 制 值 : 

生计 于 二 .于 于 于 于 

最 后 ， 给 一 补 数 加 1: 

和 二 二 :下 于 直下 和 本 站。 十 本 二 汪汪 二 二 = 二 和 村 中“ 下 于 本 二 本 

本 

和 二 了 二 “开征 二。 证 于 于 “证 各 证 汪 ， 证 汪 半 二 于 于 下 “这 计 二村 | 

那么 ，-18 的 二 进 制 表示 就 是 11111111111111111111111111101110。 要 注意 的 是 ,在 处 理 有 符号 整数 
时 ， 我 们 无 法 访问 第 31 位。 














ECMAScript 会 帮 有 我 们 记录 这 些 信息 。 在 把 负 值 输出 为 一 个 二 进 制 字符 串 时 ， 我 们 会 得 到 一 个 前 面 
加 了 减 号 的 绝对 值 ， 如 下 所 示 : 


let num = -18; 
console.log(num.toString(2)); // "-10010" 


在 将 -18 转换 为 二 进 制 字符 串 时 ， 结 果 得 到 -10010。 转 换 过 程 会 求 得 二 补 数 ， 然 后 再 以 更 符合 逻辑 
的 形式 表示 出 来 。 




















注意 ”默认 情况 下 ，ECMAScript 中 的 所 有 整数 都 表示 为 有 符号 数 。 不 过 ， 确 实 存在 无 符 
号 整数 。 对 无 符号 整数 来 说 ， 第 32 位 不 表示 符号 ， 因 为 只 有 正 值 。 无 符号 整数 比 有 符号 





整数 的 范围 更 大 ， 因 为 符号 位 被 用 来 表示 数值 了 。 





在 对 ECMAScript 中 的 数值 应 用 位 操作 符 时 ， 后 台 会 发 生 转换 : 64 位 数值 会 转换 为 32 位 数值 ， 然 
后 执行 位 操作 ， 最 后 再 把 结果 从 32 位 转换 为 64 位 存储 起 来 。 整 个 过 程 就 像 处 理 32 位 数值 一 样 ， 这 让 
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世上 
到 


二 进 制 操作 变 得 与 其 他 语言 中 类 似 。 但 这 个 转换 也 导致 了 一 个 奇特 的 副作用 , 即 特殊 值 NaN 和 Infinity 
在 位 操作 中 都 会 被 当成 0 处 理 。 

如 果 将 位 操作 符 应 用 到 非 数 值 ， 那 么 首先 会 使 用 Number () 函数 将 该 值 转换 为 数值 ( 这 个 过 程 是 自 
动 的 )， 然后 再 应 用 位 操作 。 最 终结 果 是 数值 。 

1. 按 位 非 

按 位 非 操 作 符 用 波浪 符 ( ~ ) 表示 ， 它 的 作用 是 返回 数值 的 一 补 数 。 按 位 非 是 ECMAScript 
不 多 的 几 个 二 进 制 数学 操作 符 之 一 。 看 下 面 的 例子 : 


let numl = 25; // 二 进 制 00000000000000000000000000011001 
let num2 = ~numl; // 二 进 制 11111111111111111111111111100110 
console.log(num2); // -26 


这 里 ， 按 位 非 操 作 符 作用 到 了 数值 25， 得 到 的 结果 是 -26。 由 此 可 以 看 出 ， 按 位 非 的 最 终 效果 是 对 
数值 取 反 并 减 1， 就 像 执行 如 下 操作 的 结果 一 样 : 





















































水 






















































































let numl = 25; 
let num2 = -numl - 1; 
console.1log (num2);} // "-26" 








实际 上 ,尽管 两 者 返回 的 结果 一 样 , 但 位 操作 的 速度 快 得 多 。 这 是 因为 位 操作 是 在 数值 的 底层 表示 
上 完成 的 。 

2. 按 位 与 

按 位 与 操作 符 用 和 号 (& ) 表示 ， 有 两 个 操作 数 。 本 质 上 ， 按 位 与 就 是 将 两 个 数 的 每 一 个 位 对 齐 ， 
然后 基于 真 值 表 中 的 规则 ， 对 每 一 位 执行 相应 的 与 操作 。 


第 一 个 数值 的 位 第 二 个 数值 的 位 结 果 
1 1 



































SS SO 


1 0 
0 1 
0 0 














按 位 与 操作 在 两 个 位 都 是 1 时 返回 1， 在 任何 一 位 是 0 时 返回 0。 
下 面 看 一 个 例子 ， 我 们 对 数值 25 和 3 求 与 操作 ， 如 下 所 示 : 


let result = 25 & 3; 
console.log(result); // 1 


25 和 3 的 按 位 与 操作 的 结果 是 1。 为 什么 呢 ? 看 下 面 的 二 进 制 计算 过 程 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


AND = 0000 0000 0000 0000 0000 0000 0000 0001 
如 上 所 示 ，25 和 3 的 二 进 制 表示 中 ， 只 有 第 0 位 上 的 两 个 数 都 是 1。 于 是 结果 数值 的 所 有 其 他 位 都 
会 以 0 填充 ， 因 此 结果 就 是 1。 


3. 按 位 或 
按 位 或 操作 符 用 管道 符 ( | ) 表示 ， 同 样 有 两 个 操作 数 。 按 位 或 遵循 如 下 真 值 表 : 
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第 一 个 数值 的 位 第 二 个 数值 的 位 结 果 
1 1 1 
1 0 1 
0 1 1 
0 0 0 


按 位 或 操作 在 至 少 一 位 是 1 时 返回 1， 两 位 都 是 0 时 返回 0。 
仍然 用 按 位 与 的 示例 ， 如 果 对 25 和 3 执行 按 位 或 ， 代 码 如 下 所 示 : 
let result = 25 | 3; 

console.log(result); // 27 

可 见 25 和 3 的 按 位 或 操作 的 结果 是 27: 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 


OR = 0000 0000 0000 0000 0000 0000 0001 1011 

在 参与 计算 的 两 个 数 中 ， 有 4 位 都 是 1， 因此 它们 直接 对 应 到 结果 上 上。 二进制 码 11011 等 于 27。 
4. 按 位 异 或 
按 位 异 或 用 脱 字符 〈^ ) 表示 ， 同 样 有 两 个 操作 数 。 下 面 是 按 位 异 或 的 真 值 表 : 













































































第 一 个 数 的 位 第 二 个 数 的 位 结 果 
1 1 0 
1 0 1 
0 1 1 
0 0 0 














按 位 异 或 与 按 位 或 的 区 别 是 ， 它 只 在 一 位 上 是 1 的 时 候 返 回 1 ( 两 位 都 是 1 或 0， 则 返回 0 )。 
对 数值 25 和 3 执行 按 位 异 或 操作 : 


let result = 25 ^ 3; 
console.log(result); // 26 


可 见 ，25 和 3 的 按 位 异 或 操作 结果 为 26， 如 下 所 示 : 


0000 0000 0000 0000 0000 0000 0001 1001 
0000 0000 0000 0000 0000 0000 0000 0011 











XOR = 0000 0000 0000 0000 0000 0000 0001 1010 

两 个 数 在 4 位 上 都 是 1, 但 两 个 数 的 第 0 位 都 是 1， 因 此 那 一 位 在 结果 中 就 变 成 了 0。 其 余 位 上 的 1 
在 另 一 个 数 上 没有 对 应 的 1， 因 此 会 直接 传递 到 结果 中 。 二 进 制 码 11010 等 于 26。( 注意 ， 这 比 对 同样 
两 个 值 执行 按 位 或 操作 得 到 的 结果 小 1。) 

5. 左 移 

左 移 操 作 符 用 两 个 小 于 号 ( << ) 表示 ,会 按照 指定 的 位 数 将 数值 的 所 有 位 向 左 移动 。 比 如 ， 如 果 数 
值 2 (二 进 制 10 ) 向 左 移 5 位， 就 会 得 到 64 ( 二进制 1000000 )， 如 下 所 示 


2; // 等 于 二 进 制 10 
oldvalue << 5; // 等 于 二 进 制 1000000， 即 十 进 制 64 

































































Jet oldValue 
lJet newValue 


3.5 ”操作 符 03 








注意 在 移 位 后 ， 数 值 右 端 会 空 出 5 位 。 左 移 会 以 0 填充 这 些 空位 ， 让 结果 是 完整 的 32 位 数值 ( 见 
图 3-2 )。 


“秘密 的 ”符号 位 数值 2 


1ololololofololololofolololololololololololololo lololololo lo dilol 


数值 2 左 移 5 位 (数值 64) Se 












空位 补 0 





图 3-2 


注意 ， 左 移 会 保留 它 所 操作 数值 的 符号 。 比 如 ， 如 果 -2 左 移 5 位 ， 将 得 到 -64， 而 不 是 正 64。 
6. 有 符号 右 移 


有 符号 右 移 由 两 个 大 于 号 ( >> ) 表示 ， 会 将 数值 的 所 有 32 位 都 向 右 移 ， 同 时 保留 符号 〈 正 或 负 ) 
有 符号 右 移 实 际 上 是 左 移 的 逆 运 算 。 比 如 ， 如 果 将 64 右 移 5 位 ， 那 就 是 2: 


let olqvalue = 64; // 等 于 二 进 制 1000000 
let newValue = oldValue >> 5; // 等 于 二 进 制 10， 即 十 进 制 2 


同样 ， 移 位 后 就 会 出 现 空位 。 不 过 ， 右 移 后 空位 会 出 现在 左 侧 ， 且 在 符号 位 之 后 ( 见 图 3-3 )。 
ECMAScript 会 用 符号 位 的 值 来 填充 这 些 空 位 ， 以 得 到 完整 的 数值 。 


“秘密 的 ”符号 位 数值 64 















































数值 64 右 移 5 位 (数值 2) 





空位 补 0 





7. 无 符号 右 移 
无 符号 右 移 用 3 个 大 于 号 表示 〈 >>> )， 会 将 数值 的 所 有 32 位 都 向 右 移 。 对 于 正 数 ， 无 符号 右 移 与 
有 符号 右 移 结果 相同 。 仍 然 以 前 面 有 符号 右 移 的 例子 为 例 ，64 向 右 移动 5 位 ， 会 变 成 2: 


let oldValue = 64; // 等 于 二 进 制 1000000 
let newValue = oldValue >>> 5; // 等 于 二 进 制 10， 即 十 进 制 2 


对 于 负数 ， 有 时 候 差异 会 非常 大 。 与 有 符号 右 移 不 同 ， i 位 补 0， 而 不 管 符号 位 是 
什么 。 对 正 数 来 说 ， 这 跟 有 符号 右 移 效果 相同 。 但 对 负数 来 说 ， 结 果 就 差 太 多 了 。 无 符号 右 移 操 作 符 将 
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负数 的 二 进 制 表 示 当 成 正 数 的 二 进 制 表示 来 处 至 





得 非常 之 大 ， 如 下 夯 


let oldValue 
Jet newValue 








i 的 例子 所 示 : 





= -64; 
= oldValue >>> 


在 对 -64 无 符号 右 移 5 位 后 , 结 


1111111000000， 无 符号 右 移 却 将 它 当 


























Ha 


。 因 为 负数 是 其 绝对 值 的 二 补 数 ， 所 以 右 移 之 后 结果 变 








x 


// 等 于 二 进 制 11111111111111111111111111000000 
5 // 等 于 十 进 制 134217726 





是 134217 726。 这 是 因为 -64 的 二 进 制 表示 是 1111111111111111111 








成 正 值 ， 也 就 是 4 294 967 232。 把 这 个 值 右 移 5 位 后 ， 结 果 是 


00000111111111111111111111111110， 即 134 217 726。 


3.5.3 布尔 操作 符 


对 于 编程 语言 来 说 ,布尔 操作 符 跟 相等 操作 符 几 乎 同样 重要 。 如 果 没 有 能 力 测试 两 个 值 的 关系 , 那 
么 像 if-else 和 循环 这 样 的 语句 也 没什么 用 了 。 布 尔 操作 符 一 共有 3 个 : 逻辑 非 、 逻 辑 与 和 逻辑 或 。 


1. 逻辑 非 


逻辑 非 操作 符 




















尔 值 ， 无论 应 用 到 的 是 什么 数据 类 型 
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一 个 叹 号 (! ) 表示 ， 可 应 用 给 ECMAScript 中 的 任何 值 。 这 个 操作 符 始终 返回 布 
。 人 逻辑 非 操 作 符 首先 将 操作 数 转 换 为 布尔 值 ， 然 后 再 对 其 取 反 。 换 




















句 话说 ， 逮 辑 非 操作 符 会 遵循 如 下 规则 。 

















= 


口 如 果 操 作 数 是 空 字 4 
口 如 果 操 作 数 是 非 空 字符 串 ， 则 返回 false。 
口 如 果 操 作 数 是 数值 0， 则 返回 true。 

口 如 果 操 作 数 是 非 0 数值 ( 
口 如 果 操 作 数 是 aul1， 则 返回 true。 
口 如 果 操 作 数 是 NaN， 则 返 
口 如 果 操 作 数 是 undefined， 则 返回 true。 








以 下 示例 验证 了 上 述 行为 : 


口 如 果 操 作 数 是 对 象 ， 则 返回 false。 
符 串 ， 则 返回 trueo 


包括 Infinity )， 则 返回 false。 


回 true。 


console.log(!false); // true 
console.log(!"blue"); // false 
console.log(!0); // true 
console.1log(!NaN); // true 
console.log(!""); // true 
console.log(!12345); // false 





























逻辑 非 操 作 符 也 可 以 用 于 把 任意 值 转换 为 布尔 值 。 同 时 使 用 两 个 叹 号 ( !! )， 相 当 于 调用 了 转型 函 


数 Boolean () 


从 而 给 出 变量 真正 对 应 的 布尔 值 





。 无 论 操作 数 是 什么 类 型 ， 第 一 个 叹 号 总 会 返回 布尔 值 。 第 二 个 叹 号 对 该 布尔 值 取 反 ， 
。 结 果 与 对 同一 个 值 使 用 Boolean () 函数 是 一 样 的 : 














console.log(!!"blue"); // true 


console.1log 
console.1log 
console.1log 
console.1log 


2. 逻辑 与 


逻辑 与 操作 符 


lJet result 








1 两 个 和 号 ( && ) 











true && false; 


人 


09 // false 
1INaN) ; // false 
让 // false 
W12345); /7 true 





表示 ， 应 用 到 两 个 值 ， 如 下 所 示 : 
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逻辑 与 操作 符 遵 循 如 下 真 值 表 : 





第 一 个 操作 数 第 二 个 操作 数 结 果 
i true El 
true false false 
false true false 
false false false 























逻辑 与 操作 符 可 用 于 任何 类 型 的 操作 数 ,， 不 限于 布尔 值 。 如 果 有 操作 数 不 是 布尔 值 ， 则 逻辑 与 并 不 
一 定 会 返回 布尔 值 ， 而 是 遵循 如 下 规则 。 
口 如 果 第 一 个 操作 数 是 对 象 ， 则 返回 第 二 个 操作 数 。 
口 如 果 第 二 个 操作 数 是 对 象 ， 则 只 有 第 一 个 操作 数 求 值 为 true 才 会 返回 该 对 象 。 
口 如 果 两 个 操作 数 都 是 对 象 ， 则 返回 第 二 个 操作 数 。 
口 如 果 有 一 个 操作 数 是 aul1， 则 返回 nul1l。 
口 如 果 有 一 个 操作 数 是 NaN， 则 返回 NaN。 
口 如 果 有 一 个 操作 数 是 undefined， 则 返回 ungdefineqd。 

逻辑 与 操作 符 是 一 种 短路 操作 符 ， 意 思 就 是 如 果 第 一 个 操作 数 决定 了 结果 , 那么 永远 不 会 对 第 二 个 
操作 数 求 值 。 对 逮 辑 与 操作 符 来 说 ， 如 果 第 一 个 操作 数 是 false,， 那么 无 论 第 二 个 操作 数 是 什么 值 , 结 
果 也 不 可 能 等 于 true。 看 下 面 的 例子 : 

let .found: = true; 


let result = (found && someUndeclaredVariable); // 这 里 会 出 错 
console.1log (result); // 不 会 执行 这 一 行 


上 面 的 代码 之 所 以 会 出 错 ， 是 因为 someUndeclaredVariable 没有 事先 声明 ， 所 以 当 逻 辑 与 操作 符 
对 它 求 值 时 就 会 报错 。 变 量 fcuna 的 值 是 true， 逻辑 与 操作 符 会 继续 求 值 变量 someUndeclaredVariable。 
但 是 由 于 someUndeclaredVariable 没有 定义 , 不 能 对 它 应 用 逻辑 与 操作 符 ， 因 此 就 报错 了 。 假 如 变 
量 founa 的 值 是 false， 那 么 就 不 会 报错 了 : 


let found = false; 
let result = (found && someUndeclaredVariable); // 不 会 出 错 
console.log (result); // 会 执行 













































































































































































这 里 ，console.1og 会 成 功 执行 。 即 使 变量 someUndeclaredVariable 没有 定义 ， 由 于 第 一 个 
操作 数 是 false, 逻辑 与 操作 符 也 不 会 对 它 求 值 ,因为 此 时 对 gg 右边 的 操作 数 求 值 是 没有 意义 的 。 在 使 
用 逻辑 与 操作 符 时 ， 一 定 别 忘 了 它 的 这 个 短路 的 特性 。 






























































3. 逻辑 或 

人 逻辑 或 操作 符 由 两 个 管道 符 ( | 1 ) 表示 ， 比 如 : 
let result = true || false; 

人 逻辑 或 操作 符 遵循 如 下 真 值 表 : 

第 一 个 操作 数 第 二 个 操作 数 结 果 
true Lr true 
true false true 
false true true 


false false false 
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下 规 




















与 逻辑 与 类 似 ， 如 果 有 一 个 操作 数 不 是 布尔 值 ,那么 逻辑 或 操作 符 也 不 一 定 返回 布尔 值 。 它 遵循 如 
则 。 

口 如 果 第 一 个 操作 数 是 对 象 ， 则 返回 第 一 个 操作 数 。 

口 如 果 第 一 个 操作 数 求 值 为 false， 则 返回 第 二 个 操作 数 。 

口 如 果 两 个 操作 数 都 是 对 象 ， 则 返回 第 一 个 操作 数 。 

口 如 果 两 个 操作 数 都 是 nul1， 则 返回 nul1l。 

口 如 果 两 个 操作 数 都 是 NaN， 则 返回 NaN。 

口 如 果 两 个 操作 数 都 是 undefined， 则 返回 ungdefineqd。 

同样 与 逻辑 与 类 似 ， 逻辑 或 操作 符 也 具有 短路 的 特性 。 只 不 过 对 逻辑 或 而 言 ， 第 一 个 操作 数 求 值 为 
















































































true， 第 二 个 操作 数 就 不 会 再 被 求 值 了 。 看 下 面 的 例子 : 


let found = true; 
let result = (found || someUndeclaredVariable); // 不 会 出 错 
console.log (result); // 会 执行 


跟前 面 的 例子 一 样 ， 变 量 someUndeclaredvVariable 也 没有 定义 。 但 是 ， 因 为 变量 foung 的 值 








为 true， 所 以 逻辑 或 操作 符 不 会 对 变量 someUnaeclaredqvariable 求 值 ， 而 直接 返回 true。 假如 把 
found 的 值 改 为 false， 那 就 会 报错 了 : 




















let found = false; 
let result = (found || someUndeclaredVariable); // 这 里 会 出 错 


console.log(result); // 不 会 执行 这 一 行 

利用 这 个 行为 ， 可 以 避免 给 变量 赋值 nul1l 或 undefined。 比 如 : 
let myObject = preferredObject || backupObject; 

在 这 个 例子 中 ， 变量 myobject 会 被 赋予 两 个 值 中 的 一 个 。 其 中 ，preferredobject 变量 包含 首 















































选 的 值 ，backupobj ect 变量 包含 备用 的 值 。 如 果 preferredobject 不 是 nul1， 则 它 的 值 就 会 赋 给 
myobject; 如 果 preferredobject 是 nul1l， 则 backupobject 的 值 就 会 赋 给 myobject。 这 种 模 
式 在 ECMAScript 代码 中 经 常用 于 变量 赋值 ， 本 书后 面 的 代码 示例 中 也 会 经 常用 到 。 


3.5 















































.4 乘 性 操作 符 
ECMAScript 定 义 了 3 个 乘 性 操作 符 : 乘法 、 除 法 和 取 模 。 这 些 操作 符 跟 它们 在 Java、C 语言 及 Perl 








中 对 应 的 操作 符 作 用 一 样 ,但 在 处 理 非 数值 时 ， 它 们 也 会 包含 一 些 自动 的 类 型 转换 。 如 果 乘 性 操作 符 有 





a 





























不 是 数值 的 操作 数 ， 则 该 操作 数 会 在 后 台 被 使 用 Number () 转型 函数 转换 为 数值 。 这 意味 着 空 字符 串 会 


被 当成 0， 而 布尔 值 true 会 被 当成 1。 


1. 乘法 操作 符 

乘法 操作 符 由 一 个 星 号 ( * ) 表示 ， 可 以 用 于 计算 两 个 数值 的 乘积 。 其 语法 类 似 于 C 语 言 ， 比 如， 

let. tesBult 34 * $6; 

不 过 ,乘法 操作 符 在 处 理 特殊 值 时 也 有 一 些 特殊 的 行为 。 

口 如 果 操 作 数 都 是 数值 ， 则 执行 常规 的 乘法 运算 ， 即 两 个 正 值 相 乘 是 正 值 ， 两 个 负 值 相 乘 也 是 正 
值 ， 正 负 符 号 不 同 的 值 相 乘 得 到 负 值 。 如 果 ECMAScript 不 能 表示 乘积 ， 则 返回 Infinity 或 
-Infinityo 


口 如 果 有 任 一 操作 数 是 NaN， 则 返回 NaN。 




































































3.$ 操作 符 67 














口 如 果 是 Infinity 乘 以 0， 则 返回 NaN。 

口 如 果 是 Infinity 乘 以 非 0 的 有 限 数值 ， 则 根据 第 二 个 操作 数 的 符号 返回 Infinity 或 -Infinity。 
口 如 果 是 Infinity 乘 以 Infinity， 则 返回 Infinity。 

口 如 果 有 不 是 数值 的 操作 数 ， 则 先 在 后 台 用 Number () 将 其 转换 为 数值 ， 然 后 再 应 用 上 述 规则 。 
2. 除法 操作 符 
除法 操作 符 由 一 个 斜 杜 ( / ) 表示 ， 用 于 计算 第 一 个 操作 数 除 以 第 二 个 操作 数 的 商 ， 比 如 : 

let result = 66 / 11; 

跟 乘 法 操作 符 一 样 ， 除 法 操作 符 针 对 特殊 值 也 有 一 些 特殊 的 行为 。 

口 如 果 操 作 数 都 是 数值 ， 则 执行 常规 的 除法 运算 ， 即 两 个 正 值 相 除 是 正 值 ， 两 个 负 值 相 除 也 是 正 
值 ,符号 不 同 的 值 相 除 得 到 负 值 .如 果 ECMAScript 不 能 表示 商 , 则 返回 Infinity 或 -Infinity。 
口 如 果 有 任 一 操作 数 是 NaN， 则 返回 NaN。 

口 如 果 是 Infinity 除 以 Infinity， 则 返回 NaN。 

口 如 果 是 0 除 以 0， 则 返回 NaN。 

口 如 果 是 非 0 的 有 限 值 除 以 0， 则 根据 第 一 个 操作 数 的 符号 返回 Infinity 或 -Infinity。 

口 如 果 是 Infinity 除 以 任何 数值 ， 则 根据 第 二 个 操作 数 的 符号 返回 Infinity 或 -Infinity。 
口 如 果 有 不 是 数值 的 操作 数 , 则 先 在 后 台 用 Number () 函数 将 其 转换 为 数值 ,然后 再 应 用 上 述 规 则 。 
3. 取 模 操作 符 

取 模 (余数 ) 操作 符 由 一 个 百分比 符号 (%) 表示 ， 比 如 : 

let result = 26 % 5; // 等 于 1 

与 其 他 乘 性 操作 符 一 样 ， 取 模 操 作 符 对 特殊 值 也 有 一 些 特殊 的 行为 。 

口 如 果 操 作 数 是 数值 ， 则 执行 常规 除法 运算 ， 返 回 余数 。 

口 如 果 被 除数 是 无 限 值 ， 除 数 是 有 限 值 ， 则 返回 NaN。 

口 如 果 被 除数 是 有 限 值 ， 除 数 是 0， 则 返回 NaN。 
口 如 果 是 Infinity 除 以 Infinity， 则 返回 NaN。 

口 如 果 被 除数 是 有 限 值 ， 除 数 是 无 限 值 ， 则 返回 被 除数 。 

口 如 果 被 除数 是 0， 除 数 不 是 0， 则 返回 0。 

口 如 果 有 不 是 数值 的 操作 数 , 则 先 在 后 台 用 Number () 函数 将 其 转换 为 数值 , 然后 再 应 用 上 述 规则 。 


3.5.5 “指数 操作 符 
ECMAScript 7 新 增 了 指数 操作 符 ，Math .pow () 现在 有 了 自己 的 操作 符 ** ， 结 果 是 一 样 的 : 


console.log(Math.pow(3, 2); ps 
console.1og(3 ** 2); 力 和 9 























































































































































































































































































































console.log(Math.pow(16, 0.5); // 4 
console.log(16** 0.5); // 4 


不 仅 如 此 , 指数 操作 符 也 有 自己 的 指数 赋值 操作 符 **=, 该 操作 符 执行 指数 运算 和 结果 的 赋值 操作 : 
let squared = 3; 

squared **= 2; 

console.log(squared); // 9 











let sqrt = 16; 
Sart re. ahs 
console.log(sqgart); // 4 


3.5.6 ”加 性 操作 符 


加 性 操作 符 ， 即 加 法 和 减法 操作 符 ， 一 般 都 是 编程 语言 中 最 简单 的 操作 符 。 不 过 ,在 ECMAScript 
中 ,这 两 个 操作 符 拥有 一 些 特殊 的 行为 。 与 乘 性 操作 符 类 似 , 加 性 操作 符 在 后 台 会 发 生 不 同 数据 类 型 的 
转换 。 只 不 过 对 这 两 个 操作 符 来 说 ， 转 换 规则 不 是 那么 直观 。 
1. 加 法 操作 符 
加 法 操作 符 ( + ) 用 于 求 两 个 数 的 和 ， 比 如 : 
let result = 1 + 2; 
如 果 两 个 操作 数 都 是 数值 ， 加 法 操作 符 执行 加 法 运算 并 根据 如 下 规则 返回 
口 如 果 有 任 一 操作 数 是 NaN， 则 返回 NaN; 
口 如 果 是 Infinity 加 Infinity， 则 返回 Infinity; 
口 如 果 是 -Infinity 加 -Infinity， 则 返回 -Infinity; 
口 如 果 是 Infinity 加 -Infinity， 则 返回 NaN; 
口 如 果 是 +0 加 +0， 则 返回 +0; 
口 如 果 是 -0 加 +0， 则 返回 +0; 
口 如 果 是 -0 加 -0， 则 返回 -0。 
不 过 ， 如 果 有 一 个 操作 数 是 字符 串 ， 则 要 应 用 如 下 规则 
口 如 果 两 个 操作 数 都 是 字符 串 ， 则 将 第 二 个 字符 串 拼接 到 第 一 个 字符 串 后 面 ; 
口 如 果 只 有 一 个 操作 数 是 字符 串 ， 则 将 男 一 个 操作 数 转换 为 字符 串 ， 再 将 两 个 字符 串 拼接 在 一 起 。 
如 果 有 任 一 操作 数 是 对 象 、 数 值 或 布尔 值 ， 则 调用 它们 的 tostring () 方 法 以 获取 字符 串 ， 然 后 再 
应 用 前 面 的 关于 字符 串 的 规则 。 对 于 undefined 和 null， 则 调用 string() 函数 ， 分 别 获 取 
"undefined" 和 "null"。 
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看 下 面 的 例子 : 

let resultl = 5 + 5; // 两 个 数值 
console.log(result1); // 10 

let result2 = 5 + "5"; // 一 个 数值 和 一 个 字符 串 
console.log(result2); A 





以 上 代码 展示 了 加 法 操作 符 的 两 种 运算 模式 。 正 常情 况 下 ，5 + 5 等 于 10 (数值 )， 如 前 两 行 代码 
所 示 。 但 是 ， 如 果 将 一 个 操作 数 改 为 字符 串 ， 比 如 "5" ， 则 相 加 的 结果 就 变 成 了 "55" (原始 字符 串 值 )， 
因为 第 一 个 操作 数 也 会 被 转换 为 字符 串 。 

ECMAScript 中 最 常 犯 的 一 个 错误 ， 就 是 忽略 加 法 操作 中 涉及 的 数据 类 型 。 比 如 下 面 这 个 例子 : 


Jet numl = 5; 
let num2 = 10; 
let message = "The sum of 5 and 10 is " + numl + num2; 
console.log(message); // "The sum of 5 and 10 is 510" 


这 里 ， 变 量 message 中 保存 的 是 一 个 字符 串 ， 是 执行 两 次 加 法 操作 之 后 的 结果 。 有 人 可 能 会 认为 
最 终 得 到 的 字符 串 是 "The sum of 5 and 10 is 15"。 可 是 ,实际 上 得 到 的 是 "The sum of 5 angd 10 
is 510"。 这 是 因为 每 次 加 法 运算 都 是 独立 完成 的 。 第 一 次 加 法 的 操作 数 是 一 个 字符 串 和 一 个 数值 (5 )， 
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结果 还 是 一 个 字符 串 。 第 二 次 加 法 仍然 是 用 一 个 字符 串 去 加 一 个 数值 ( 10 )， 同样 也 会 得 到 一 个 字符 串 。 
如 果 想 真正 执行 数学 计算 ， 然 后 把 结果 追加 到 字符 串 末尾 ， 只 要 使 用 一 对 括号 即 可 : 

let numl = 5; 

let num2 = 10; 

let message = "The sum of 5 and 10 is "” + (numl + num2); 

console.log(message); // "The sum of 5 and 10 is 15" 

在 此 ,我们 用 括号 把 两 个 数值 变量 括 了 起 来 ,意思 是 让 解释 器 先 执行 两 个 数值 的 加 法 ,然后 再 把 结 














果 追 加 给 字符 串 。 因 此 ， 最 终 得 到 的 字符 串 变 成 了 "mhe sum of 5 anq 10 is 15"。 
2. 减法 操作 符 
减法 操作 符 ( - ) 也 是 使 用 很 频繁 的 一 种 操作 符 ， 比 如 : 
let result = 2 - 1; 
与 加 法 操作 符 一 样 ， 减 法 操作 符 也 有 一 组 规则 用 于 处 理 ECMAScript 中 不 同类 型 之 间 的 转换 。 

口 如 果 两 个 操作 数 都 是 数值 ， 则 执行 数学 减法 运算 并 返回 结果 。 

口 如 果 有 任 一 操作 数 是 NaN， 则 返回 NaN。 

口 如 果 是 Infinity 减 Infinity， 则 返回 NaN。 

口 如 果 是 -Infinity 减 -Infinity， 则 返回 NaN。 

口 如 果 是 Infinity 减 -Infinity， 则 返回 Infinity。 

口 如 果 是 -Infinity 减 Infinity， 则 返回 -Infinity。 

口 如 果 是 +0 减 +0， 则 返回 +0。 

口 如 果 是 +0 减 -0， 则 返回 -0。 

口 如 果 是 -0 减 -0， 则 返回 +0。 

口 如 果 有 任 一 操作 数 是 字符 串 、 布 尔 值 、null 或 unaefinea， 则 先 在 后 台 使 用 Number () 将 其 转 

换 为 数值 ， 然 后 再 根据 前 面 的 规则 执行 数学 运算 。 如 果 转 换 结果 是 NaN， 则 减法 计算 的 结果 
NaN。 

口 如 果 有 任 一 操作 数 是 对 象 ， 则 调用 其 valueof () 方 法 取得 表示 它 的 数值 。 如 果 该 值 是 NaN， 则 
减法 计算 的 结果 是 NaN。 如 果 对 象 没 有 valueof () 方 法 ， 则 调用 其 tostring () 方 法 ， 然 后 再 
将 得 到 的 字符 串 转换 为 数值 。 

以 下 示例 演示 了 上 面 的 规则 : 

5 - true; // true 被 转换 为 1]， 所 以 结果 是 4 
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let result1 





let result2 NaN - 1; // NaN 
let result3 的 :汉学 // 2 
let result4 Se ls // " "被 转换 为 0， 所 以 结果 是 5 


let result5 
let result6 


5 一 "2"; // "2" 被 转换 为 2， 所 以 结果 是 3 
5 - null; // null 被 转换 为 0， 所 以 结果 是 5 





3.5.7 关系 操作 符 
关系 操作 符 执行 比较 两 个 值 的 操作 , 包括 小 于 ( < )、 大 于 ( > )、 小 于 等 于 ( <= ) 和 大 于 等 于 ( >= )， 


用 法 跟 数学 课 上 学 的 一 样 。 这 儿 个 操作 符 都 返回 布尔 值 ， 如 下 所 示 : 
let result1 
let result2 





// true 


5 
= 5< 3; // false 
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与 ECMAScript 中 的 其 他 操作 符 一 样 , 在 将 它们 应 用 到 不 同 数据 类 型 时 也 会 发 生 类 型 转换 和 其 他 行为 。 
口 如 果 操 作 数 都 是 数值 ， 则 执行 数值 比较 。 

口 如 果 操作 数 都 是 字符 串 ， 则 逐个 比较 字符 串 中 对 应 字符 的 编码 。 

口 如 果 有 任 一 操作 数 是 数值 ， 则 将 另 一 个 操作 数 转换 为 数值 ， 执 行 数 值 比较 。 

口 如 果 有 任 一 操作 数 是 对 象 , 则 调用 其 valueof () 方 法 , 取得 结果 后 再 根据 前 面 的 规则 执行 比较 。 
如 果 没 有 valueof () 操作 符 , 则 调用 kostring () 方 法 , 取得 结果 后 再 根据 前 面 的 规则 执行 比较 。 
口 如 果 有 任 一 操作 数 是 布尔 值 ， 则 将 其 转换 为 数值 再 执行 比较 。 

在 使 用 关系 操作 符 比 较 两 个 字符 串 时 , 会 发 生 一 个 有 趣 的 现象 。 很 多 人 认为 小 于 意味 着 “字母 顺序 
靠 前 ”， 而 大 于 意味 着 “字母 顺序 靠 后 ”， 实 际 上 不 是 这 么 回 事 。 对 字符 串 而 言 ， 关 系 操 作 符 会 比较 字符 
串 中 对 应 字符 的 编码 ， 而 这 些 编码 是 数值 。 比 较 完 之 后 ,会 返回 布尔 值 。 问 题 的 关键 在 于 ， 大 写字 母 的 
i 人 码 都 小 于 小 写字 母 的 编码 ， 因 此 以 下 这 种 情况 就 会 发 生 : 

let result = "Brick" < "alphabet"; // true 

在 这 里 ， 字 符 串 "Brick" 被 认为 小 于 字符 串 "alphabet"， 因 为 字母 B 的 编码 是 66， 字 母 a 的 编码 
是 97。 要 得 到 确实 按 字母 顺序 比较 的 结果 ,就 必须 把 两 者 都 转换 为 相同 的 大 小 写 形式 ( 全 大 写 或 全 小 写 )， 
然后 再 比较 : 

let result = "Brick".toLowerCase() < "alphabet".toLowerCase(); // false 

将 两 个 操作 数 都 转换 为 小 写 ， 就 能 保证 按照 字母 表 顺 序 判定 "alphabet "在 "Brick" 前 头 。 

另 一 个 奇怪 的 现象 是 在 比较 两 个 数值 字符 串 的 时 候 ， 比 如 下 面 这 个 例子 : 

Let Tea lt ss S23 RK V3 ELENE 

这 里 在 比较 字符 串 "23" 和 "3" 时 返回 true。 因 为 两 个 操作 数 都 是 字符 串 ， 所 以 会 逐个 比较 它们 的 
字符 编码 (字符 "2" 的 编码 是 S0， 而 字符 "3 "的 编码 是 51 )。 不 过 ， 如 果 有 一 个 操作 数 是 数值 ， 那 么 比 
较 的 结果 就 对 了 : 

let TESult Ee “23 "3 .7 :False 

因为 这 次 会 将 字符 串 "23" 转 换 为 数值 23 ， 然 后 再 跟 3 比较 ,结果 当然 对 了 。 只 要 是 数值 和 字符 串 
比较 ， 字 符 串 就 会 先 被 转换 为 数值 ， 然 后 进行 数值 比较 。 对 于 数值 字符 串 而 言 ， 这 样 能 保证 结果 正确 。 
但 如 果 字 符 串 不 能 转换 成 数值 呢 ? 比如 下 面 这 个 例子 : 

let result = "a" < 3; // 因为 "a" 会 转换 为 NaN， 所 以 结果 是 false 

因为 字符 "a" 不 能 转换 成 任何 有 意义 的 数值 ， 所 以 只 能 转换 为 NaN。 这 里 有 一 个 规则 ， 即 任何 关系 
操作 符 在 涉及 比较 NaN 时 都 返回 false。 这 样 一 来 ， 下 面 的 例子 有 趣 了 : 


Jet resultl = NaN < 3; // false 
let result2 = NaN >= 3; // false 


在 大 多 数 比较 的 场景 中 ， 如 果 一 个 值 不 小 于 为 一 个 值 ， 那 就 一 定 大 于 或 等 于 它 。 但 在 比较 NaN 时 ， 
无 论 是 小 于 还 是 大 于 等 于 ， 比 较 的 结果 都 会 返回 false。 


3.5.8 ”相等 操作 符 


判断 两 个 变量 是 否 相等 是 编程 中 最 重要 的 操作 之 一 。 在 比较 字符 串 、 数 值 和 布尔 值 是 否 相等 时 ， 过 
程 都 很 直观 。 但 是 在 比较 两 个 对 象 是 否 相等 时 ， 情 形 就 比较 复杂 了 。ECMAScript 中 的 相等 和 不 相等 操 
作 符 , 原本 在 比较 之 前 会 执行 类 型 转换 , 但 很 快 就 有 人 质疑 这 种 转换 是 否 应 该 发 生 。 最 终 , ECMAScript 
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提供 了 两 组 操作 符 。 第 一 组 是 等 于 和 不 等 于 ， 它 们 在 比较 之 前 执行 转换 。 第 二 组 是 全 等 和 不 全 等 ,它们 

在 比较 之 前 不 执行 转换 。 
1. 等 于 和 不 等 于 

中 的 等 于 操作 符 用 两 个 等 于 号 ( == ) 表示 ， 如 果 操 作 数 相等 ， 则 会 返回 true。 不 等 于 


ECMAScript 


操作 符 用 叹 号 和 等 于 号 ( != ) 表示 ， 如 果 两 个 操作 数 不 相 等 ， 则 会 返回 true。 这 两 个 操作 符 都 会 先进 
行 类 型 转换 ( 通常 称 为 强制 类 型 转换 ) 再 确定 操作 数 是 否 相 等 。 

在 转换 操作 数 的 类 型 时 ， 相 等 和 不 相等 操作 符 遵循 如 下 规则 。 和 | 
口 如 果 任 一 操作 数 是 布尔 值 ， 则 将 其 转换 为 数值 再 比较 是 否 相 等 。false 转换 为 0，true 转换 








为 1。 


相等 。 























口 如 果 一 个 操作 
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数 是 字符 串 ， 男 一 个 操作 数 是 数值 ， 则 尝试 将 字符 串 转 换 为 数值 ， 再 比较 是 否 














口 如 果 一 个 操作 数 是 对 象 ， 男 一 个 操作 数 不 是 ， 则 调用 对 象 的 valueof () 方 法 取得 其 原始 值 ， 再 


根据 前 面 的 规则 进行 比较 。 
在 进行 比较 时 ， 这 两 个 操作 符 会 遵循 如 下 规则 。 












































口 null 和 undefined 相等 。 

口 null 和 undefined 不 能 转换 为 其 他 类 型 的 值 再 进行 比较 。 
口 如 果 有 任 一 操作 数 是 NaN， 则 相等 操作 符 返 回 false， 不 相等 操作 符 返 回 true。 记 住 ， 即使 两 
个 操作 数 都 是 NaN， 


口 如 果 两 个 操作 数 都 是 对 象 ， 则 比较 它们 是 不 是 同一 个 对 象 。 如 果 两 个 操作 数 都 指向 同一 个 对 象 ， 





相等 操作 符 也 返回 false， 因 为 按照 规则 ，NaN 不 等 于 NaN。 

















则 相等 操作 符 返 回 true。 否 则 ， 两 者 不 相等 。 
下 表 总 结 了 一 些 特殊 情况 及 比较 的 结果 。 

表 达 式 结 果 
null == undefined true 
"NaN" == NaN false 
5 == NaN false 
NaN == NaN false 
NaN != NaN true 
false == 0 true 
true == 1 true 
true == 2 false 
undefined == 0 false 
null == 0 false 
和 true 


2. 全 等 和 不 全 等 





全 等 和 不 全 等 操作 符 与 相等 和 不 相等 操作 符 类 似 , 只 不 过 它们 在 比较 相等 时 不 转换 操作 数 。 全 等 操 








作 符 由 3 个 等 于 号 (=== ) 表示 ， 只 有 两 个 操作 数 在 不 转换 的 前 提 下 相等 才 返回 true， 比 如 : 


let result1 
let result2 


("55" 
("55" 


5 5) // true， 转 换 后 相等 
=== 55); // false， 不 相等 ， 因 为 数据 类 型 不 同 





在 这 个 例子 中 ， 第 一 个 比较 使 用 相等 操作 符 ， 比 较 的 是 字符 串 "55" 和 数值 55。 如 前 所 述 ， 因 为 字 
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符 串 "55" 会 被 转换 为 数值 55， 然 后 再 与 数值 55 进行 比较 ， 所 以 返回 true。 第 二 个 比较 使 用 全 等 操作 
符 ， 因 为 没有 转换 ， 字 符 串 和 数值 当然 不 能 相等 ， 所 以 返回 false。 
不 全 等 操作 符 用 一 个 叹 号 和 两 个 等 于 号 ( !== ) 表示 ， 只 有 两 个 操作 数 在 不 转换 的 前 提 下 不 相等 才 

















返回 true。 比 如 : 
let resultl = ("55" != 55); // false, 转换 后 相等 
let result2 = ("55"” !== 55); // true, 不 相等 ， 因 为 数据 类 型 不 同 














这 一 次 , 第 一 个 比较 使 用 不 相等 操作 符 , 它 会 把 字符 串 "55" 转 换 为 数值 55， 跟 第 二 个 操作 数 相 等 。 
既然 转换 后 两 个 值 相等 ， 那 就 返回 false。 第 二 个 比较 使 用 不 全 等 操作 符 。 这 时 候 可 以 这 么 问 :“ 字 符 
串 55 和 数值 55 有 区 别 吗 ? ”答案 是 “有 ”(true )。 

另外 ， 虽 然 null == undefined 是 true (因为 这 两 个 值 类 似 ), 但 null === undefined 是 
false， 因 为 它们 不 是 相同 的 数据 类 型 。 




















注意 ”由 于 相等 和 不 相等 操作 符 存在 类 型 转换 问题 ， 因 此 推荐 使 用 全 等 和 不 全 等 操作 符 。 


这 样 有 助 于 在 代码 中 保持 数据 类 型 的 完整 性 。 





3.5.9 条 件 操作 符 
条 件 操作 符 是 ECMAScript 中 用 途 最 为 广泛 的 操作 符 之 一 ， 语 法 跟 Java 中 一 样 : 





variable = boolean expression ? true value : false value; 
上 面 的 代码 执行 了 条 件 赋值 操作 ， 即 根据 条 件 表达 式 boolean_expression 的 值 决定 将 哪个 值 赋 








给 变量 variable 。 如 果 boolean expression 是 true ， 则 赋值 true_value ; 如 果 








boolean_expression 是 false， 则 赋值 false_value。 比 如 : 

let max = (numl > num2) ? numl : num2; 

在 这 个 例子 中 ，max 将 被 赋予 一 个 最 大 值 。 这 个 表达 式 的 意思 是 ， 如 果 numl 大 于 num2 (条 件 表 
达 式 为 true )， 则 将 numl 赋 给 max。 否 则 ， 将 num2 赋 给 max。 


3.5.10 ”赋值 操作 符 
简单 赋值 用 等 于 号 (= ) 表示 ， 将 右手 边 的 值 赋 给 左手 边 的 变量 ， 如 下 所 示 : 


let num = 10; 
复合 赋值 使 用 乘 性 、 加 性 或 位 操作 符 后 跟 等 于 号 ( = ) 表示 。 这 些 赋值 操作 符 是 类 似 如 下 常见 赋值 
操作 的 简写 形式 : 


let num = 10; 
num = num + 10; 


以 上 代码 的 第 二 行 可 以 通过 复合 赋值 来 完成 : 


let num = 10; 
num += 10; 


每 个 数学 操作 符 以 及 其 他 一 些 操作 符 都 有 对 应 的 复合 赋值 操作 符 : 
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口 乘 后 赋值 ( *= ) 
口 除 后 赋值 ( /= ) 
口 取 模 后 赋值 ( $= ) 
口 加 后 赋值 (+= ) 
口 减 后 赋值 ( -= 
口 左 移 后 赋值 ( <<=) 
口 右 移 后 赋值 (>>= ) 
口 无 符号 右 移 后 赋值 (>>>= ) 
这 些 操作 符 仅 仅 是 简写 语法 ， 使 用 它们 不 会 提升 性 能 。 
3.5.11 ”逗号 操作 符 
逗号 操作 符 可 以 用 来 在 一 条 语句 中 执行 多 个 操作 ， 如 下 所 示 : 
jet :MUL we Li Nm 2 UNS 
在 一 条 语句 中 同时 声明 多 个 变量 是 逗号 操作 符 最 常用 的 场景 。 不 过 , 也 可 以 使 用 逗号 操作 符 来 辅助 
赋值 。 在 赋值 时 使 用 逗号 操作 符 分 隔 值 ， 最 终 会 返回 表达 式 中 最 后 一 个 值 : 
let num = (5，1，4，8，0); // num 的 值 为 0 


在 这 个 例子 中 ，num 将 被 赋值 为 0， 因 为 0 是 表达 式 中 最 后 一 项 。 逗 号 操作 符 的 这 种 使 用 场景 并 不 
多 见 ， 但 这 种 行为 的 确 存在 。 


3.6 ”语句 


ECMA-262 描述 了 一 些 语句 ( 也 称 为 流 控制 语句 ), 而 ECMAScript 中 的 大 部 分 语法 都 体现 在 语句 中 。 
语句 通常 使 用 一 或 多 个 关键 字 完 成 既定 的 任务 。 语 句 可 以 简单 ， 也 可 以 复杂 。 简 单 的 如 告诉 函数 退出 ， 
复杂 的 如 列 出 一 堆 要 重复 执行 的 指令 。 






















































































3.6.1 ”if 语句 


if 语句 是 使 用 最 频繁 的 语句 之 一 ， 语 法 如 下 : 

if (condition) statement1 else Statement2 

这 里 的 条 件 ( congition ) 可 以 是 任何 表达 式 ， 并 日 求 值 结果 不 一 定 是 布尔 值 。ECMAScript 会 自 
动 调用 Boolean() 函数 将 这 个 表达 式 的 值 转换 为 布尔 值 。 如 果 条 件 求 值 为 true ， 则 执行 语句 
statement1; 如 果 条 件 求 值 为 false， 则 执行 语句 statement2。 这 里 的 语句 可 能 是 一 行 代 码 ， 也 可 
能 是 一 个 代码 块 ( 即 包含 在 一 对 花 括号 中 的 多 行 代码 )。 来 看 下 面 的 例子 : 






























































i A a 

console.log("Greater than 25."); // 只 有 一 行 代 码 的 语句 
else { 

console.log("Less than or equal to 25."); // 一 个 语句 块 


} 
这 里 的 最 佳 实践 是 使 用 语句 块 ， 即 使 只 有 一 行 代码 要 执行 也 是 如 此 。 这 是 因为 语句 块 可 以 避免 对 什 
么 条 件 下 执行 什么 产生 困惑 。 
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可 以 像 这 样 连续 使 用 多 个 if 语句 : 
if (conditionl) statementl1 else if (condition2) statement2 else statement3 


下 面 是 一 个 例子 : 


i 
console.log("Greater than 25.");} 
} else if (i < 0) { 
console.log("Less than 0."); 
} else { 
console.log("Between 0 andq 25, inclusive."); 


} 











3.6.2 do-while 语句 


do-while 语句 是 一 种 后 测试 循环 语句 ， 即 循环 体 中 的 代码 执行 后 才 会 对 退出 条 件 进行 求 值 。 换 名 
话说 ,循环 体内 的 代码 至 少 执行 一 次 。do-while 的 语法 如 下 : 


do { 
statement 
} while (expression); 


下 面 是 一 个 例子 : 


Tet i sO0.: 
do { 
i += 2; 
} while (i < 10); 


在 这 个 例子 中 ， 只 要 ; 小 于 10， 循 环 就 会 重复 执行 。i 从 0 开始， 每 次 循环 递增 2。 











注意 ”后 测试 循环 经 常用 于 这 种 情形 : 循环 体内 代码 在 退出 前 至 少 要 执行 一 次 。 





3.6.3 while 语句 


while 语句 是 一 种 先 测试 循环 语句 ， 即 先 检测 退出 条 件 ， 再 执行 循环 体内 的 代码 。 因 此 ,while 循 
环 体内 的 代码 有 可 能 不 会 执行 。 下 面 是 while 循环 的 语法 : 


while(expression) statement 






































这 是 一 个 例子 

let i = 0; 

while (i < 10) { 
本 村 三 -2 


} 
在 这 个 例子 中 ， 变 量 i 从 0 开始 ， 每 次 循环 递增 2。 只 要 i 小 于 10， 循环 就 会 继续 。 





3.6.4 ”for 语句 


for 语句 也 是 先 测试 语句 ， 只 不 过 增加 了 进入 循环 之 前 的 初始 化 代码 ， 以 及 循环 执行 后 要 执行 的 表 
达 式 ， 语 法 如 下 : 


for (initialization; expression; post-loop-expression) statement 
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下 面 是 一 个 用 例 : 
let count = 10; 
for (let i = 0; i < count; i++) { 


console.1log(i); 


} 


以 上 代码 在 循环 开始 前 定义 了 变量 i 的 初始 值 为 0。 然 后 求 值 条 件 表达 式 ， 如 果 求 值 结果 为 true 
(< count )， 则 执行 循环 体 。 因 此 循环 体 也 可 能 不 会 被 执行 。 如 果 循 环 体 被 执行 了 ， 则 循环 后 表达 式 
也 会 执行 ， 以 便 递增 变量 i。for 循环 跟 下 面 的 while 循环 是 一 样 的 : 

let count = 10; 

le :0 

while (i < count) { 

console.1o0g (i); 


} 









































无 法 通过 while 循环 实现 的 逻辑 ， 同 样 也 无 法 使 用 for 循环 实现 。 因 此 for 循环 只 是 将 循环 相关 
的 代码 封装 在 了 一 起 而 已 。 

在 for 循环 的 初始 化 代码 中 , 其实 是 可 以 不 使 用 变量 声明 关键 字 的 。 不 过 , 初始 化 定义 的 迭代 器 变 
量 在 循环 执行 完成 后 几乎 不 可 能 再 用 到 了 。 因此, 最 清晰 的 写法 是 使 用 let 声明 迭代 器 变量 ,这样 就 可 
以 将 这 个 变量 的 作用 域 限 定 在 循环 中 。 

初始 化 、 条 件 表达 式 和 循环 后 表达 式 都 不 是 必需 的 。 因 此 ， 下 面 这 种 写法 可 以 创建 一 个 无 穷 循环 : 

for (;;) { // 无 穷 循 环 

doSomething() ; 
} 
如 果 只 包含 条 件 表达 式 ， 那 么 for 循环 实际 上 就 变 成 了 while 循环 : 


let count = 10; 







































































Tet TE "0; 

for (; i < count; ) 1{ 
console.1log(i); 
i++; 


} 
这 种 多 功能 性 使 得 for 语句 在 这 门 语言 中 使 用 非常 广泛 。 


3.6.5 ”for-in 语句 





for-in 语句 是 一 种 严格 的 近 代 语句 ， 用 于 枚 举 对 象 中 的 非 符 号 键 属性 ， 语 法 如 下 : 
for (property in expression) statement 


下 面 是 一 个 例子 : 


for (const propName in window) { 
document .write (propName); 














} 
这 个 例子 使 用 for-in 循环 显示 了 BOM 对 象 window 的 所 有 属性 。 每 次 执行 循环 ， 都 会 给 变量 


纵 父 星 
propName 赋予 一 个 window 对 象 的 属性 作为 值 ,直到 wingdow 的 所 有 属性 都 被 枚 举 一 遍 。 与 for 循环 
一 样 ， 这 里 控制 语句 中 的 const 也 不 是 必需 的 。 但 为 了 确保 这 个 局 部 变量 不 被 修改 ,推荐 使 用 const。 


ECMAScript 中 对 象 的 属性 是 无 序 的 ,因此 for-in 语句 不 能 保证 返回 对 象 属性 的 顺序 。 换 句 话 说 ， 
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所 有 可 枚 举 的 属性 都 会 返回 一 次 ， 但 返回 的 顺序 可 能 会 因 浏览 器 而 异 。 


3. 


持续 到 将 所 有 元 素 都 迭代 完 。 与 for 循环 一 样 ， 这 里 控制 语句 中 的 const 也 不 是 必需 的 。 但 为 了 确保 





如 果 for-in 循环 要 迭代 的 变量 是 null 或 undefined， 则 不 执行 循环 体 。 


6.6 for-of 语句 














for-of 语句 是 一 种 严格 的 近 代 语句 ， 用 于 遍历 可 迭代 对 象 的 元 素 ， 语 法 如 下 : 
for (property of expression) statement 
下 面 是 示例 : 


下 G (Const el , of: [658 号 
document .write(el) 


} 











在 这 个 例子 中 , 我 们 使 用 for-of 语句 显示 了 一 个 包含 4 个 元 素 的 数组 中 的 所 有 元 素 。 循 环 会 一 直 























这 个 局 部 变量 不 被 修改 ， 推 荐 使 用 const。 


A 
入 





for-of 循环 会 按照 可 迭代 对 象 的 next () 方 法 产生 值 的 顺序 和 欠 代 元 素 。 关 于 可 迭代 对 象 , 本 书 将 在 


7 章 详细 介绍 。 


如 果 尝 试 迭 代 的 变量 不 支持 迭代 ， 则 for-of 语句 会 抛 出 错误 。 





注意 ES2018 对 for-of 语句 进行 了 扩展 ， 增 加 了 for-await-of 循环 ， 以 支持 生成 期 


约 (promise ) 的 异步 可 和 迭代 对 象 。 相 关内 容 将 在 附录 A 介绍 。 





3.6.7 标签 语句 


yY 


标签 语句 用 于 给 语句 加 标签 ， 语 法 如 下 : 
label: statement 
下 面 是 一 个 例子 : 


start: for (let i = 0; i < count; i++) { 
console.1log(i); 


} 














在 这 个 例子 中 ，start 是 一 个 标签 ， 可 以 在 后 面 通过 break 或 cont inue 语句 引用 。 标 签 语句 的 





























4 型 应 用 场景 是 舱 套 循环 。 


3.6.8 break 和 continue 语句 


break 和 continue 语句 为 执行 循环 代码 提供 了 更 严格 的 控制 手段 。 其 中 , break 语句 用 于 立即 退 


出 循环 ,强制 执行 循环 后 的 下 一 条 语句 。 而 continue 语句 也 用 于 立即 退出 循环 ,但 会 再 次 从 循环 顶部 
开始 执行 。 下 面 看 一 个 例子 : 














let num = 0; 
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nuUum+t+; 


console.log(num); // 4 
在 上 面 的 代码 中 ，for 循环 会 将 变量 i 由 1 递增 到 10。 而 在 循环 体内 ， 有 一 个 if£ 语句 用 于 检查 i 
能 否 被 5 整除 (使 用 取 模 操作 符 )。 如 果 是 ， 则 执行 preak 语句 ， 退 出 循环 。 变 量 num 的 初始 值 为 0， 
表示 循环 在 退出 前 执行 了 多 少 次 。 当 break 语句 执行 后 ， 下 一 行 执行 的 代码 是 console.1og (num) ， | 
显示 4。 之 所 以 循环 执行 了 4 次 ,是 因为 当 i 等 于 5 时 ，break 语句 会 导致 循环 退出 ,该 次 循环 不 会 执 
行 递增 num 的 代码 。 如 果 将 break 换 成 continue， 则 会 出 现 不 同 的 效果 : 




















1 
continue; 
; 


nuUum++; 

} 

console.log(num); // 8 

这 一 次 ，console.1og 显示 8， 即 循环 被 完整 执行 了 8 次 。 当 i 等 于 5 时 ,循环 会 在 递增 num 之 
前 退出 ， 但 会 执行 下 一 次 迭代 ， 此 时 i 是 6。 然 后 ， 循 环 会 一 直 执行 到 自然 结束 ， 即 i 等 于 10。 最 终 
num 的 值 是 8 而 不 是 9， 是 因为 continue 语句 导致 它 少 递增 了 一 次 。 

break 和 continue 都 可 以 与 标签 语句 一 起 使 用 ,返回 代码 中 特定 的 位 置 。 这 通常 是 在 舱 套 循环 中 ， 
如 下 面 的 例子 所 示 : 


let num = 0; 



































outermost: 
for (let i = 0; i < 10; i++) 1{ 
for (let j = 0; j < 10; j++) 
eh (ls sey S&S 
break outermost; 
} 
nuUum++; 
} 
} 


{ 


console.log(num); // 55 

在 这 个 例子 中 ，outermost 标签 标识 的 是 第 一 个 for 语句 。 正 常情 况 下 ， 每 个 循环 执行 10 次 , 意 
味 着 num++ 语 句 会 执行 100 次 ， 而 循环 结束 时 console.1og 的 结果 应 该 是 100。 但 是 ，break 语句 带 
来 了 一 个 变数 ， 即 要 退出 到 的 标签 。 添 加 标签 不 仅 让 break 退出 (使 用 变量 j 的 ) 内 部 循环 ， 也 会 退出 
(使 用 变量 i 的 ) 外 部 循环 。 当 执行 到 i 和 j 都 等 于 5 时, 循环 停止 执行 , 此 时 num 的 值 是 55。continue 
语句 也 可 以 使 用 标签 ， 如 下 面 的 例子 所 示 : 


Tet: num ‘Ss Os 














outermost: 
for (let i 


二 站 水 本 人 
for: (let T= 


0; j < 10; j++) { 
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iEf (dE = 3 Kj ==. 5) 
continue outermost; 
} 
IIUIf 二 卡子 
} 
} 


console.log(num); // 95 

这 一 次 , cont inue 语句 会 强制 循环 继续 执行 , 但 不 是 继续 执行 内 部 循环 , 而 是 继续 执行 外 部 循环 。 
当 和 j 都 等 于 5 时 ,会 执行 continue， 跳 到 外 部 循环 继续 执行 ， 从 而 导致 内 部 循环 少 执行 5 次 , 结 
果 num 等 于 95。 

组 合 使 用 标签 语句 和 break、continue 能 实现 复杂 的 逻辑 , 但 也 容易 出 错 。 注 意 标签 要 使 用 描述 
性 强 的 文本 ， 而 内 套 也 不 要 太 深 。 


























3.6.9 with 语句 


with 语句 的 用 途 是 将 代码 作用 域 设 置 为 特定 的 对 象 ， 其 语法 是 : 

with (expression) statement; 

使 用 with 语句 的 主要 场景 是 针对 一 个 对 象 反复 操作 ， 这 时 候 将 代码 作用 域 设 置 为 该 对 象 能 提供 便 
如 下 面 的 例子 所 示 : 


let qs = location.search.substring(1); 
let hostName = location.hostname; 
let url = location.href; 


上 面 代码 中 的 每 一 行 都 用 到 了 location 对 象 。 如 果 使 用 with 语句 ， 就 可 以 少 写 一 些 代 码 : 


with(location) { 
let qs = search.substring(1); 
let hostName = hostname; 
let url = href,; 




















利 








} 
这 里 ，with 语句 用 于 连接 location 对 象 。 这 意味 着 在 这 个 语句 内 部 ， 每 个 变量 首先 会 被 认为 是 
个 局 部 变量 。 如 果 没 有 找到 该 局 部 变量 ， 则 会 搜索 1ocat ion 对 象 , 看 它 是 否 有 一 个 同名 的 属性 。 如 
果 有 ， 则 该 变量 会 被 求 值 为 location 对 象 的 属性 。 
严格 模式 不 允许 使 用 with 语句 ， 否 则 会 抛 出 错误 。 






























































警告 ”由 于 with 语句 影响 性 能 且 难 于 调试 其 中 的 代码 , 通常 不 推荐 在 产品 代码 中 使 用 with 


语句 。 





3.6.10 switch 语句 


switch 语句 是 与 if 语句 紧密 相关 的 一 种 流 控制 语句 ， 从 其 他 语言 借鉴 而 来 。ECMAScript 中 switch 
语句 跟 C 语言 中 switch 语句 的 语法 非常 相似 ， 如 下 所 示 : 


switch (expression) { 
case valuel: 
statement 
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break; 
case value2: 


statement 
break; 


statement 
break; 











} 


这 里 的 每 个 case ( 条件 /分 支 ) 相当 于 :“ 如 曙 











表达 式 等 于 后 面 的 值 ， 则 执行 下 面 的 语句 。”break 


关键 字 会 导致 代码 执行 跳出 switch 语句 。 如 果 没 有 break， 则 代码 会 继续 匹配 下 一 个 条 件 。default 
关键 字 用 于 在 任何 条 件 都 没有 满足 时 指定 默认 执行 的 语句 (相当 于 else 语句 )。 
有 了 switch 语句 ， 开 发 者 就 用 不 着 写 类 似 这 样 的 代码 了 : 


(i 


console. 


} else if 


console. 


} else if 


console. 


} else { 
console 


} 





而 是 可 以 这 样 写 : 


switch 
case 25 
conso 


break; 
Case 35: 


Conso 


break; 
case 45: 


Conso 


break; 
default: 


Conso 


} 


为 避免 不 必要 的 条 件 判断 ， 最 好 给 每 个 条 件 后 鱼 





包 5.) 区 
log("25"); 
(=."35 
Lod (35) 
(5) 
log("45"); 

.log("Other"); 

(TT) 过 

lL00 (5) 

le.log("35"); 

le.log("45"); 
le.log("Other"); 

















i 都 加 上 break 语句 。 如 果 硼 


实 需要 连续 匹配 几 个 





























条 件 ， 那 么 推荐 写 个 注释 表明 是 故意 忽略 了 break， 如 下 所 示 : 


Switch 
case 25 


人 


/* 跳 过 */ 


case 35 


ome er Cn OE A573 


break 
case 45 


’ 


console.l1log("45");} 


break 
default 


’ 





console.log("Other"); 


} 

虽然 switch 语句 是 从 其 他 语言 借鉴 过 来 的 ， 但 ECMAScript 为 它 赋予 了 一 些 独 有 的 特性 。 首 先 ， 
switch 语句 可 以 用 于 所 有 数据 类 型 ( 在 很 多 语言 中 , 它 只 能 用 于 数值 ), 因此 可 以 使 用 字符 串 甚 至 对 象 。 
其 次 ， 条 件 的 值 不 需要 是 常量 ， 也 可 以 是 变量 或 表达 式 。 看 下 面 的 例子 : 


Switch ("hello world") { 

case "hello" + " world": 
console.log("Greeting was found."); 
break; 

case "goodbye": 
console.log("Closing was found."); 
break; 

default: 
console.log("Unexpected message was found."); 


























} 

这 个 例子 在 switch 语句 中 使 用 了 字符 串 。 第 一 个 条 件 实际 上 使 用 的 是 表达 式 , 求 值 为 两 个 字符 串 
拼接 后 的 结果 。 因 为 拼接 后 的 结果 等 于 switch 的 参数 ， 所 以 console.1og 会 输出 "Greeting was 
found."。 人 能够 在 条 件 判 断 中 使 用 表达 式 ， 就 可 以 在 判断 中 加 入 更 多 逻辑 : 


let num = 25; 
switch (true) { 
case num < 0: 
console.log("Less than 0."); 
break; 
case num >= 0 && num <= 10: 
console.log("Between 0 and 10."); 
break; 
case num > 10 && num <= 20: 
console.log("Between 10 and 20."); 
break; 
default: 
console.log("More than 20."); 





} 

上 面 的 代码 首先 在 外 部 定义 了 变量 num， 而 传 给 switch 语句 的 参数 之 所 以 是 true， 就 是 因为 每 
个 条 件 的 表达 式 都 会 返回 布尔 值 。 条 件 的 表达 式 分 别 被 求 值 ， 直 到 有 表达 式 返 回 true; 否则 ， 就 会 一 
直 跳 到 aefault 语句 (这 个 例子 正 是 如 此 )。 














注意 ”switch 语句 在 比较 每 个 条 件 的 值 时 会 使 用 全 等 操作 符 ， 因 此 不 会 强制 转换 数据 类 


型 (比如 ， 字 符 串 "10" 不 等 于 数值 10 )。 





3.7 ”函数 


函数 对 任何 语言 来 说 都 是 核心 组 件 ， 因 为 它们 可 以 封装 语句 ， 然 后 在 任何 地 方 、 任 何 时 间 执 行 。 
ECMAScript 中 的 函数 使 用 function 关键 字 声 明 ， 后 跟 一 组 参数 ， 然 后 是 函数 体 。 
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以 下 是 函数 的 基本 语法 : 

function functionName (arg0, argl,..., argN) { 
statements 

. 

下 面 是 一 个 例子 : 

function sayHi (name, message) { 
console.log("Hello " + name + ", " + message); 


} 
可 以 通过 函数 名 来 调用 函数 ， 要 传 给 函数 的 参数 放 在 括号 里 (如果 有 多 个 参数 ， 则 用 逗号 隔 开 )。 
下 面 是 调用 函数 sayHi () 的 示例 : 


sayHi ("Nicholas", "how are you today?"); 






































调用 这 个 函数 的 输出 结果 是 "Hello Nicholas，how are you today?"。 参 数 name 和 message 
在 函数 内 部 作为 字符 串 被 拼接 在 了 一 起 ， 最 终 通 过 console.1og 输出 到 控制 台 。 
ECMAScript 中 的 函数 不 需要 指定 是 和 否 返 回 值 。 任 何 函 数 在 任何 时 间 都 可 以 使 用 return 语句 来 返 
回 函 数 的 值 ， 用 法 是 后 跟 要 返回 的 值 。 比 如 : 


function sum(numl, num2) { 
return numl + num2; 


} 

函数 sum () 会 将 两 个 值 相 加 并 返回 结果 。 注意 , 除了 return 语句 之 外 没有 任何 特殊 声明 表明 该 函 
数 有 返回 值 。 然 后 就 可 以 这 样 调用 它 : 

const result = sum(5, 10); 


要 注意 的 是 ， 只 要 碰 到 return 语句 ， 函 数 就 会 立即 停止 执行 并 退出 。 因 此 ，return 语句 后 面 的 
代码 不 会 被 执行 。 比 如 : 


function sum(numl, num2) { 

return numl + num2; 

console.log("Hello world"); // 不 会 执行 
} 


在 这 个 例子 中 ，console.1og 不 会 执行 ， 因 为 它 在 return 语句 后 面 。 
一 个 函数 里 也 可 以 有 多 个 return 语句 ， 像 这 样 : 


function diff(numl, num2) { 
if (numl < num2) { 
return num2 - numl; 
} else { 
return numl - num2; 
} 
} 


这 个 aiff() 函数 用 于 计算 两 个 数值 的 差 。 如 果 第 一 个 数值 小 于 第 二 个 ， 则 用 第 二 个 减 第 一 个 ; 否 
则 ， 就 用 第 一 个 减 第 二 个 。 代 码 中 每 个 分 支 都 有 自己 的 return 语句 ， 返 回 正 确 的 差 值 。 

return 语句 也 可 以 不 带 返 回 值 。 这 时 候 ， 函 数 会 立即 停止 执行 并 返回 undefined。 这 种 用 法 最 常 
用 于 提前 终止 函数 执行 ， 并 不 是 为 了 返回 值 。 比 如 在 下 面 的 例子 中 ，console.1og 不 会 执行 : 


function sayHi (name, message) { 
return; 
console.log("Hello " + name + "，" + message); // 不 会 执行 


} 





























































































































注意 ”有 最 佳 实践 是 函数 要 么 返回 值 ， 要 么 不 返回 值 。 只 在 某 个 条 件 下 返回 值 的 函数 会 带 来 


麻烦 ， 尤 其 是 调试 时 。 





严格 模式 对 函数 也 有 一 些 限 制 : 

口 函数 不 能 以 eval 或 arguments 作为 名 称 ; 

口 函数 的 参数 不 能 叫 eval 或 arguments ; 

口 两 个 命名 参数 不 能 拥有 同一 个 名 称 。 

如 果 违 反 上 述 规则 ， 则 会 导致 语法 错误 ， 代 码 也 不 会 执行 。 


3.8 小 结 























JavaScript 的 核心 语言 特性 在 ECMA-262 中 以 伪 语 言 ECMAScript 的 形式 来 定义 。ECMAScript 包含 
所 有 基本 语法 、 操 作 符 、 数 据 类 型 和 对 象 ， 能 完成 基本 的 计算 任务 , 但 没有 提供 获得 输入 和 产生 输出 的 
机 制 。 理 解 ECMAScript 及 其 复杂 的 细节 是 完全 理解 浏览 器 中 JavaScript 的 关键 。 下 面 总 结 一 下 
ECMAScript 中 的 基本 元 素 。 
口 ECMAScript 中 的 基本 数据 类 型 包括 Undefined、Null Boolean、Number、String 和 Symbol。 
口 与 其 他 语言 不 同 ，ECMAScript 不 区 分 整数 和 浮 点 值 ， 只 有 Number 一 种 数值 数据 类 型 。 
口 object 是 一 种 复杂 数据 类 型 ， 它 是 这 门 语言 中 所 有 对 象 的 基 类 。 
口 严格 模式 为 这 门 语言 中 某 些 容易 出 错 的 部 分 施加 了 限制 。 
口 ECMAScript 提供 了 C 语 言 和 类 C 语言 中 常见 的 很 多 基本 操作 符 , 包括 数学 操作 符 布尔 操作 符 、 
关系 操作 符 、 相 等 操作 符 和 赋值 操作 符 等 。 
口 这 门 语言 中 的 流 控制 语句 大 多 是 从 其 他 语言 中 借鉴 而 来 的 ， 比 如 if 语句 、for 语句 和 switch 

语句 等 。 

ECMAScript 中 的 函数 与 其 他 语言 中 的 函数 不 一 样 。 
口 不 需要 指定 函数 的 返回 值 ， 因 为 任何 函数 可 以 在 任何 时 候 返 回 任何 值 。 
口 不 指定 返回 值 的 函数 实际 上 会 返回 特殊 值 undefined。 
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本 章 内 容 





口 理解 垃圾 


相 0 
松散 类 型 的 ， 
么 数据 类 型 ， 变 量 
不 少 问 题 。 本 章 会 








口 通过 变量 使 用 原始 值 与 引用 
口 理解 执行 上 下 文 


作用 域 与 内 存 





值 








es 





回收 


至 言 ，JavaScript 中 的 变量 可 请 独树一帜 。 正 如 ECMA-262 所 规定 的 ，JavaScript 变量 是 

日 变量 不 过 就 是 特定 时 间 点 一 个 特定 值 的 名 称 而 已 。 由 于 没有 规则 定义 变量 必须 包含 什 

量 的 值 和 数据 类 型 在 脚本 生命 期 内 可 以 改变 。 这 样 的 变量 很 有 意思 , 很 强大 ， 当 然 也 有 
齐 析 错综复杂 的 变量 。 



































4.1 原始 值 与 引用 值 


ECMAScript ” 











变量 可 以 包含 两 种 不 同类 型 的 数据 : 原始 值 和 引用 值 。 原 始 值 ( primitive value ) 就 是 




















最 简单 的 数据 ， 引 用 值 (reference value ) 则 是 由 多 个 值 构成 的 对 象 。 
在 把 一 个 值 赋 给 变量 时 ，JavaScript 引擎 必须 确定 这 个 值 是 原始 值 还 是 引用 值 。 上 一 章 讨 论 了 6 种 


原始 值 : Undefi 





























ned、 Null、 Boolean、Number、String 和 Symbol。 保存 原始 值 的 变量 是 按 值 (by 





value ) 访问 的 ， 











因为 我 们 操作 的 就 是 存储 在 变量 中 的 实际 值 。 























引用 值 是 保存 在 内 存 中 的 对 象 。 与 其 他 语言 不 同 ，JavaScript 不 允许 直接 访问 内 存 位 置 ， 因 此 也 就 
不 能 直接 操作 对 象 所 在 的 内 存 空 间 。 在 操作 对 象 时 ， 实 际 上 操作 的 是 对 该 对 象 的 引用 (reference ) 而 非 





实际 的 对 象 本 身 。 

















为 此 ,保存 引用 值 的 变量 是 按 引 用 (by reference ) 访问 的 。 








注意 在 很 多 语言 中 ， 字 符 串 是 使 用 对 象 表 示 的 ， 因 此 被 认为 是 引用 类 型 。ECMAScript 


打破 了 这 个 惯例 。 





4.1.1 动态 属性 











原始 值 和 引 





用 值 的 定义 方式 很 类 似 ， 都 是 创建 一 个 变量 ,然后 给 它 赋 一 个 值 。 不 过 ， 在 变量 保存 了 








这 个 值 之 后 ， 可 以 对 这 个 值 做 什么 , 则 大 有 不 同 。 对 于 引用 值 而 言 ， 可 以 随时 添加 、 修 改 和 删除 其 属性 
和 方法 。 比 如 ， 看 下 面 的 例子 : 


let person 


= new Object (); 


person.name = "Nicholas"; 
console.log(person.name); // "Nicholas" 


这 里 ， 首 先 创 建 了 一 个 对 象 ， 并 把 它 保 存在 变量 person 中 。 然 后 ， 给 这 个 对 象 添 加 了 一 个 名 为 
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name 的 属性 , 并 给 这 个 属性 赋值 了 一 个 字符 串 " 
对 象 被 销毁 或 属性 被 显 式 地 删除 。 














了 

















原始 值 不 能 有 属性 ， 尺 管 尝试 给 原始 值 添加 
let name = "Nicholas"; 

name.age = 27; 

console.log(name.age); // undefined 


在 此 ， 代 码 想 给 字符 串 name 定义 一 个 age 属性 并 给 该 属 





























了 。 记 住 ， 只 有 引用 值 可 以 动态 添加 后 面 可 以 使 用 的 属性 。 





注意 ， 原 始 类 型 的 初始 化 可 以 只 使 用 原始 字面 量 形式 。 如 引 





属性 不 会 报错 。 


比如 : 








icholas"。 在 此 之 后 , 就 可 以 访问 这 个 新 属性 ， 直 到 


























性 赋值 27。 紧 接着 在 下 一 行 ， 属性 不 见 








使 用 的 是 new 关键 字 ， 


则 JavaScript 会 


创建 一 个 object 类 型 的 实例 ,但 其 行为 类 似 原始 值 。 下 面 来 看 看 这 两 种 初始 化 方式 的 差异 : 


Jet namel = " Nicholas" 

let name2 = new String("Matt"); 
namel.age = 27; 

name2.age = 26; 

console.log (namel .age); // undefined 
console.log (name?2 .age); L726 
console.log(typeof namel); // string 
console.log(typeof name2); // object 


4.1.2 复制 值 





除了 存储 方式 不 同 , 原始 值 和 引用 值 在 通过 变 


变量 复 














判 时 也 有 所 不 同 。 在 通过 变量 把 








到 另 一 个 变量 时 ， 原 始 值 会 被 复制 到 新 变量 的 位 置 。 请 看 下 面 的 例子 : 





5 


let numl 
numl; 


let num2 


这 里 ，numl 包含 数值 5。 当 把 num2 初始 化 为 numl 时 ，num2 也 会 得 到 数值 5。 这 个 值 跟 存 储 在 





numl 中 的 5 是 完全 独立 的 ， 因 为 它 是 那个 值 的 副本 。 
这 两 个 变量 可 以 独立 使 用 ， 互 不 干扰 。 这 个 过 程 如 图 4-1 所 示 。 








复制 前 的 变量 对 象 


| 1 | 





numl 











与 
(Number 类 型 ) 





复制 后 的 变量 对 象 
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(Number 类 型 ) 
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(Number 类 型 ) 








一 个 原始 值 赋 值 
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在 把 引用 值 从 一 个 变量 赋 给 另 一 个 变量 时 , 存储 在 变量 中 的 值 也 会 被 复制 到 新 变量 所 在 的 位 置 。 区 
别 在 于 ,这 里 复制 的 值 实际 上 是 一 个 指针 ， 它 指向 存储 在 堆 内 存 中 的 对 象 。 操 作 完成 后 ， 两 个 变量 实际 
上 指向 同一 个 对 象 ， 因 此 一 个 对 象 上 面 的 变化 会 在 男 一 个 对 象 上 反映 出 来 ， 如 下 面 的 例子 所 示 : 

let ob]jl = new Object(); 

let obj2 = obj1; 


objl.name = "Nicholas"; 
console.log(obj2.name); // "Nicholas" 


在 这 个 例子 中 ， 变 量 objl 保存 了 一 个 新 对 象 的 实例 。 然 后 ， 这 个 值 被 复制 到 obj2 ， 此 时 两 个 变 
量 都 指向 了 同一 个 对 象 。 在 给 obj1 创建 属性 name 并 赋值 后 ， 通 过 obj2 也 可 以 访问 这 个 属性 ， 因 为 
它们 都 指向 同一 个 对 象 。 图 4-2 展示 了 变量 与 堆 内 存 中 对 象 之 间 的 关系 。 | 


复制 前 的 变量 对 象 堆 内 存 
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(Object 类 型 












复制 后 的 变量 对 象 








obj2 (cbject 类 型 1| 











图 4-2 


4.1.3 传递 参数 


ECMAScript 中 所 有 函数 的 参数 都 是 按 值 传递 的 。 这 意味 着 函数 外 的 值 会 被 复制 到 函数 内 部 的 参数 
中 ， 就 像 从 一 个 变量 复制 到 另 一 个 变量 一 样 。 如 果 是 原始 值 ， 那 么 就 跟 原始 值 变量 的 复制 一 样 ， 如 果 是 
引用 值 ， 那 么 就 跟 引 用 值 变量 的 复制 一 样 。 对 很 多 开发 者 来 说 ， 这 一 块 可 能 会 不 好 理解 ， 毕 竞 变 量 有 按 
值 和 按 引 用 访问 ， 而 传 参 则 只 有 按 值 传递 。 

在 按 值 传递 参数 时 ， 值 会 被 复制 到 一 个 局 部 变量 〈 即 一 个 命名 参数 ， 或 者 用 ECMAScript 的 话说 ， 
就 是 arguments 对 象 中 的 一 个 槽 位 ), 在 按 引 用 传递 参数 时 , 值 在 内 存 中 的 位 置 会 被 保存 在 一 个 局 部 变 
量 ， 这 意味 着 对 本 地 变量 的 修改 会 反映 到 函数 外 部 。( 这 在 ECMAScript 中 是 不 可 能 的 。) 来 看 下 面 这 个 
例子 : 

function addTen (num) { 

num += 10; 


return num; 


} 













































































let count = 20; 
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let result = addTen (count); 
console.log(count); // 20, 没有 变化 
console.log(result); // 30 


这 里 ， 函 数 addTen () 有 一 个 参数 num, 它 其 实 是 一 个 局 部 变量 。 在 调用 时 ， 变量 count 作为 参数 
传人 。count 的 值 是 20, 这 个 值 被 复制 到 参数 num 以 便 在 addTen () 内 部 使 用 。 在 函数 内 部 , 参数 num 
的 值 被 加 上 了 10, 但 这 不 会 影响 函数 外 部 的 原始 变量 count。 参 数 num 和 变量 count 互 不 干扰 , 它们 
只 不 过 碰巧 保存 了 一 样 的 值 。 如 果 num 是 按 引用 传递 的 ， 那么 count 的 值 也 会 被 修改 为 30。 这 个 事实 
在 使 用 数值 这 样 的 原始 值 时 是 非常 明显 的 。 但 是 ， 如 果 变 量 中 传递 的 是 对 象 ， 就 没 那 么 清楚 了 。 比 如 ， 
再 看 这 个 例子 : 


function setName (obj) { 
obj.name = "Nicholas"; 


} 















































let person = new Object (); 
setName (person);} 
console.log(person.name); // "Nicholas" 


这 一 次 ， 我 们 创建 了 一 个 对 象 并 把 它 保存 在 变量 person 中 。 然 后 ， 这 个 对 象 被 传 给 setName () 
方法 ,并 被 复制 到 参数 opj 中 。 在 函数 内 部 ，obj 和 person 都 指向 同一 个 对 象 。 结果 就 是 ， 即 使 对 象 
是 按 值 传 进 函 数 的 ，obj 也 会 通过 引用 访问 对 象 。 当 函数 内 部 给 opj 设置 了 name 属性 时 ,函数 外 部 的 
对 象 也 会 反映 这 个 变化 ， 因 为 obj 指向 的 对 象 保存 在 全 局 作用 域 的 堆 内 存 上 。 很 多 开发 者 错误 地 认为 ， 
当 在 局 部 作用 域 中 修改 对 象 而 变化 反映 到 全 局 时 ,就 意味 着 参数 是 按 引 用 传递 的 。 为 证 明 对 象 是 按 值 传 
递 的 ,我们 再 来 看 看 下 面 这 个 修改 后 的 例子 : 


function setName (obj) { 






























































obj.name = "Nicholas"; 
obj = new Object(); 
obj.name = "Greg"; 


} 


let person = new Object (); 
setName (person);} 
console.log(person.name); // "Nicholas" 


这 个 例子 前 后 唯一 的 变化 就 是 setName () 中 多 了 两 行 代码 , 将 obj 重新 定义 为 一 个 有 着 不 同 name 
的 新 对 象 。 当 person 传人 setName () 时 , 其 name 属性 被 设置 为 "Nicholas"。 然 后 变量 obj 被 设置 
为 一 个 新 对 象 上 且 name 属性 被 设置 为 "Greg"。 如 果 person 是 按 引 用 传递 的 , 那么 person 应 该 自动 将 
指针 改 为 指向 name 为 "Greg" 的 对 象 。 可 是 , 当 我 们 再 次 访问 person .name 时 , 它 的 值 是 "Nicholas"， 
这 表明 函数 中 参数 的 值 改 变 之 后 , 原始 的 引用 仍然 没 变 。 当 obj 在 函数 内 部 被 重 写 时 , 它 变 成 了 一 个 指 
向 本 地 对 象 的 指针 。 而 那个 本 地 对 象 在 函数 执行 结束 时 就 被 销毁 了 。 

































































注意 ECMAScript 中 函数 的 参数 就 是 局 部 变量 。 





4.1.4 确定 类 型 


前 一 章 提 到 的 typeof 操作 符 最 适合 用 来 判断 一 个 变量 是 否 为 原始 类 型 。 更 确切 地 说 , 它 是 判断 一 
个 变量 是 否 为 字符 串 、 数 值 、 布 尔 值 或 undefined 的 最 好 方式 。 如 果 值 是 对 象 或 null1， 那么 typeof 
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返回 "object"， 如 下 面 的 例子 所 示 : 











let s = "Nicholas"; 

let b = true; 

le E223 

let u; 

let n = null; 

let o = new Object 

console.log (typeof » MA tT 


J 
gl( S 
console.log(typeof i); // number 
console.log(typeof b); // boolean 
console.log(typeof u); // undefined 
console.log(typeof n); // object 
console.log(typeof o 














// object 人 | 
typeof 虽然 对 原始 值 很 有 用 ， 但 它 对 引用 值 的 用 处 不 大 。 我 们 通常 不 关心 一 个 值 是 不 是 对 象 ， 




















而 是 想 知道 它 是 什么 类 型 的 对 象 。 为 了 解决 这 个 问题 ，ECMAScript 提供 了 instanceof 操作 符 , 语 
法 如 下 : 

result = variable instanceof constructor 

如 果 变 量 是 给 定 引 用 类 型 ( 由 其 原型 链 决 定 , 将 在 第 8 章 详细 介绍 ) 的 实例 , 则 instanceof 操作 
符 返 回 true。 来 看 下 面 的 例子 : 


console.log(person instanceof Object); // 变量 person 是 Object 吗 ? 
console.log(colors instanceof Array); // 变量 colors 是 Array 吗 ? 
console.log(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗 ? 


按照 定义 ， 所 有 引用 值 都 是 object 的 实例 ， 因 此 通过 instanceof 操作 符 检 测 任 何 引 用 值 和 
Object 构造 函数 都 会 返回 true。 类 似 地 ， 如 果 用 instanceof 检测 原始 值 ， 则 始终 会 返回 false， 
因为 原始 值 不 是 对 象 。 














注意 ”typeof 操作 符 在 用 于 检测 函数 时 也 会 返回 "function"。 当 在 Safari ( 直到 Safari 5 ) 
和 Chrome ( 直到 Chrome 7 ) 中 用 于 检测 正则 表达 式 时 ， 由 于 实现 细节 的 原因 ，typeof 
也 会 返回 "function"。ECMA-262 规定 ， 任 何 实现 内 部 [[cal1]] 方 法 的 对 象 都 应 该 在 


typeof 检测 时 返回 "function"。 因 为 上 述 浏 览 器 中 的 正则 表达 式 实现 了 这 个 方法 ， 所 
以 typeof 对 正则 表达 式 也 返回 "function"。 在 和 Firefox 中 , typeof 对 正则 表达 式 
返回 "object"。 








4.2 ”执行 上 下 文 与 作用 域 


最 频 讲 和 
执行 上 下 文 (以 下 简称 “上 下 文 ”) 的 概念 在 JavaScript 中 是 颇 为 重要 的 。 变 量 或 函数 的 上 下 文 决 定 











它们 可 以 访问 哪些 数据 ， 以 及 它们 的 行为 。 每 个 上 下 文 都 有 一 个 关联 的 变量 对 象 ( variable object )， 
Oe 变量 和 函数 都 存在 于 这 个 对 象 上 。 虽 然 无 法 通过 代码 访问 变量 对 象 , 但 后 台 
处 理 数据 会 用 到 它 。 
全 局 上 下 文 是 最 外 层 的 上 下 文 。 根 据 ECMAScript 实现 的 宿主 环境 ， 表 示 全 局 上 下 文 的 对 象 可 能 不 一 
样 。 在 浏览 器 中 ,全 局 上 下 文 就 是 我 们 常 说 的 window 对 象 (第 12 章 会 详细 介绍 )， 因此 所 有 通过 var 定 
义 的 全 局 变量 和 函数 都 会 成 为 winaow 对 象 的 属性 和 方法 。 使 用 let 和 const 的 顶级 声明 不 会 定义 在 全 
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局 上 下 文中 , 但 在 作用 域 链 解析 上 效果 是 一 样 的 。 上 下 文 在 其 所 有 代码 都 执行 完毕 后 会 被 销毁 ,包括 定义 
在 它 上 面 的 所 有 变量 和 函数 (全 局 上 下 文 在 应 用 程序 退出 前 才 会 被 销毁 ， 比 如 关闭 网 页 或 退出 浏览 右 )。 








每 个 函数 调用 都 有 自 




















己 的 上 下 文 。 当 代码 执行 流 进入 函数 时 , 函数 的 上 下 文 被 推 到 一 个 上 下 文 栈 上 。 


在 函数 执行 完 之 后 ， 上 下 文 栈 会 弹出 该 函数 上 下 文 ， 将 控制 权 返 还 给 之 前 的 执行 上 下 文 。ECMAScript 




















程序 的 执行 流 就 是 通 














过 这 个 上 下 文 栈 进行 控制 











的 。 








上 下 文中 的 代码 在 执行 的 时 候 , 会 创建 变量 对 象 的 一 个 作用 域 链 ( scope chain )。 这 个 作用 域 链 决 定 
了 各 级 上 下 文中 的 代码 在 访问 变量 和 函数 时 的 顺序 。 代码 正在 执行 的 上 下 文 的 变量 对 象 始终 位 于 作用 域 
链 的 最 前 端 。 如 果 上 下 文 是 函数 ， 则 其 活动 对 象 (activation object ) 用 作 变 量 对 象 。 活 动 对 象 最 初 只 有 


一 个 定义 变量 


分 里 : argumentso 
下 文 ， 再 下 一 个 对 象 来 自 忆 
是 作用 域 链 的 最 后 一 个 变量 对 象 。 









































(全 局 上 下 文中 没有 这 个 变量 。) 作用 域 链 中 的 下 一 个 变量 对 象 来 自 包含 上 
了 下 一 个 包含 上 下 文 。 以 此 类 推 直至 全 局 上 下 文 ; 全 局 上 下 文 的 变量 对 象 始终 











代码 执行 时 的 标识 符 解 析 是 通过 沿 作 用 域 链 逐 级 搜索 标识 符 名 称 完成 的 。 搜索 过 程 始 终 从 作用 域 链 


的 最 前 端 开 始 ， 然 后 逐 级 往 后 ， 直 到 找到 标识 符 。( 如 果 没 有 找到 标识 符 ， 那 么 通常 会 报错 。) 





看 一 看 下 面 这 个 例子 : 


全 ee 一 


"blue"; 


function changeColor() { 
1E (COLOr == blue 并 


are 有 区 oh 二 | 
} else { 
SOLGE 一 
} 
} 


changeColor( 


对 这 个 例子 而 言 ， 


"red"; 


"blue"; 


) 3 


是 定义 arguments 对 象 的 那个 ), 另 一 个 是 全 
color， 就 是 因为 可 以 在 作用 域 链 中 找到 它 。 





















































函数 changecolor () 的 作用 域 链 包 含 两 个 对 象 : 一 个 是 它 自己 的 变量 对 象 ( 就 





局 上 下 文 的 变量 对 象 。 这 个 函数 内 部 之 所 以 能 够 访问 变量 


























此 外 ， 局 部 作 


] 域 中 定义 的 变量 可 








Yar. ‘COLO 


"blue"; 


function changeColor() { 
let anotherColor = "red"; 


function swapColors() { 
let tempColor = anotherColor; 
anotherCoLlor e COLoOr: 
color = tempColor; 








] 于 在 











局 部 上 下 文中 替换 全 局 变量 。 看 一 看 下 面 这 个 例子 : 











// 这 里 可 以 访问 color、anotherColor 和 tempColor 


} 


// 这 里 可 以 访问 color 和 anotherColor，, 但 访问 不 到 tempColor 


swapColors 
} 


(es 


// 这 里 只 能 访问 color 
changeColor(); 
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以 上 代码 涉及 3 个 上 下 文 : 全 局 上 下 文 、changeColor () 的 局 部 上 下 文 和 swapcolors () 的 局 部 
上 下 文 。 全 局 上 下 文中 有 一 个 变量 color 和 一 个 函数 changeColor () 。changecolor () 的 局 部 上 下 文中 
有 一 个 变量 anothercolor 和 一 个 函数 swapcolors () ， 但 在 这 里 可 以 访问 全 局 上 下 文中 的 变量 color。 
swapColors () 的 局 部 上 下 文中 有 一 个 变量 tempcolor ， 只 能 在 这 个 上 下 文中 访问 到 。 全 局 上 下 文 和 
changeColor () 的 局 部 上 下 文 都 无 法 访问 到 tempcolor。 而 在 swapcolors () 中 则 可 以 访问 另外 两 个 
上 下 文中 的 变量 ， 因 为 它们 都 是 父 上 下 文 。 图 4-3 展示 了 前 面 这 个 例子 的 作用 域 链 。 


window 






































Clie 


changeColor () 


anotherColor 


swapColors () 


tempColor 





图 4-3 


图 4-3 中 的 矩形 表示 不 同 的 上 下 文 。 内 部 上 下 文 可 以 通过 作用 域 链 访问 外 部 上 下 文中 的 一 切 ， 但 外 
部 上 下 文 无 法 访问 内 部 上 下 文中 的 任何 东西 。 上 下 文 之 间 的 连接 是 线性 的 、 有 序 的 。 每 个 上 下 文 都 可 以 
到 上 一 级 上 下 文中 去 搜索 变量 和 函数 ， 但 任何 上 下 文 都 不 能 到 下 一 级 上 下 文中 去 搜索 。swapCcolors () 
局 部 上 下 文 的 作用 域 链 中 有 3 个 对 象 : swapcolors () 的 变量 对 象 、changecolor () 的 变量 对 象 和 全 局 
变量 对 象 。swapcolors () 的 局 部 上 下 文 首先 从 自己 的 变量 对 象 开始 搜索 变量 和 函数 ， 搜 不 到 就 去 搜索 
上 一 级 变量 对 象 。changecolor () 上 下 文 的 作用 域 链 中 只 有 2 个 对 象 : 它 自己 的 变量 对 象 和 全 局 变量 
对 象 。 因 此 ， 它 不 能 访问 swapcolors () 的 上 下 文 。 

































































注意 ”函数 参数 被 认为 是 当前 上 下 文中 的 变量 ,因此 也 跟 上 下 文中 的 其 他 变量 遵循 相同 的 


访问 规则 。 





4.2.1 作用 域 链 增强 


虽然 执行 上 下 文 主要 有 全 局 上 下 文 和 函数 上 下 文 两 种 (eval () 调用 内 部 存在 第 三 种 上 下 文 ), 但 有 
其 他 方式 来 增强 作用 域 链 。 某 些 语句 会 导致 在 作用 域 链 前 端 临时 添加 一 个 上 下 文 , 这 个 上 下 文 在 代码 执 
行 后 会 被 删除 。 通 常 在 两 种 情况 下 会 出 现 这 个 现象 ， 即 代码 执行 到 下 面 任意 一 种 情况 时 : 
口 try/catch 语句 的 catch 块 
口 with 语句 

这 两 种 情况 下 ， 都 会 在 作用 域 链 前 端 添加 一 个 变量 对 象 。 对 with 语句 来 说 ， 会 回 作 用 域 链 前 端 添 
加 指定 的 对 象 ; 对 catch 语句 而 言 ， 则 会 创建 一 个 新 的 变量 对 象 ， 这 个 变量 对 象 会 包含 要 抛 出 的 错误 
对 象 的 声明 。 看 下 面 的 例子 : 
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function buildUrl() { 
let qs = "?debug=true"; 


with(location)t 
let url = href + qs; 
} 


return url; 


} 

这 里 ，with 语句 将 location 对 象 作 为 上 下 文 ， 因 此 location 会 被 添加 到 作用 域 链 前 端 。 
builaUrl() 函数 中 定义 了 一 个 变量 as。 当 with 语句 中 的 代码 引用 变量 href 时 ， 实 际 上 引用 的 是 
location.href, 也 就 是 自己 变量 对 象 的 属性 。 在 引用 ss 时 ,引用 的 则 是 定义 在 puilaurl () 中 的 那 
个 变量 ， 它 定义 在 函数 上 下 文 的 变量 对 象 上 。 而 在 with 语句 中 使 用 var 声明 的 变量 url 会 成 为 函数 
上 下 文 的 一 部 分 , 可 以 作为 函数 的 值 被 返回 ; 但 像 这 里 使 用 let 声明 的 变量 url1， 因 为 被 限制 在 块 级 作 
用 域 ( 稍 后 介绍 )， 所 以 在 with 块 之 外 没有 定义 。 

























































































瑟 








注意 了 下 的 实现 在 IE8 之 前 是 有 偏差 的 ， 即 它们 会 将 catch 语句 中 捕获 的 错误 添加 到 执 
行 上 下 文 的 变量 对 象 上 ， 而 不 是 catch 语 和 多 的 变量 对 象 上 上， 导致 在 catch 块 外 部 都 可 以 


访问 到 错误 。IE9 纠正 了 这 个 问题 。 





4.2.2 ”变量 声明 


ES6 之 后 , JavaScript 的 变量 声明 经 历 了 翻天 覆 地 的 变化 。 直 到 ECMAScript 5.1，vaz 都 是 声明 变量 
的 唯一 关键 字 。ES6 不 仅 增 加 了 let 和 const 两 个 关键 字 ， 而 且 还 让 这 两 个 关键 字 压 倒 性 地 超越 var 
成 为 首选 。 

1. 使 用 var 的 函数 作用 域 声 明 

在 使 用 var 声明 变量 时 , 变量 会 被 自动 添加 到 最 接近 的 上 下 文 。 在 函数 中 , 最 接近 的 上 下 文 就 是 函 
数 的 局 部 上 下 文 。 在 with 语句 中 , 最 接近 的 上 下 文 也 是 也 数 上 下 文 。 如果 变量 未 经 声明 就 被 初始 化 了 ， 
那么 它 就 会 自动 被 添加 到 全 局 上 下 文 ， 如 下 面 的 例子 所 示 : 


function add(numl, num2) { 
Var sum = numl + num2; 
return sum; 


} 
































Jet result = add(10, 20); // 30 
console.1log (sum); // 报错 : sum 在 这 里 不 是 有 效 变量 


这 里 ， 函 数 aada () 定义 了 一 个 局 部 变量 sum， 保存 加 法 操作 的 结果 。 这 个 值 作为 函数 的 值 被 返回 ， 
但 变量 sum 在 函数 外 部 是 访问 不 到 的 。 如 果 省 略 上 面 例子 中 的 关键 字 var， 那 么 sum 在 aaa() 被 调用 
之 后 就 变 成 可 以 访问 的 了 ， 如 下 所 示 : 


function add(numl, num2) { 
sum = numl + num2; 
return sum; 


} 


























let result = add(10, 20); // 30 
console.log (sum); // 30 
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变量 sum 








被 








这 一 次 ， 





用 加 法 操作 的 结果 初始 化 时 并 没有 使 用 var 声明 。 在 调用 ada () 之 后 ，sum 


被 添加 到 了 全 局 上 下 文 ， 在 函数 退出 之 后 依然 存在 ， 从 而 在 后 面 可 以 访问 到 。 


RE 
壮 忌 


为 此 ， 读 者 在 初始 化 变量 之 前 一 定 要 先 声明 变量 。 在 严格 模式 下 ， 未 经 声 


会 报错 。 


未 经 声明 而 初始 化 变量 是 JavaScript 编程 中 一 个 非常 常见 的 错误 ,会 导致 很 多 问题 。 


明 就 初始 化 变量 








var 声明 会 被 拿 到 函数 或 全 


( hoisting )。 提升 让 同一 作用 域 中 的 代码 不 必 考 虑 变量 是 否 
升 也 会 导致 合法 却 奇怪 的 现象 , 即 在 变量 声 








价 的 代码 : 
Var name = "Uake" 
// 等 价 于 : 
name = 'Jake'; 
var name; 
下 面 是 两 个 等 价 的 函数 ; 
function fn1() { 
Var name = 'Jake'; 
} 
// 等 价 于 : 
function ‘FA 二 
Var name; 
name = 'Jake'; 
} 
通过 在 声明 之 前 打印 变量 ， 
Reference Error: 





console.log (name); 
var name 'Jake'; 


function() { 
console.log (name); 
Var name 'Jake'; 


} 


7 


局 作用 域 的 顶部 ， 位 于 作用 域 中 所 有 代码 之 前 。 这 个 现象 叫 作 “提升 ” 
已 经 声明 就 可 以 直接 使 用 。 可 是 在 实践 中 , 提 
下 面 的 例子 展示 了 在 全 局 作 











(e] 

















~ 二 
变量 。 











明之 前 使 用 


可 以 验证 变量 会 被 提升 。 声 明 的 提升 意味 着 会 输出 ungefineqd 而 不 是 


// undefined 


undefined 


2. 使 用 let 的 块 级 作用 域 声 明 

ES6 新 增 的 let 关键 字 跟 var 很 相似 ,但 它 的 作用 域 是 块 级 的 ， 这 也 是 JavaScript 中 的 新 概念 。 块 
级 作用 域 由 最 近 的 一 对 包含 花 括 号 {} 界 定 。 换 句 话说 ，if 块 、while 块 、function 块 ， 甚 至 连 单独 
的 块 也 是 let 声明 变量 的 作用 域 。 











3 下， 以 七 六 和 全 六 式 
let a; 
} 


console.1o0g(a); 


while (true) { 
let b; 
} 





// ReferenceError: a 没有 定义 


] 域 中 两 段 等 | 
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console.log(b); // ReferenceError: b 没有 定义 


function foo() { 
let c; 
} 
console.log(c); // ReferenceError: Cc 没有 定义 
// 这 没什么 可 奇怪 的 
// var 声明 也 会 导致 报错 


// 这 不 是 对 象 字 面 量 ， 而 是 一 个 独立 的 块 
// JavaScript 解释 器 会 根据 其 中 内 容 识别 出 它 来 
{ 
let qd; 
} 


console.log(d); // ReferenceError: d 没有 定义 
let 与 var 的 男 一 个 不 同 之 处 是 在 同一 作用 域内 不 能 声明 两 次 。 重 复 的 var 声明 会 被 忽略 ， 而 重 
复 的 let 声明 会 抛 出 SyntaxErroro 


Var a 
Var as 
// 不 会 报错 








{ 
let b; 
let b; 
} 
// SyntaxError: 标识 符 b 已 经 声明 过 了 


let 的 行为 非常 适合 在 循环 中 声明 迭代 变量 。 使 用 var 声明 的 迭代 变量 会 泄漏 到 循环 外 部 , 这 种 情 
况 应 该 避免 。 来 看 下 面 两 个 例子 : 


for (var i = 0; i < 10; ++i) {} 
console.log(i); // 10 











for (let j = 0; j < 10; ++j) {} 
console.1l0g(j); // ReferenceError: j 没有 定义 


严格 来 讨 ，let 在 JavaScript 运行 时 中 也 会 被 提升 , 但 由 于 “和 暂时 性 死 区 ”( temporal dead zone ) 的 
缘故 ， 实 际 上 不 能 在 声明 之 前 使 用 let 变量 。 因 此 ， 从 写 JavaScript 代码 的 角度 说 ，let 的 提升 跟 var 
是 不 一 样 的 。 

3. 使 用 const 的 常量 声明 

除了 1let，ES6 同时 还 增加 了 const 关键 字 。 使 用 const 声明 的 变量 必须 同时 初始 化 为 某 个 值 。 
一 经 声明 ， 在 其 生命 周期 的 任何 时 候 都 不 能 再 重新 赋予 新 值 。 


const a; // SyntaxError: 常量 声明 时 没有 初始 化 
































Const 有 三 3 
console.log(b); // 3 
pb = 4; // TypeError: 给 常量 赋值 


const 除了 要 遵循 以 上 规则 ， 其 他 方面 与 1et 声明 是 一 样 的 : 


if (true) { 
const a = 








0; 
} 


console.log(a); // ReferenceError: a 没有 定义 
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while (true) { 
Sonst -BD "13 


} 


console.1log(b); 


function foo() { 
CONSt C= 2 
} 


console.1og(c); 


{ 
Const. de.33 
} 


console.1o0g(d); 





为 其 他 引用 值 ， 但 对 象 的 键 则 不 受 限制 。 





CONnst. Ol 全 Ey 

ol = {}; // TypeError: 给 常量 赋值 
CONnst. OB2. {hs 

o2 .name = 'Jake'; 


console.log(o2.name); // 'Jake' 


// ReferenceError: d 没有 定义 


const 声明 只 应 用 到 顶级 原 语 或 者 对 象 。 换 句 话说， 赋值 为 对 象 的 const 变量 不 能 


// ReferenceError: b 没有 定义 


// ReferenceError: Cc 没有 定义 














如 果 想 让 整个 对 象 都 不 能 修改 , 可 以 使 用 object .freeze(), 这 样 再 给 属性 赋值 时 虽然 不 会 报错 ， 


但 会 静默 失败 : 
const o03 = Object.freeze({}); 
o3 .name = 'Jake'; 


console.log(o3.name); // undefined 








由 于 const 声明 暗示 变量 的 值 是 单一 类 型 且 不 可 修改 ，JavaScript 运行 时 编译 器 可 以 将 其 所 有 实例 
都 替换 成 实际 的 值 ， 而 不 会 通过 查询 表 进 行 变量 查找 。 谷 歌 的 V8 引擎 就 执行 这 种 优化 。 








注意 ”开发 实践 表明 ， 如 果 开 发 流程 并 不 会 因此 而 受 很 大 影响 ， 


就 应 该 尽 可 能 地 多 使 用 


const 声明 ,除非 确实 需要 一 个 将 来 会 重新 赋值 的 变量 。 这 样 可 以 从 根本 上 保证 提前 发 现 
重新 赋值 导致 的 bug。 





4. 标识 符 查找 











当 在 特定 上 下 文中 为 读 取 或 写 入 而 引用 一 个 标识 符 时 ,必须 通过 搜索 确定 这 个 标识 符 表示 什么 。 搜 
索 开 始 于 作用 域 链 前 端 ， 以 给 定 的 名 称 搜 索 对 应 的 标识 符 。 如 果 在 局 部 上 下 文中 找到 该 标识 符 ， 则 搜索 











停止 ， 变 量 确定 ; 如 果 没 有 找到 变量 名 ， 则 继续 沿 作 月 




















域 链 搜索 。( 注意 ， 作 用 域 链 中 的 对 象 也 有 一 个 











原型 链 ， 因 此 搜索 可 能 涉及 每 个 对 象 的 原型 链 。) 这 个 过 程 一 直 持续 到 搜索 至 全 局 上 下 文 的 变量 对 象 。 














如 果 仍 然 没 有 找到 标识 符 ， 则 说 明 其 未 声明 。 
为 更 好 地 说 明 标 识 符 查 找 ， 我 们 来 看 一 个 例子 : 


Var COLOr. ‘=; "BLUe” 


function getColor() { 
return color; 
} 


console.log(getColor()); // 'blue' 
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在 这 个 例子 中 ,调用 函数 getcolor () 时 会 引用 变量 color。 为 确定 color 的 值 会 进行 两 步 搜索 。 





第 一 步 ， 搜 索 getcolor () 的 变量 对 象 ， 查 找 名 为 color 的 标识 符 。 结 果 没 找到 ， 于 是 继续 搜索 下 一 


个 变量 对 象 (来 自 全 局 上 下 文 )， 然 后 就 找到 了 名 为 color 的 标识 符 。 因 为 全 局 变量 对 象 上 有 color 
的 定义 ， 所 以 搜索 结束 。 

















对 这 个 搜索 过 程 而 言 , 引用 局 部 变量 会 让 搜索 自动 停止 , 而 不 继续 搜索 下 一 级 变量 对 象 。 也 就 是 说 ， 








如 果 局 部 上 下 文中 有 一 个 同名 的 标识 符 , 那 就 不 能 在 该 上 下 文中 引用 父 上 下 文中 的 同名 标识 符 ， 如 下 面 
的 例子 所 示 : 


var color = 'blue'; 


function getColor() { 
let color = 'red'; 
return color; 


} 





console.log(getColor()); // 'red' 
使 用 块 级 作用 域 声明 并 不 会 改变 搜索 流程 ， 但 可 以 给 词法 层级 添加 额外 的 层次 : 
var color = 'blue'; 


function getColor() { 
let color = 'red'; 
{ 
let color = 'green'; 
return color; 
} 
} 


console.log(getColor()); // 'green' 


在 这 个 修改 后 的 例子 中 ,getcolor () 内 部 声明 了 一 个 名 为 color 的 局 部 变量 。 在 调用 这 个 函数 时 ， 
































变量 会 被 声明 。 在 执行 到 函数 返回 语句 时 ,代码 引用 了 变量 color。 于 是 开始 在 局 部 上 下 文中 搜索 这 个 
标识 符 ， 结果 找 到 了 值 为 'green ' 的 变量 color。 因 为 变量 已 找到 ,搜索 随即 停止 ,所 以 就 使 用 这 个 局 
部 变量 。 这 意味 着 函数 会 返回 ' green'。 在 局 部 变量 color 声明 之 后 的 任何 代码 都 无 法 访问 全 局 变量 
color， 除 非 使 用 完全 限定 的 写法 window.color。 


















































注意 ”标识 符 查找 并 非 没 有 代价 。 访 问 局 部 变量 比 访问 全 局 变量 要 快 ， 因 为 不 用 切换 作用 
域 。 不 过 ，JavaScript 引擎 在 优化 标识 符 查 找 上 做 了 很 多 工作 ， 将 来 这 个 差异 可 能 就 微 不 


RT 





4.3 垃圾 回收 








JavaScript 是 使 用 垃圾 回收 的 语言 ， 也 就 是 说 执行 环境 负责 在 代码 执行 时 管理 内 存 。 在 C 和 C++ 等 











语言 中 ， 跟 踪 内 存 使 用 对 开发 者 来 说 是 个 很 大 的 负担 ， 也 是 很 多 问题 的 来 源 。JavaScript 为 开发 者 印 下 
了 这 个 负担 ,通过 自动 内 存 管理 实现 内 存 分 配 和 闲置 资源 回收 。 基 本 思路 很 简单 : 确定 哪个 变量 不 会 再 


使 









































用 ， 然 后 释放 它 占 用 的 内 存 。 这 个 过 程 是 周期 性 的 ， 即 垃圾 回收 程序 每 隔 一 定时 间 (或 者 说 在 代码 执 











行 过 程 中 某 个 预定 的 收集 时 间 ) 就 会 自动 运行 。 垃 圾 回收 过 程 是 一 个 近似 且 不 完美 的 方案 ,因为 某 块 内 
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存 是 否 还 有 用 ,属于 “不 可 判定 的 ”问题 ， 意 味 着 靠 算法 是 解决 不 了 的 。 

我 们 以 函数 中 局 部 变量 的 正常 生命 周期 为 例 。 函数 中 的 局 部 变量 会 在 函数 执行 时 存在 。 此 时 , 栈 (或 
堆 ) 内 存 会 分 配 空 间 以 保存 相应 的 值 。 函 数 在 内 部 使 用 了 变量 ,然后 退出 。 此 时 ， 就 不 再 需要 那个 局 部 
变量 了 , 它 占用 的 内 存 可 以 释放 ， 供 后 面 使 用 。 这 种 情况 下 显然 不 再 需要 局 部 变量 了 , 但 并 不 是 所 有 时 
修 都 会 这 么 明显 。 垃 圾 回收 程序 必须 跟踪 记录 哪个 变量 还 会 使 用 ,以 及 哪个 变量 不 会 再 使 用 ,以 便 回收 
内 存 。 如 何 标记 未 使 用 的 变量 也 许 有 不 同 的 实现 方式 。 不 过 , 在 浏览 器 的 发 展 史上 , 用 到 过 两 种 主要 的 
标记 策略 : 标记 清理 和 引用 计数 。 


4.3.1 标记 清理 


JavaScript 最 常用 的 垃圾 回收 策略 是 标记 清理 ( mark-and-sweep )。 当 变量 进入 上 下 文 ， 比 如 在 函数 
内 部 声明 一 个 变量 时 ， 这 个 变量 会 被 加 上 存在 于 上 下 文中 的 标记 。 而 在 上 下 文中 的 变量 ， 逻 辑 上 讲 ， 永 
远 不 应 该 释放 它们 的 内 存 , 因为 只 要 上 下 文中 的 代码 在 运行 , 就 有 可 能 用 到 它们 。 当 变量 离开 上 下 文 时 ， 
也 会 被 加 上 离开 上 下 文 的 标记 。 

给 变量 加 标记 的 方式 有 很 多 种 。 比 如 ， 当 变量 进入 上 下 文 时 ， 反 转 某 一 位 ; 或 者 可 以 维护 “在 上 下 
文中 ”和 “不 在 上 下 文中 ”两 个 变量 列表 ， 可 以 把 变量 从 一 个 列表 转移 到 另 一 个 列表 。 标 记过 程 的 实现 
并 不 重要 ， 关 键 是 策略 。 

垃圾 回收 程序 运行 的 时 候 ， 会 标记 内 存 中 存储 的 所 有 变量 ( 记 住 ， 标 记 方 法 有 很 多 种 )。 然 后 ， 它 
会 将 所 有 在 上 下 文中 的 变量 , 以 及 被 在 上 下 文中 的 变量 引用 的 变量 的 标记 去 掉 。 在 此 之 后 再 被 加 上 标记 
的 变量 就 是 待 删除 的 了 , 原因 是 任何 在 上 下 文中 的 变量 都 访问 不 到 它们 了 。 随 后 垃圾 回收 程序 做 一 次 内 
存 清理 ， 销 毁 带 标记 的 所 有 值 并 收回 它们 的 内 存 。 

到 了 2008 年 , 下 、Firefox 、Opera 、Chrome 和 Safari 都 在 自己 的 JavaScript 实现 中 采用 标记 清理 (或 
其 变 体 )， 只 是 在 运行 垃圾 回收 的 频率 上 有 所 差异 。 


4.3.2 引用 计数 


另 一 种 没 那么 常用 的 垃圾 回收 策略 是 引用 计数 (reference counting )。 其 思路 是 对 每 个 值 都 记录 它 被 
引用 的 次 数 。 声 明 变量 并 给 它 赋 一 个 引用 值 时 ， 这 个 值 的 引用 数 为 1。 如 果 同 一 个 值 又 被 赋 给 另 一 个 变 
量 ， 那 么 引用 数 加 1。 类 似 地 ， 如 果 保 存 对 该 值 引 用 的 变量 被 其 他 值 给 覆盖 了 ， 那 么 引用 数 减 1。 当 一 
个 值 的 引用 数 为 0 时 ， 就 说 明 没 办 法 再 访问 到 这 个 值 了 ， 因 此 可 以 安全 地 收回 其 内 存 了 。 垃 圾 回收 程序 
下 次 运行 的 时 候 就 会 释放 引用 数 为 0 的 值 的 内 存 。 

引用 计数 最 早 由 Netscape Navigator 3.0 采用 ， 但 很 快 就 遇 到 了 严重 的 问题 : 循环 引用 。 所 谓 循环 引 
用 ， 就 是 对 象 A 有 一 个 指针 指向 对 象 B， 而 对 象 B 也 引用 了 对 象 A。 比 如 : 


function problem() { 
let objectA = new Object (); 
let objectB = new Object (); 























































































































































































































































































































































































































objectA.someOtherObject = objectB; 
objectB.anotherObject = objectA; 
} 


在 这 个 例子 中 ，objectA 和 objectB 通过 各 自 的 属性 相互 引用 ， 意 味 着 它们 的 引用 数 都 是 2。 在 
标记 清理 策略 下 , 这 不 是 问题 , 因为 在 函数 结束 后 , 这 两 个 对 象 都 不 在 作用 域 中 。 而 在 引用 计数 策略 下 ， 
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objectA 和 objectB 在 函数 结束 后 还 会 存在 ， 因 为 它们 的 引用 数 永 远 不 会 变 成 0。 如 果 函 数 被 多 次 调 
用 ， 则 会 导致 大 量 内 存 永远 不 会 被 释放 。 为 此 ，Netscape 在 4.0 版 放弃 了 引用 计数 ， 转 而 采用 标记 清理 。 
事实 上 ， 引 用 计数 策略 的 问题 还 不 止 于 此 。 

在 正 8 及 更 早 版 本 的 了 正中, 并 非 所 有 对 象 都 是 原生 JavaScript 对 象 。BOM 和 DOM 中 的 对 象 是 C+ 
实现 的 组 件 对 象 模型 (COM，Component Object Model ) 对 象 ， 而 COM 对 象 使 用 引用 计数 实现 垃圾 回 
收 。 因 此 ,即使 这 些 版 本 正 的 JavaScript 引擎 使 用 标记 清理 ，JavaScript 存 取 的 COM 对 象 依 旧 使 用 引用 
计数 。 换 句 话 说, 只 要 涉及 COM 对象 , 就 无 法 避 开 循环 引用 问题 。 下 面 这 个 简单 的 例子 展示 了 涉及 COM 
对 象 的 循环 引用 问题 : 


let element = document .getElementById("Some_element") ， 
let myObject = new Object (); 

myObject.element = element; 

element .someObject = myObject; 


这 个 例子 在 一 个 DOM 对 象 (element ) 和 一 个 原生 JavaScript 对 象 (myopbject ) 之 间 制 造 了 循环 
引用 。myobject 变量 有 一 个 名 为 element 的 属性 指向 DOM 对 象 element ， 而 element 对 象 有 一 个 
someObject 属性 指 回 myobject 对 象 。 由 于 存在 循环 引用 ， 因 此 DOM 元 素 的 内 存 永远 不 会 被 回收 ， 
即使 它 已 经 被 从 页 面 上 删除 了 也 是 如 此 。 

为 避免 类 似 的 循环 引用 问题 ， 应 该 在 确保 不 使 用 的 情况 下 切断 原生 JavaScript 对 象 与 DOM 元 素 之 
间 的 连接 。 比 如 ， 通 过 以 下 代码 可 以 清除 前 面 的 例子 中 建立 的 循环 引用 : 


myObject.element = null; 
element .someObject = null; 


把 变量 设置 为 nul1l 实际 上 会 切断 变量 与 其 之 前 引用 值 之 间 的 关系 。 当 下 次 垃圾 回收 程序 运行 时 ， 
这 些 值 就 会 被 删除 ， 内 存 也 会 被 回收 。 

为 了 补救 这 一 点 ，IE9 把 BOM 和 DOM 对 象 都 改 成 了 JavaScript 对 象 ， 这 同时 也 避免 了 由 于 存在 两 
套 垃圾 回收 算法 而 导致 的 问题 ， 还 消除 了 常见 的 内 存 泄 漏 现 象 。 
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注意 ”还 有 其 他 一 些 可 能 导致 循环 引用 的 情形 ， 本 书后 面 会 介绍 到 。 





4.3.3 性 能 


垃圾 回收 程序 会 周期 性 运行 ， 如 果 内 存 中 分 配 了 很 多 变量 ， 则 可 能 造成 性 能 损失 ， 因 此 垃圾 回收 的 
时 间 调 度 很 重要 。 尤 其 是 在 内 存 有 限 的 移动 设备 上 ， 垃 圾 回收 有 可 能 会 明显 拖 慢 泻 染 的 速度 和 帧 速率 。 
开发 者 不 知道 什么 时 候 运 行 时 会 收集 垃圾 ,因此 最 好 的 办 法 是 在 写 代 码 时 就 要 做 到 : 无 论 什 么 时 候 开 始 
收集 垃圾 ， 都 能 让 它 尽 快 结 束 工作 。 

现代 垃圾 回收 程序 会 基于 对 JavaScript 运行 时 环境 的 探测 来 决定 何 时 运行 。 探 测 机 制 因 引 擎 而 异 ， 
但 基本 上 都 是 根据 已 分 配对 象 的 大 小 和 数量 来 判断 的 。 比 如 ,根据 V8 团队 2016 年 的 一 篇 博文 的 说 法 : 
“在 一 次 完整 的 垃圾 回收 之 后 ,V8 的 堆 增 长 策略 会 根据 活跃 对 象 的 数量 外 加 一 些 余 量 来 确定 何 时 再 次 垃 
圾 回收 。” 
由 于 调度 垃圾 回收 程序 方面 的 问题 会 导致 性 能 下 降 , 正 曾 饱 受 诉 病 。 它 的 策略 是 根据 分 配 数 ， 比 如 
分 配 了 256 个 变量 、4096 个 对 象 /数组 字面 量 和 数组 槽 位 (slot ), 或 者 64KB 字符 串 。 只 要 满足 其 中 某 个 
条 件 ， 垃 圾 回收 程序 就 会 运行 。 这 样 实现 的 问题 在 于 ， 分 配 那么 多 变量 的 脚本 ,很 可 能 在 其 整个 生命 周 
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期 内 始终 需要 那么 多 变量 ， 结 果 就 会 导致 垃圾 回收 程序 过 于 频繁 地 运行 。 由 于 对 性 能 的 严重 影响 ， 卫 7 
最 终 更 新 了 垃圾 回收 程序 。 

IE7 发 布 后 ,JavaScript 引擎 的 垃圾 回收 程序 被 调 优 为 动态 改变 分 配 变 量 、 字 面 量 或 数组 槽 位 等 会 触 
发 垃圾 回收 的 阔 值 。IE7 的 起 始 阔 值 都 与 IE6 的 相同 。 如 果 垃 圾 回收 程序 回收 的 内 存 不 到 已 分 配 的 15%， 
这 些 变量 、 字 面 量 或 数组 槽 位 的 阅 值 就 会 翻 倍 。 如 果 有 一 次 回收 的 内 存 达 到 已 分 配 的 85%， 则 阐 值 重 置 


为 默认 值 。 这 么 一 个 简单 的 修改 ， 极 大 地 提升 了 重度 依赖 JavaScript 的 网 页 在 浏览 器 中 的 性 能 。 










































































警告 在 某 些 浏览 器 中 是 有 可 能 (但 不 推荐 ) 主动 触发 垃圾 回收 的 。 在 下 中 ，window. 
CollectGarbage () 方法 会 立即 触发 垃圾 回收 。 在 Opera7 及 更 高 版 本 中 ， 调 用 window. 


opera.collect () 也 会 启动 垃圾 回收 程序 。 





4.3.4 内 存 管理 


在 使 用 垃圾 回收 的 编程 环境 中 ， 开 发 者 通常 无 须 关 心 内 存 管理 。 不 过 ，JavaScript 运行 在 一 个 内 存 
管理 与 垃圾 回收 都 很 特殊 的 环境 。 分 配给 浏览 器 的 内 存 通常 比分 配给 桌面 软件 的 要 少 很 多 , 分 配给 移动 
浏览 器 的 就 更 少 了 。 这 更 多 出 于 安全 考虑 而 不 是 别 的 ， 就 是 为 了 避免 运行 大 量 JavaScript 的 网 页 耗 尽 系 
统 内 存 而 导致 操作 系统 裔 溃 。 这 个 内 存 限 制 不 仅 影响 变量 分 配 ,也 影响 调用 栈 以 及 能 够 同时 在 一 个 线程 
中 执行 的 语句 数量 。 

将 内 存 占用 量 保持 在 一 个 较 小 的 值 可 以 让 页 面 性 能 更 好 。 优化 内 存 占 用 的 最 佳 手段 就 是 保证 在 执行 
代码 时 只 保存 必要 的 数据 。 如 果 数 据 不 再 必要 ， 那 么 把 它 设置 为 nul1， 从 而 释放 其 引用 。 这 也 可 以 叫 
作 和 解除 引用 。 这 个 建议 最 适合 全 局 变量 和 全 局 对 象 的 属性 。 局 部 变量 在 超出 作用 域 后 会 被 自动 解除 引用 ， 
如 下 面 的 例子 所 示 : 


function createPerson(name){ 
let localPerson = new Object(); 
localPerson.name = name; 
return localPerson; 


} 
















































































let globalPerson = createPerson ("Nicholas"); 
// 解除 globalPerson 对 值 的 引用 


globalPerson = null; 

在 上 面 的 代码 中 , 变量 globalPerson 保存 着 createPerson () 函数 调用 返回 的 值 。 在 createPerson () 
内 部 ，localPerson 创建 了 一 个 对 象 并 给 它 添加 了 一 个 name 属性 。 然 后 ，localPerson 作为 也 数值 
被 返回 ， 并 被 赋值 给 gslobalPerson。localPerson 在 createPerson () 执行 完成 超出 上 下 文 后 会 自 
动 被 解除 引用 ， 不 需要 显 式 处 理 。 但 globalPerson 是 一 个 全 局 变量 ， 应 该 在 不 再 需要 时 手动 解除 其 
引用 ， 最 后 一 行 就 是 这 么 做 的 。 

不 过 要 注意 , 解除 对 一 个 值 的 引用 并 不 会 自动 导致 相 关内 存 被 回收 。 解 除 引用 的 关键 在 于 确保 相关 
的 值 已 经 不 在 上 下 文 里 了 ， 因 此 它 在 下 次 垃圾 回收 时 会 被 回收 。 

1. 通过 const 和 let 声明 提升 性 能 

ES6 增加 这 两 个 关键 字 不 仅 有 助 于 改善 代码 风格 ,而 且 同 样 有 助 于 改进 垃圾 回收 的 过 程 。 因 为 const 
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和 let 都 以 块 ( 而 非 函数 ) 为 作用 域 ， 所 以 相 比 于 使 用 var, 使 用 这 两 个 新 关键 字 可 能 会 更 早 地 让 垃圾 回 
收 程序 介入 , 尽早 回收 应 该 回收 的 内 存 。 在 块 作用 域 比 函 数 作用 域 更 早 终 止 的 情况 下 , 这 就 有 可 能 发 生 。 

2. 隐藏 类 和 删除 操作 

根据 JavaScript 所 在 的 运行 环境 ,有 时 候 需 要 根据 浏览 器 使 用 的 JavaScript 引擎 来 采取 不 同 的 性 能 优 
化 策略 。 截至 2017 年 , Chrome 是 最 流行 的 浏览 器 , 使 用 V8 JavaScript 引擎 。V8 在 将 解释 后 的 JavaScript 
代码 编译 为 实际 的 机 器 码 时 会 利用 “隐藏 类 ”。 如 果 你 的 代码 非常 注重 性 能 ， 那 么 这 一 点 可 能 对 你 很 
重要 。 

运行 期 间 ，V8 会 将 创建 的 对 象 与 隐藏 类 关联 起 来 ， 以 跟踪 它们 的 属性 特征 。 能 够 共享 相同 隐藏 类 
的 对 象 性 能 会 更 好 ，V8 会 针对 这 种 情况 进行 优化 ， 但 不 一 定 总 能 够 做 到 。 比 如 下 面 的 代码 : 


function Article() { 
this.title = 'Inauguration Ceremony Features Kazoo Band'; 


} 

































































let al 
let a2 


V8 会 在 后 台 配 置 ， 让 这 两 个 类 实例 共享 相同 的 隐藏 类 ， 因 为 这 两 个 实例 共享 同一 个 构造 函数 和 原 
型 。 假 设 之 后 又 添加 了 下 面 这 行 代码 : 

a2.author = 'Jake'; 

此 时 两 个 Article 实例 就 会 对 应 两 个 不 同 的 隐藏 类 。 根 据 这 种 操作 的 频率 和 隐藏 类 的 大 小 ， 这 有 
可 能 对 性 能 产生 明显 影响 。 

当然 ， 解 决 方案 就 是 避免 JavaScript 的 “ 先 创建 再 补充 ”( ready-fire-aim ) 式 的 动态 属性 赋值 ， 并 在 
构造 函数 中 一 次 性 声明 所 有 属性 ， 如 下 所 示 : 


function Article(opt_author) { 
this.title = 'Inauguration Ceremony Features Kazoo Band'; 
this.author = opt_author; 


} 


new Article(); 
new Article(); 

































































Jet al 
let a2 


这 样 , 两 个 实例 基本 上 就 一 样 了 (不 考虑 hasownProperty 的 返回 值 ), 因此 可 以 共享 一 个 隐藏 类 ， 
从 而 带 来 潜在 的 性 能 提升 。 不 过 要 记 住 , 使 用 aelete 关键 字 会 导致 生成 相同 的 隐藏 类 片段 。 看 一 下 这 
个 例子 : 


function Article() { 
this.title = 'Inauguration Ceremony Features Kazoo Band'; 
this.author = 'Jake'; 

} 


new Article(); 
new Article('Jake'); 























lJet al 
let a2 


new Article(); 
new Article(); 


delete al.author; 

在 代码 结束 后 ， 即 使 两 个 实例 使 用 了 同一 个 构造 函数 ， 它 们 也 不 再 共享 一 个 隐藏 类 。 动态 删除 属性 
与 动态 添加 属性 导致 的 后 果 一 样 。 最 佳 实践 是 把 不 想 要 的 属性 设置 为 nul1。 这 样 可 以 保持 隐藏 类 不 变 
和 继续 共享 ， 同 时 也 能 达到 删除 引用 值 供 垃圾 回收 程序 回收 的 效果 。 比 如 : 
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function Article() { 


this.title = 'Inauguration Ceremony Features Kazoo Band'; 
this.author = 'Jake'; 

} 

let al new Article(); 


let a2 new Article(); 


ALAauthor = muLLs 


3. 内 存 泄漏 

写 得 不 好 的 JavaScript 可 能 出 现 难以 察觉 是 有 害 的 内 存 泄漏 问题 。 在 内 存 有 限 的 设备 上 ， 或 者 在 函 
数 会 被 调用 很 多 次 的 情况 下 ， 内 存 泄漏 可 能 是 个 大 问题 。JavaScript 中 的 内 存 泄漏 大 部 分 是 由 不 合理 的 
引用 导致 的 。 

意外 声明 全 局 变量 是 最 常见 但 也 最 容易 修复 的 内 存 泄漏 问题 下面 的 代码 没有 使 用 任何 关键 字 声 明 


民 - 旦 . 
变量 : 
























































function setName() { 
name = 'Jake'; 


} 

此 时 ， 解 释 器 会 把 变量 name 当 作 window 的 属性 来 创建 (相当 于 window.name = 'Jake' )。 
可 想 而 知 ， 在 window 对 象 上 创建 的 属性 ， 只 要 window 本 身 不 被 清理 就 不 会 消失 。 这 个 问题 很 容易 
解决 ， 只 要 在 变量 声明 前 头 加 上 var 、1let 或 const 关键 字 即 可 ， 这 样 变 量 就 会 在 函数 执行 完毕 后 离 
开 作 用 域 。 
定时 器 也 可 能 会 悄悄 地 导致 内 存 泄漏 。 下 面 的 代码 中 ， 定 时 器 的 回调 通过 闭 包 引 用 了 外 部 变量 : 
let name = OUaker 7 
SetIinterval(() = 1 


console.1log (name); 
OO 


只 要 定时 器 一 直 运行 , 回调 函数 中 引用 的 name 就 会 一 直 占 用 内 存 。 垃圾 回收 程序 当然 知道 这 一 点 ， 
因而 就 不 会 清理 外 部 变量 。 
使 用 JavaScript 闭 包 很 容易 在 不 知 不 觉 间 造 成 内 存 汇 漏 。 请 看 下 面 的 例子 : 































































































let outer = function() { 
let name = 'Jake'; 
return function() { 


return name; 
}; 
}; 
调用 outer () 会 导致 分 配给 name 的 内 存 被 泄漏 。 以 上 代码 执行 后 创建 了 一 个 内 部 闭 包 ,只 要 返回 
的 函数 存在 就 不 能 清理 name， 因 为 闭 包 一 直 在 引用 着 它 。 假 如 name 的 内 容 很 大 (不止 是 一 个 小 字符 
串 )， 那 可 能 就 是 个 大 问题 了 。 
4. 静态 分 配 与 对 象 池 
为 了 提升 JavaScript 性 能 ， 最 后 要 考虑 的 一 点 往往 就 是 压榨 浏览 铝 了 。 此 时 ， 一 个 关键 问题 就 是 如 
何 减 少 浏览 器 执行 垃圾 回收 的 次 数 。 开 发 者 无 法 直接 控制 什么 时 候 开 始 收集 垃圾 , 但 可 以 间接 控制 触发 
垃圾 回收 的 条 件 。 理 论 上 ， 如 果 能 够 合理 使 用 分 配 的 内 存 ， 同 时 避免 多 余 的 垃圾 回收 ， 那 就 可 以 保住 因 
释放 内 存 而 损失 的 性 能 。 
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浏览 器 决定 何 时 运行 垃圾 回收 程序 的 一 个 标准 就 是 对 象 更 蔡 的 速度 。 如 果 有 很 多 对 象 被 初始 化 ， 然 
后 一 下 子 又 都 超出 了 作用 域 , 那么 浏览 器 就 会 采用 更 激进 的 方式 调度 垃圾 回收 程序 运行 ,这样 当然 会 影 
响 性 能 。 看 一 看 下 面 的 例子 ， 这 是 一 个 计算 二 维 矢量 加 法 的 函数 : 
function addVector(a, b) { 
let resultant = new Vector(); 
resultantsw a 4 Dx? 
resultant.y = a.y + b.y; 


return resultant; 


} 
调用 这 个 函数 时 ， 会 在 堆 上 创建 一 个 新 对 象 ， 然 后 修改 它 ， 最 后 再 把 它 返 回 给 调用 者 。 如 果 这 个 
矢量 对 象 的 生命 周期 很 短 ， 那 么 它 会 很 快 失 去 所 有 对 它 的 引用 ,成 为 可 以 被 回收 的 值 。 假如 这 个 矢量 
加 法 函数 频繁 被 调用 , 那么 垃圾 回收 调度 程序 会 发 现 这 里 对 象 更 蔡 的 速度 很 快 ， 从 而 会 更 频繁 地 安排 
垃圾 回收 。 
该 问题 的 解决 方案 是 不 要 动态 创建 矢量 对 象 ， 比 如 可 以 修改 上 面 的 函数 , 让 它 使 用 一 个 已 有 的 矢量 
对 象 : 
function addVectorl(a, b, resultant) { 
resultant.x = a.x + b.x; 
resultant.y = a.y + b.y; 


return resultant; 


} 
当然 ， 这 需要 在 其 他 地 方 实例 化 矢量 参数 resultant ， 但 这 个 函数 的 行为 没有 变 。 那 么 在 哪里 创 
建 矢 量 可 以 不 让 垃圾 回收 调度 程序 上 村 上 呢 ? 
个 策略 是 使 用 对 象 池 。 在 初始 化 的 某 一 时 刻 , 可 以 创建 一 个 对 象 池 , 用 来 管理 一 组 可 回收 的 对 象 。 
应 用 程序 可 以 向 这 个 对 象 池 请 求 一 个 对 象 、 设 置 其 属性 、 使 用 它 , 然后 在 操作 完成 后 再 把 它 还 给 对 象 池 。 
由 于 没 发 生 对 象 初始 化 , 垃圾 回收 探测 就 不 会 发 现 有 对 象 更 替 ,， 因此 垃圾 回收 程序 就 不 会 那么 频繁 地 运 
行 。 下 面 是 一 个 对 象 池 的 伪 实 现 : 


// vectorPool 是 已 有 的 对 象 池 
Jet v1 = VectorPool .allocate(): 






























































































































































Jet V2 = VectorPool .allocate():; 
Jet V3 = VectorPool .allocate():， 
Vl Os 
要 
VO 
Vom S67 


adgqVector (Vly “v2. v3); 
console.log([v3.x, v3.y]); // [7, -1] 


vectorPool.freel(vi); 
vectorPool.free(v2); 
vectorPool.free(v3); 


// 如 果 对 象 有 属性 引用 了 其 他 对 象 

// 则 这 里 也 需要 把 这 些 属 性 设置 为 null 
Wl -en ML Ly 

v2 null; 

V3 1 


1 1 1 
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如 果 对 象 池 只 按 需 分 配 矢量 (在 对 象 不 存在 时 创建 新 的 ,在 对 象 存在 时 则 复 用 存在 的 ) 那么 这 个 
实现 本 质 上 是 一 种 贪 焚 算 法 ， 有 单调 增长 但 为 静态 的 内 存 。 这 个 对 象 池 必 须 使 用 某 种 结构 维护 所 有 对 
象 ， 数 组 是 比较 好 的 选择 。 不 过 ， 使 用 数组 来 实现 ， 必 须 留意 不 要 招致 额外 的 垃圾 回收 。 比 如 下 面 这 
个 例子 : 


let vectorList = new Array(100); 
let Vector = new Vector(); 
vectorList.push(vector); 


由 于 JavaScript 数组 的 大 小 是 动态 可 变 的 ， 引 擎 会 删除 大 小 为 100 的 数组 ， 再 创建 一 个 新 的 大 小 为 
200 的 数组 。 垃 圾 回收 程序 会 看 到 这 个 删除 操作 ,说 不 定 因此 很 快 就 会 跑 来 收 一 次 垃圾 。 要 避免 这 种 动 
态 分 配 操作 ， 可 以 在 初始 化 时 就 创建 一 个 大 小 够 用 的 数组 ， 从 而 避免 上 述 先 删除 再 创建 的 操作 。 不 过 ， 
必须 事先 想 好 这 个 数组 有 多 大 。 



























































注意 ”静态 分 配 是 优化 的 一 种 极端 形式 。 如 果 你 的 应 用 程序 被 垃圾 回收 严重 地 拖 了 后 腿 ， 
可 以 利用 它 提升 性 能 。 但 这 种 情况 并 不 多 见 。 大 多 数 情况 下 ， 这 都 属于 过 早 优 化 ， 因 此 不 





4.4 小 结 


JavaScript 变量 可 以 保存 两 种 类 型 的 值 ， 原 始 值 和 引用 值 。 原 始 值 可 能 是 以 下 6 种 原始 数据 类 型 之 
一 : Undefined、Null、Boolean、Number、String 和 symbol。 原始 值 和 引用 值 有 以 下 特点 。 
口 原始 值 大 小 固定 ， 因 此 保存 在 栈 内 存 上 。 
口 从 一 个 变量 到 另 一 个 变量 复制 原始 值 会 创建 该 值 的 第 二 个 副本 。 
口 引用 值 是 对 象 ， 存 储 在 堆 内 存 上 。 
口 包含 引用 值 的 变量 实际 上 只 包含 指向 相应 对 象 的 一 个 指针 ， 而 不 是 对 象 本 身 。 
口 从 一 个 变量 到 另 一 个 变量 复制 引用 值 只 会 复制 指针 ， 因 此 结果 是 两 个 变量 都 指向 同一 个 对 象 。 
口 typeof 操作 符 可 以 确定 值 的 原始 类 型 ， 而 instanceof 操作 符 用 于 确保 值 的 引用 类 型 。 
任何 变量 (不管 包 含 的 是 原始 值 还 是 引用 值 ) 都 存在 于 某 个 执行 上 下 文中 (也 称 为 作用 域 )。 这 个 
上 下 文 (作用 域 ) 决定 了 变量 的 生命 周期 ， 以 及 它们 可 以 访问 代码 的 哪些 部 分 。 执 行 上 下 文 可 以 总 结 
如 下 。 
口 执行 上 下 文 分 全 局 上 下 文 、 函 数 上 下 文 和 块 级 上 下 文 。 
口 代码 执行 流 每 进入 一 个 新 上 下 文 ， 都 会 创建 一 个 作用 域 链 ， 用 于 搜索 变量 和 函数 。 
口 函数 或 块 的 局 部 上 下 文 不 仅 可 以 访问 自己 作用 域内 的 变量 ， 而 且 也 可 以 访问 任何 包含 上 下 文 乃 
至 全 局 上 下 文中 的 变量 。 
口 全 局 上 下 文 只 能 访问 全 局 上 下 文中 的 变量 和 函数 ， 不 能 直接 访问 局 部 上 下 文中 的 任何 数据 。 
口 变量 的 执行 上 下 文 用 于 确定 什么 时 候 释 放 内 存 。 

JavaScript 是 使 用 垃圾 回收 的 编程 语言 ， 开 发 者 不 需要 操心 内 存 分 配 和 回收 。JavaScript 的 垃圾 回收 
程序 可 以 总 结 如 下 。 
口 离开 作用 域 的 值 会 被 自动 标记 为 可 回收 ， 然 后 在 垃圾 回收 期 间 被 删除 。 
口 主流 的 垃圾 回收 算法 是 标记 清理 ， 即 先 给 当前 不 使 用 的 值 加 上 标记 ， 再 





































































































































































































来 回收 它们 的 内 存 。 








互 
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口 引用 计数 是 另 一 种 垃圾 回收 策略 ， 需 要 记录 值 被 引用 了 多 少 次 。JavaScript 引擎 不 再 使 用 这 种 算 

法 , 但 某 些 旧 版 本 的 下 仍然 会 受 这 种 算法 的 影响 ， 原 因 是 JavaScript 会 访问 非 原生 JavaScript 对 
象 (如 DOM 元 素 )。 

口 引用 计数 在 代码 中 存在 循环 引用 时 会 出 现 问题 。 

口 解除 变量 的 引用 不 仅 可 以 消除 循环 引用 ， 而 且 对 垃圾 回收 也 有 帮助 。 为 促进 内 存 回收 ， 全 局 对 
象 、 全 局 对 象 的 属性 和 循环 引用 都 应 该 在 不 需要 时 解除 引用 。 

























































































第 器 章 
基本 引用 类 型 


本 章 内 容 

口 理解 对 象 

口 基本 JavaScript 数据 类 型 
口 原始 值 与 原始 值 包装 类 型 











引用 值 〈 或 者 对 象 ) 是 某 个 特定 引用 类 型 的 实例 。 在 ECMAScript 中 ， 引 用 类 型 是 把 数据 和 功能 组 
织 到 一 起 的 结构 ， 经 常 被 人 错误 地 称 作 “类 ”。 虽 然 从 技术 上 讲 JavaScript 是 一 门面 向 对 象 语言 ， 但 
ECMAScript 缺少 传统 的 面向 对 象 编程 语言 所 具备 的 某 些 基本 结构 ,包括 类 和 接口 。 引 用 类 型 有 时 候 也 
被 称 为 对 象 定义 ， 因 为 它们 描述 了 自己 的 对 象 应 有 的 属性 和 方法 。 



































注意 引用 类 型 虽然 有 点 像 类 ,但 跟 类 并 不 是 一 个 概念 。 为 避免 混淆 ， 本 章 后 面 不 会 使 用 


术语 “类 ”。 














对 象 被 认为 是 某 个 特定 引用 类 型 的 实例 。 新 对 象 通过 使 用 new 操作 符 后 跟 一 个 构造 函数 ( constructor ) 
来 创建 。 构 造 函 数 就 是 用 来 创建 新 对 象 的 函数 ， 比 如 下 面 这 行 代码 : 

let now = new Date(); 

这 行 代码 创建 了 引用 类 型 Date 的 一 个 新 实例 ， 并 将 它 保存 在 变量 now 中 。Date () 在 这 里 就 是 构 
造 函 数 ， 它 负责 创建 一 个 只 有 默认 属性 和 方法 的 简单 对 象 。ECMAScript 提供 了 很 多 像 Date 这 样 的 原 
引用 类 型 ， 帮 助 开发 者 实现 常见 的 任务 。 















































全 请 





注意 ”函数 也 是 一 种 引用 类 型 ， 但 有 关 函 数 的 内 容 太 多 了 ， 一 章 放 不 下 ， 所 以 本 书 专门 用 


第 10 章 来 介绍 函数 。 





5.1 Date 





ECMAScript 的 Date 类 型 参考 了 Java 早期 版 本 中 的 java.util.Date。 为 此 ，Date 类 型 将 日 期 
保存 为 自 协 调 世 界 时 (UTC，Universal Time Coordinated ) 时 间 1970 年 1 月 1 日 午夜 ( 零 时 ) 至 今 所 
经 过 的 毫秒 数 。 使 用 这 种 存储 格式 ，Date 类 型 可 以 精确 表示 1970 年 1 月 1 日 之 前 及 之 后 285 616 年 的 
日 期 。 

要 创建 日 期 对 象 ， 就 使 用 new 操作 符 来 调用 Date 构造 函数 ， 


let now = new Date(); 
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在 不 给 Date 构造 函数 传 参数 的 情况 下 ,创建 的 对 象 将 保存 当前 日 期 和 时 间 。 要 基于 其 他 日 期 和 时 
间 创 建 日 期 对 象 ， 必 须 传 人 其 毫秒 表示 ( UNIX 纪元 1970 年 1 月 1 日 午夜 之 后 的 毫秒 数 ) ECMAScript 
为 此 提供 了 两 个 辅助 方法 : Date.parse() 和 Date.UTC() 。 

Date.parse() 方 法 接收 一 个 表示 日 期 的 字符 串 参 数 ， 尝 试 将 这 个 字符 串 转 换 为 表示 该 日 期 的 毫秒 
数 。ECMA-262 第 5 版 定义 了 Date.parse() 应 该 支持 的 日 期 格式 , 填充 了 第 3 版 遗留 的 空白 。 所 有 实 
现 都 必须 支持 下 列 日 期 格式 : 
口 “ 月 /日 /年 "， 如 "5/23/2019"; 
口 “ 月 名 日 ,年 ", 如 "May 23，2019"; 
口 “ 周 几 月 名 日 年 时 :分 : 秒 时 区 ”,， 如 "Tue May 23 2019 00:00:00 GMT-0700"; 
口 ISO 8601 扩展 格式 “YYYY-MM-DDTHH:mm:ss.sssZ”， 如 2019-05-23T00:00:00( 只 适用 于 
兼容 ES5 的 实现 )。 
比如 ， 要 创建 一 个 表示 “2019 年 5 月 23 日 ”的 日 期 对 象 ， 可 以 使 用 以 下 代码 : 

let someDate = new Date(Date.parse("May 23, 2019")); 

如 果 传 给 Date .parse() 的 字符 串 并 不 表示 日 期 , 则 该 方法 会 返回 NaN。 如 果 直 接 把 表示 日 期 的 字 
符 串 传 给 Date 构造 函数 ， 那 么 Date 会 在 后 台 调 用 Date .parse ()。 换 句 话 说 ,下面 这 行 代码 跟前 面 
那 行 代码 是 等 价 的 : 

let someDate = new Date("May 23, 2019"); 


这 两 行 代 码 得 到 的 日 期 对 象 相同 。 






















































































注意 ”不同 的 浏览 器 对 Date 类 型 的 实现 有 很 多 问题 。 比 如 ， 很 多 浏览 器 会 选择 用 当前 日 
期 蔡 代 越界 的 日 期 ， 因 此 有 些 浏览 器 会 将 "January 32，2019" 解 释 为 "February 1， 


2019"。Opera 则 会 插入 当前 月 的 当前 日 ， 返 回 "January 当前 日 ，2019"。 就 是 说 ， 如 
果 是 在 9 月 21 日 运行 代码 ,会 返回 "January 21，2019"。 

















Date.UTC() 方 法 也 返回 日 期 的 毫秒 表示 ,但 使 用 的 是 跟 Date .parse() 不 同 的 信息 来 生成 这 个 值 。 
传 给 Date .UTC() 的 参数 是 年 、 零 起 点 月 数 (1 月 是 0, 2 月 是 1， 以 此 类 推 )、 日 (1~31)、 时 (0~23 )、 
分 、 秒 和 毫秒 。 这 些 参 数 中 ， 只 有 前 两 个 (年 和 月 ) 是 必需 的 。 如 果 不 提供 日 ， 那 么 默认 为 1 日。 其 他 
参数 的 默认 值 都 是 0。 下 面 是 使 用 Date .UvUTCc () 的 两 个 例子 : 


// GMT 时 间 2000 年 1 月 1 日 索 点 
Jet y2k = new Date(Date.UTC(2000, 0)); 












































// GMT 时 间 2005 年 5 月 5 日 TF 午 5 点 55 分 55 秒 
Jet allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55)); 


这 个 例子 创建 了 两 个 日 期 。 第 一 个 日 期 是 2000 年 1 月 1 日 零点 (GMT )，2000 代表 年 ，0 代表 月 
(1 月 )。 因 为 没有 其 他 参数 (日 取 1， 其 他 取 0 )， 所 以 结果 就 是 该 月 第 1 天 零点 。 第 二 个 日 期 表示 2005 
年 5 月 5 日 下 午 5 点 55 分 55 秒 (GMT )。 虽然 日 期 里 面 涉及 的 都 是 5, 但 月 数 必须 用 4， 因 为 月 数 是 零 
起 点 的 。 小 时 也 必须 是 17, 因为 这 里 采用 的 是 24 小 时 制 , 即 取 值 范 围 是 0~23。 其 他 参数 就 都 很 直观 了 。 

与 Date.parse() 一 样 ，Date.UTC() 也 会 被 Date 构造 函数 隐 式 调用 ,但 有 一 个 区 别 : 这 种 情况 
下 创建 的 是 本 地 日 期 ， 不 是 GMT 日 期 。 不 过 Date 构造 函数 跟 Date.UTC () 接收 的 参数 是 一 样 的 。 
此 ， 如 果 第 一 个 参数 是 数值 ， 则 构造 函数 假设 它 是 日 期 中 的 年 , 第 二 个 参数 就 是 月 ， 以 此 类 推 。 前 面 的 
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例子 也 可 以 这 样 来 写 : 
// 本 地 时 间 2000 年 1 月 1 日 震 点 
let y2k = new Date(2000，0) 


// 本 地 时 间 2005 年 5 月 5 日 下 午 5 点 55 分 55 秒 
let allFives = new Date(2005, 4, 5, 17, 55, 55); 


以 上 代码 创建 了 与 前 面 例子 中 相同 的 两 个 日 期 , 但 这 次 的 两 个 日 期 是 (由 于 系统 设置 决定 的 ) 本 地 
时 区 的 日 期 。 

ECMAScript 还 提供 了 Date.now() 方 法 ,返回 表示 方法 执行 时 日 期 和 时 间 的 毫秒 数 。 这 个 方法 可 
以 方便 地 用 在 代码 分 析 中 : 

// 起 始 时 间 


let start = Date.now(); 






































// 调用 池 数 
doSomething(); 


结束 时 间 
let stop = Date.now!(), 
result = stop - start; 


5.1.1 继承 的 方法 


与 其 他 类 型 一 样 ，Date 类 型 重 写 了 toLocalestring() 、toSstring() 和 valueof () 方 法 。 但 与 
其 他 类 型 不 同 ， 重 写 后 这 些 方法 的 返回 值 不 一 样 。Date 类 型 的 toLocaleString() 方 法 返回 与 浏览 
运行 的 本 地 环境 一 致 的 日 期 和 时 间 。 这 通常 意味 着 格式 中 包含 针对 时 间 的 AM (上午 ) 或 PM (下 午 )， 
但 不 包含 时 区 信息 ( 具体 格式 可 能 因 浏览 器 而 不 同 ) toString () 方 法 通常 返回 带 时 区 信息 的 日 期 和 时 
间 ， 而 时 间 也 是 以 24 小 时 制 (0~23 ) 表示 的 。 下 面 给 出 了 toLocaleSstring() 和 tostring() 返 回 的 
2019 年 2 月 1 日 零点 的 示例 (地 区 为 "en-Us" 的 PST， 即 Pacific Standard Time， 太 平 洋 标准 时 间 ): 


toLocaleString() - 2/1/2019 12:00:00 AM 














































































































tostring() - Thu Feb 1 2019 00:00:00 GMT-0800 (Pacific Standard Time) 

现代 浏览 器 在 这 两 个 方法 的 输出 上 已 经 趋 于 一 致 。 在 比较 老 的 浏览 器 上 ,每 个 方法 返回 的 结果 可 能 
在 每 个 浏览 器 上 都 是 不 同 的 。 这 些 差异 意味 着 toLocalestring() 和 tostring() 可 能 只 对 调试 有 用 ， 
不 能 用 于 显示 。 

Date 类 型 的 valueof () 方 法 根本 就 不 返回 字符 串 ， 这 个 方法 被 重 写 后 返回 的 是 日 期 的 毫秒 表示 。 
因此 ， 操 作 符 ( 如 小 于 号 和 大 于 号 ) 可 以 直接 使 用 它 返回 的 值 。 比 如 下 面 的 例子 : 












































let datel = new Date(2019, 0, 1); // 2019 年 1 月 1 日 
let date2 = new Date(2019, 1, 1); // 2019 年 2 月 1 日 
console.log(datel < date2); // true 





console.log(datel > date2); // false 

日 期 2019 年 1 月 1 日 在 2019 年 2 月 1 日 之 前 , 所 以 说 前 者 小 于 后 者 没 问 题 。 因为 2019 年 1 月 1 日 
的 毫秒 表示 小 于 2019 年 2 月 1 日 的 毫秒 表示 ， 所 以 用 小 于 号 比较 这 两 个 日 期 时 会 返回 frue。 这 也 是 下 
保 日 期 先后 的 一 个 简单 方式 。 
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5.1.2 日 期 格式 化 方法 


Date 类 型 有 几 个 专门 用 于 格式 化 日 期 的 方法 ， 它 们 都 会 返回 字符 串 : 
口 topateString() 显 示 日 期 中 的 周 几 、 月 、 日 、 年 (格式 特定 于 实现 ); 
口 toTimeString() 显 示 日 期 中 的 时 、 分 、 秒 和 时 区 (格式 特定 于 实现 ); 

口 toLocaleDateString() 显 示 日 期 中 的 周 几 、 月 、 日 、 年 (格式 特定 于 实现 和 地 区 ); 
口 toLocaleTimeString() 显 示 日 期 中 的 时 、 分 、 秒 (格式 特定 于 实现 和 地 区 ); 

口 toUTcSstring () 显示 完整 的 UTC 日 期 (格式 特定 于 实现 )。 
这 
界 
























































这 些 方法 的 输出 与 toLocalestring() 和 tostring() 一 样 ， 会 因 浏览 器 而 异 。 因 此 不 能 用 于 在 
面 上 一 致 地 显示 日 期 。 




















注意 还 有 一 个 方法 叫 toGMTString() ， 这 个 方法 跟 toUTCString() 是 一 样 的 ， 目 的 


是 为 了 向 后 兼容 。 不 过 ， 规 范 建议 新 代码 使 用 toUTCString ()。 





5.1.3 “日 期 /时 间 组 件 方法 


Date 类 型 剩 下 的 方法 〈 见 下 表 ) 直接 涉及 取得 或 设置 日 期 值 的 特定 部 分 。 注 意 表 中 “UTC 日 期 ”， 
指 的 是 没有 时 区 偏 移 (将 日 期 转换 为 GMT ) 时 的 日 期 。 






















































































































































































方 ” 法 说 明 
getTime () 返回 日 期 的 毫秒 表示 ; 与 valueof () 相 同 
setTime (milliseconds) 设置 日 期 的 毫秒 表示 ， 从 而 修改 整个 日 期 
getFullYear () 返回 4 位 数 年 ( 即 2019 而 不 是 19 ) 
getUTCFullYear () 返回 UTC 日 期 的 4 位 数 年 
setFullYear (year) 设置 日 期 的 年 (year 必须 是 4 位 数 ) 
setUTCFu11Year (year) 设置 UTC 日 期 的 年 ( year 必须 是 4 位 数 ) 
getMonth () 返回 日 期 的 月 (0 表示 1 月 ，11 表 示 12 月 ) 
getUTCMonth () 返回 UTC 日 期 的 月 (0 表示 1 月 ，11 表示 12 月 ) 
setMonth (month) 设置 日 期 的 月 (month 为 大 于 0 的 数值 ， 大 于 11 加 年 ) 
setUTCMonth (month) 设置 UTC 日 期 的 月 (mont 为 大 于 0 的 数值 ， 大 于 11 加 年 ) 
getDate() 返回 日 期 中 的 日 (1~31) 
getUTCDate() 返回 UTC 日 期 中 的 日 (1~31) 
setDate (gate,) 设置 日 期 中 的 日 (如果 gate 大 于 该 月 天 数 ， 则 加 月 ) 
setUTCDate (date) 设置 UTC 日 期 中 的 日 (如果 gate 大 于 该 月 天 数 ， 则 加 月 ) 
getDay () 返回 日 期 中 表示 周 几 的 数值 (0 表示 周 日 ，6 表示 周 六 ) 
getUTCDay () 返回 UTC 日 期 中 表示 周 儿 的 数值 (0 表示 周 日 ，6 表示 周 六 ) 
getHours () 返回 日 期 中 的 时 ( 0~23 ) 
getUTCHours () 返回 UTC 日 期 中 的 时 〈0~23 ) 
setHours (hours) 设置 日 期 中 的 时 (如果 hours 大 于 23， 则 加 日 ) 
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( 续 ) 
方 ” 法 说 明 
setUTCHours (hours) 设置 UTC 日 期 中 的 时 (如果 hours 大 于 23， 则 加 日 ) 

























































































getMinutes () 返回 日 期 中 的 分 (0~59 ) 

getUTCMinutes () 返回 UTC 日 期 中 的 分 (0~59 ) 

setMinutes (minutes) 设置 日 期 中 的 分 ( 如果 minutes 大 于 59， 则 加 时 ) 
setUTCMinutes (minutes) 设置 UTC 日 期 中 的 分 ( 如果 minutes 大 于 59， 则 加 时 ) 
getSeconds () 返回 日 期 中 的 秒 ( 0~59 ) 

getUTCseconas () 返回 UTC 日 期 中 的 秒 (0-59 ) 

setSeconds (seconds) 设置 日 期 中 的 秒 ( 如 果 seconas 大 于 59， 则 加 分 ) 
setUTCSeconds (seconds) 设置 UTC 日 期 中 的 秒 ( 如果 seconas 大 于 59， 则 加 分 ) 
getMilliseconds () 返回 日 期 中 的 毫秒 

getUTCMilliseconds () 返回 UTC 日 期 中 的 毫秒 

setMilliseconds (milliseconds) 设置 日 期 中 的 毫秒 

setUTCMi1lliseconds (mil1liseconds) 设置 UTC 日 期 中 的 毫秒 








getTimezoneOffset () 











可 以 分 钟 计 的 UTC 与 本 地 时 区 的 偏 移 量 ( 如 美国 EST 即 “ 东 部 标准 时 间 ” 
可 300， 进 入 夏令 时 的 地 区 可 能 有 所 差异 ) 





























5.2 RegExp 





ECMAScript 通过 RegExp 类 型 支持 正则 表达 式 。 正 则 表达 式 使 用 类 似 Perl 的 简洁 语法 来 创建 : 

let expression = /pattern/flags; 

这 个 正则 表达 式 的 pattern (模式 ) 可 以 是 任何 简单 或 复杂 的 正则 表达 式 ， 包 括 字符 类 、 限 定 符 、 
分 组 、 向 前 查找 和 反 向 引用 。 每 个 正则 表达 式 可 以 带 零 个 或 多 个 flags (标记 )， 用 于 控制 正则 表达 式 
的 行为 。 下 面 给 出 了 表示 匹配 模式 的 标记 。 

口 g: 全 局 模式 ， 表 示 查 找 字 符 串 的 全 部 内 容 ， 而 不 是 找到 第 一 个 匹配 的 内 容 就 结束 。 

口 i: 不 区 分 大 小 写 ， 表 示 在 查找 匹配 时 忽略 pattern 和 字符 串 的 大 小 写 。 

口 m: 多 行 模式 ， 表 示 查 找到 一 行文 本 末尾 时 会 继续 查找 。 

口 y: 粘 附 模式 ， 表 示 只 查找 从 lastIndex 开始 及 之 后 的 字符 串 
口 u: Unicode 模式 ， 启 用 Unicode 匹配 。 

口 s: dotA1l 模式 ,表示 元 字符 .匹配 任何 字符 (包括 \n 或 \r )。 
使 用 不 同 模式 和 标记 可 以 创建 出 各 种 正则 表达 式 ， 比 如 : 


// 匹配 字符 囊 中 的 所 有 "at" 
let pattern1l = /at/g; 
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// 匹配 第 一 个 "bat "或 "cat"， 忽 略 大 小 写 
let pattern2 = /[bclat/i; 


// 匹配 所 有 以 "at "结尾 的 三 字符 组 会 ， 急 略 大 小 写 
let pattern3 = /.at/gi; 


与 其 他 语言 中 的 正则 表达 式 类 似 ， 所 有 元 字符 在 模式 中 也 必须 转 义 ， 包 括 : 
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tb 
元 字符 在 正则 表达 式 
杠 来 转 义 。 下 面 是 几 个 例子 : 


// 匹配 第 一 个 "bat" 或 "cat"， 
let patternl = /[bcljat/i; 


es 


























忽略 大 小 写 
// 匹配 第 一 个 " [bc] at"， 忽 略 大 小 写 
let pattern2 = NE 


// 匹配 所 有 以 "at" 结 


let pattern3 = 


尾 的 三 字符 组 合 ， 
/aygd2 





// 匹配 所 有 " .at 


let pattern4 = 


"， 忽 略 大 小 写 
/\.at/gi; 











这 里 的 pattern1l 匹配 "bat" 或 "cat"， 


须 像 pattern2 中 那样 使 用 反 斜 杠 转 义 。 在 pattern3 


如 果 想 匹配 " .at"， 


:都 有 一 种 或 多 种 特殊 功能 





忽略 大 小 写 





a 要 直接 匹配 " [bcjat" 





， 所 以 要 匹配 上 面 这 些 字 符 本 身 ， 就 必须 使 用 反 告 





， 左 右 中 括号 都 必 












































前 面 例子 中 的 正则 表达 式 都 是 使 用 字 有 了 
里 ， 它 接收 两 个 参数 : 模式 字符 串 和 ( 可 
以 通过 构造 函数 来 创建 ， 比 如 : 


// 匹配 第 一 个 "bat" 或 "cat"， 忽 略 大 小 写 
let patternl = /[bclat/i; 





























let pattern2 = new RegExp(" [bc]a 





这 里 的 patternl 和 pattern2 a 注意 ，RegE 
符 串 。 因 为 RegExp 的 模式 参数 是 字符 串 ， 所 以 在 某 些 情 况 下 需要 二 次 转 义 。 所 有 元 字符 都 必须 












































// 跟 patternl 一 样 ， ed dot 


nj 














义 , 包括 转 义 字符 序列 ， 如 \n( \ 转 义 后 的 字符 串 是 \\、， 在 正则 表达 式 字 符 串 中 则 要 写成 \\\\ )。 下 表 
展示 了 几 个 正则 表达 式 的 字面 量 形式 ， 以 及 使 用 





























RegExp 构造 也 数 创建 时 对 应 的 模式 字符 串 。 


， 点 号 表示 "at "前面 的 任意 字符 都 可 以 匹配 。 
那么 要 像 pattern4 ee 行 转 义 。 


j 量 形式 定义 的 。 正 则 表达 式 也 可 以 使 用 RegExp 构造 限 数 来 
选 的 ) 标记 字符 串 。 任 何 使 用 字面 量 定义 的 正则 表达 式 也 可 





xp 构造 函数 的 两 个 参数 都 是 字 


二 次 转 











字面 量 模式 对 应 的 字符 串 
/\[bc\Jat/ "\\[bc\\Jat 
NE A 
/name\/age/ "name\\/age" 
ZN NLL72}/ "\\d.\\a{1,2}" 
/\w\\hello\\123/ "\\w\\\\hello\\\\123" 





此 外 ,使 用 RegExp 也 可 以 基于 已 有 的 正则 表达 





const rel = /cat/g; 
console.log(rel); // "/cat/g" 
const re2 = new RegExp (rel); 
console.log(re2); // "/cat/g" 


const re3 = new RegExp (rel, "i"); 
console.log(re3); // "/cat/i" 








例 ， 并 可 选择 性 地 修改 它们 的 标记 : 


5.2 RegExp 109 





5.2.1 RegExp 实例 属性 

















每 个 RegExp 实例 都 有 下 列 属性 ， 提 供 有 关 模 式 的 各 方面 信 ， 








口 global: 布尔 值 ， 表 示 是 否 设置 了 g 标记 。 








省 




















口 unicode: 布尔 值 ， 表 示 是 否 设置 了 u 标记 
口 sticky: 布尔 值 ， 表 示 是 否 设置 了 y 标记 。 
口 lastIndex: 整数 ， 表 示 在 源 字 符 串 中 下 一 








口 ignoreCase: 布尔 值 ， 表 示 是 否 设置 了 i 标记 。 


o 


次 搜索 的 开始 位 置 ， 始 终 从 0 开始 。 

















口 dotAl1: 布尔 值 ， 表 示 是 否 设置 了 s 标记 。 





斜 杠 。 





口 multiline: 布尔 值 ， 表 示 是 否 设置 了 m 标记 。 


口 source: 正则 表达 式 的 字面 量 字符 串 ( 不 是 传 给 构造 函数 的 模式 字符 串 )， 没 有 开头 和 结尾 的 





有 前 后 斜 杠 )。 








口 flags: 正则 表达 式 的 标记 字符 串 。 始 终 以 字面 量 而 非 传人 构造 函数 的 字符 串 模 式 形式 返回 ( 没 

















通过 这 些 属性 可 以 全 面 了 解 正则 表达 式 的 信息 ， 
这 些 信息 。 下 面 是 一 个 例子 : 
let pattern1l = /\[bc\lat/i; 




















不 过 实际 开发 中 用 得 并 不 多 ， 因 为 模式 声明 中 包含 





console.log(patternl .global); // false 
console.log(patternl.ignoreCase); // true 
console.log(patternl.multiline); // false 
console.log(patternl.lastIndex); // 0 
console.log(patternl .source); A BeN\]at" 
console.log(patternl1.flags); A A 

let pattern2 = new RegExp("\\[bc\\lat", "i") 
console.log(pattern2.global); // false 
console.log(pattern2.ignoreCase); // true 
console.log(pattern2.multiline); // false 
console.log(pattern2.lastIndex); // 0 
console.log(pattern2.source); ee 
console.log(pattern2.flags); A 




















注意 ， 虽 然 第 一 个 模式 是 通过 字面 量 创建 的 ， 第 二 个 模式 是 通过 RegExp 构造 函数 创建 的 , 但 两 个 
模式 的 source 和 flags 属性 是 相同 的 。source 和 flags 属性 返回 的 是 规范 化 之 后 可 以 在 字面 量 中 





























使 用 的 形式 。 


5.2.2 RegExp 实例 方法 




















RegExp 实例 的 主要 方法 是 exec () ,主要 用 于 配合 捕获 组 使 用 。 这 个 方法 只 接收 一 个 参数 , 即 要 应 
用 模式 的 字符 串 。 如 果 找 到 了 匹配 项 ， 则 返回 包含 第 一 个 匹配 信息 的 数组 ; 如 果 没 找到 匹配 项 ， 则 返回 
null。 返 回 的 数组 虽然 是 Array 的 实例 ,但 包含 两 个 额外 的 属性 : indaex 和 input。ingex 是 字符 串 
中 匹配 模式 的 起 始 位 置 ，input 是 要 查找 的 字符 串 。 这 个 数组 的 第 一 个 元 素 是 匹配 整个 模式 的 字符 串 ， 













































































其 他 元 素 是 与 表达 式 中 的 捕获 组 匹配 的 字符 串 。 如 引 
下 面 的 例子 : 














模式 中 没有 捕获 组 ， 则 数组 只 包含 一 个 元 素 。 来 看 
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let text = "mom and dad and baby"; 
let pattern = /mom( and dad!( and baby)?)?/gi; 


let matches = pattern.exec (text); 


console.log (matches.index); // 0 

console.log (matches.input); // "mom and dad and baby" 
console.log (matches{[0]); // "mom and dad and baby" 
console.log (matches[1]); // " and dad and baby" 
console.log (matches[2]); /Xand baby" 





在 这 个 例子 中 , 模式 包含 两 个 捕获 组 : 最 内 部 的 匹配 项 " ang baby" ,以 及 外 部 的 匹配 项 " and gdag" 
或 " and dad and baby"。 调 用 exec () 后 找到 了 一 个 匹配 项 。 因 为 整个 字符 串 匹 配 模 式 ， 所 以 matchs 
数组 的 ingex 属性 就 是 0。 数 组 的 第 一 个 元 素 是 匹配 的 整个 字符 串 , 第 二 个 元 素 是 匹配 第 一 个 捕获 组 的 
字符 串 ， 第 三 个 元 素 是 匹配 第 二 个 捕获 组 的 字符 串 。 

如 果 模 式 设置 了 全 局 标记 ， 则 每 次 调用 exec ( ) 方法 会 返回 一 个 匹配 的 信息 。 如 果 没 有 设置 全 局 标 
记 ， 则 无 论 对 同一 个 字符 串 调用 多 少 次 exec () ， 也 只 会 返回 第 一 个 匹配 的 信息 。 


Let text EE "cat, baty sab fat’; 
let pattern = /.at/; 























LD 
























































let matches = pattern.exec (text); 


console.log(matches.index); // 0 
console.log (matches{[0]); // cat 
console.log(pattern.lastIndex); // 0 


matches = pattern.exec (text); 





console.log (matches.index); // 0 
console.log (matches[0]); // cat 
console.log(pattern.lastIndex); // 0 














上 面 例子 中 的 模式 没有 设置 全 局 标记 ,因此 调用 exec () 只 返回 第 一 个 匹配 项 ("cat" ),lastIndex 
在 非 全 局 模式 下 始终 不 变 。 
如 果 在 这 个 模式 上 设置 了 g 标记 ， 则 每 次 调用 exec () 都 会 在 字符 串 中 向 前 搜索 下 一 个 匹配 项 ， 如 
下 面 的 例子 所 示 : 


let” text .= “cat, bat, sat, tat"’; 
let pattern = /.at/g; 
let matches = pattern.exec (text); 






































console.log(matches.index); // 0 
console.log (matches[0]); // cat 
console.log(pattern.lastIndex); // 3 


matches = pattern.exec (text); 


console.log (matches.index); 7 3 
console.log (matches{[0]); // bat 
console.log(pattern.lastIndex); // 8 


matches = pattern.exec (text); 








console.log (matches.index); Za EO 
console.log (matches{[0]); // sat 
console.log(pattern.lastIndex); // 13 








这 次 模式 设置 了 全 局 标记 ， 因 此 每 次 调用 exec () 都 会 返回 字符 串 中 的 下 一 个 匹配 项 ， 直 到 搜索 到 
字符 串 末 尾 。 注 意 模式 的 1astIndex 属性 每 次 都 会 变化 。 在 全 局 匹配 模式 下 ， 每 次 调用 exec () 都 会 
更 新 lastIndex 值 ， 以 反映 上 次 匹配 的 最 后 一 个 字符 的 索引 。 
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如 果 模 式 设置 了 粘 附 标记 y, 则 每 次 调用 exec () 就 只 会 在 lastIndex 的 位 置 上 寻找 匹配 项 。 粘 附 
标记 和 覆盖 全 局 标记 。 


let text = "cat, bat, sat, fat"; 
let pattern = /.at/y; 





let matches = pattern.exec (text); 


console.log (matches.index); // 0 
console.log (matches{[0]); // cat 
console.log(pattern.lastIndex); Yah 


// 以 索引 3 对 应 的 字符 开头 找 不 到 匹配 项 ， 因 此 exec() 返 回 null 
// exec() 没 找到 匹配 项 ， 于 是 将 lastIndex 设置 为 0 

matches = pattern.exec (text); 

console.log (matches); 7 
console.log(pattern.lastIndex); // 0 





// 向 前 设置 lastIndex 可 以 让 粘 附 的 模式 通过 exec () 找 到 下 一 个 匹配 项 : 
pattern.lastIndex = 5; 
matches = pattern.exec (text); 


console.log(matches.index); /VY. 沪 
console.log (matches{[0]); // bat 
console.log(pattern.lastIndex); // 8 




















正则 表达 式 的 另 一 个 方法 是 test () ， 接 收 一 个 字符 串 参 数 。 如 果 输 入 的 文本 与 模式 匹配 ， 则 参数 
返回 true， 否则 返回 falseo es 只 想 测试 模式 是 否 匹 配 ， 而 不 需要 实际 匹配 内 容 的 情况 。 
test () 经 常用 在 if 语句 中 : 


let text = "000-00-0000" 
let pattern = /\d{3}-\d{2}-\d{4}/; 





if (pattern.test (text)) { 
console.log("The pattern was matched.");} 


} 


在 这 个 例子 中 , 正则 表达 式 用 于 测试 特定 的 数值 序列 。 如 果 输 入 的 文本 与 模式 匹配 ， 则 显示 匹配 成 
功 的 消息 。 这 个 用 法 常用 于 验证 用 户 输入 ， 此 时 我 们 只 在 乎 输入 是 否 有 效 ， 不 关心 为 什么 无 效 。 

无 论 正则 表达 式 是 怎么 创建 的 ， 继 承 的 方法 toLocaleString() 和 toString () 都 返回 正则 表达 
式 的 字面 量 表示 。 比 如 : 















































let pattern = new RegExp("\\[bc\\lat", "gi"); 
console.log(pattern.toSstring()); // /\[bc\Jat/gi 
console.log(pattern.toLocaleString()); // /\[bc\]Jat/gi 











这 里 的 模式 是 通过 RegExp 构造 函数 创建 的 ,但 toLocalestring() 和 tostring() 返 回 的 都 是 其 
字面 量 的 形式 。 




















注意 ”正则 表达 式 的 valueOf () 方 法 返回 正则 表达 式 本 身 。 





5.2.3 RegExp 构造 函数 属性 


RegExp 构造 函数 本 身 也 有 几 个 属性 。( 在 其 他 语言 中 ， 这 种 属性 被 称 为 静态 属性 。) 这 些 属 性 适用 
于 作用 域 中 的 所 有 正则 表达 式 , 而 且 会 根据 最 后 执行 的 正则 表达 式 操 作 而 变化 。 这 些 属性 还 有 一 个 特点 ， 
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就 是 可 以 通过 两 种 不 同 的 方式 访问 它们 。 换 句 话 说， 每 个 属性 都 有 一 个 全 名 和 一 个 简写 。 下 表 列 出 了 
RegExp 构造 函数 的 属性 。 














三 







































































全 名 简 写 说 明 
input 8 最 后 搜索 的 字符 串 ( 非 标 准 特性 ) 
lastMatch S& 最 后 匹配 的 文本 
lastParen $+ 最 后 匹配 的 捕获 组 ( 非 标 准 特 性 ) 
leftContext $. input 字符 串 中 出 现在 lastMatch 前 面 的 文本 
rightContext EE input 字符 串 中 出 现在 lastMatch 后 面 的 文本 
通过 这 些 属性 可 以 提取 出 与 exec () 和 test () 执行 的 操作 相关 的 信息 。 来 看 下 面 的 例子 : 





Jet text = "this has been a Short summer"; 
let pattern = /(.)hort/g; 


if (pattern.test (text)) { 


console.1log (RegExp.input); // this has been a short summer 
console.log (RegExp.leftContext); // this has been a 

console.log (RegExp.rightContext); // summer 

console.1log (RegExp.lastMatch); // short 

console.1log (RegExp.lastParen);} // S 


} 


以 上 代码 创建 了 一 个 模式 ， 用 于 搜索 任何 后 跟 "hort "的 字符 ， 并 把 第 一 个 字符 放 在 了 捕获 组 中 。 
不 同属 性 包含 的 内 容 如 下 。 
D input 属性 中 包含 原始 的 字符 串 。 

口 leftConext 属性 包含 原 台 字 符 串 中 "short "之 前 的 内 容 ， rightContext 属性 包含 "short" 
之 后 的 内 容 。 


口 lastMatch 












































属性 包含 匹配 整个 正则 表达 式 的 上 一 个 字符 串 ， 即 "short"。 

口 lastParen 属性 包含 捕获 组 的 上 一 次 匹配 ， 即 "s"。 

这 些 属性 名 也 可 以 蔚 换 成 简写 形式 ， 只 不 过 要 使 用 中 括号 语法 来 访问 ， 如 下 面 的 例子 所 示 ， 因 为 大 
多 数 简写 形式 都 不 是 合法 的 ECMAScript 标识 符 : 


Jet text = "this has been a Short summer"; 
lJet pattern = /(.)hort/g; 


ll 








三 


| 

















Bs 


























/* 
* 注意 : Opera 不 支持 简写 属性 名 
* IE 不 支持 多 行 匹配 


*/ 
if (pattern.test (text)) { 
console.log(RegExp.$ ); // this has been a short summer 
console.log (RegExp["$ "]); // this has been a 
console.log (RegExp["$'"]); // summer 
console.log (RegExp["$&"]); // short 
console.log (RegExp["$+"]); // S 


} 
RegExp 还 有 其 他 几 个 构造 函数 属性 ， 可 以 存储 最 多 9 个 捕获 组 的 匹配 项 。 这 些 属性 通过 RegExp. 
$1~RegExp.$9 来 访问 ， 分 别 包含 第 1~9 个 捕获 组 的 匹配 项 。 在 调用 exec () 或 test () 时 ， 这些 属 性 














ll 
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就 会 被 填充 ， 然 后 就 可 以 像 下 面 这 样 使 用 它们 : 
let text = "this has been a short summer"; 


let pattern = /(..)or(.)/g; 


if (pattern.test (text)) { 
console.log(RegExp.$1); // sh 
console.log(RegExp.$2); //t 
} 


在 这 个 例子 中 ,模式 包含 两 个 捕获 组 。 调 用 test () 搜索 字符 串 之 后 ， 因 为 找到 了 匹配 项 所 以 返回 
true， 而且 可 以 打印 出 通过 RegExp 构造 函数 的 $1 和 $2 属性 取得 的 两 个 捕获 组 匹配 的 内 容 。 

















注意 ”RegExp 构造 函数 的 所 有 属性 都 没有 任何 Web 标准 出 处 ,因此 不 要 在 生产 环境 中 使 





用 它们 








5.2.4 模式 局 限 


虽然 ECMAScript 对 正则 表达 式 的 支持 有 了 长 足 的 进步 ， 但 仍然 缺少 Perl 语言 中 的 一 些 高 级 特性 。 
下 列 特性 目前 还 没有 得 到 ECMAScript 的 支持 ( 想 要 了 解 更 多 信息 ， 可 以 参考 Regular-Expressions.info 
网 站 ): 
口 \A 和 \z 锚 (分 别 匹 配 字符 串 的 开始 和 末尾 ) 
口 联合 及 交叉 类 
口 原子 组 
口 x (忽略 空格 ) 匹配 模式 
口 条 件 式 匹 配 
口 正则 表达 式 注释 
虽然 还 有 这 些 局 限 ， 但 ECMAScript 的 正则 表达 式 已 经 非常 强大 ， 可 以 用 于 大 多 数 模式 匹配 任务 。 


5.3 ”原始 值 包 装 类 型 


为 了 方便 操作 原始 值 ，ECMAScript 提供 了 3 种 特殊 的 引用 类 型 : Boolean、Number 和 string。 
这 些 类 型 具有 本 章 介绍 的 其 他 引用 类 型 一 样 的 特点 , 但 也 具有 与 各 自 原始 类 型 对 应 的 特殊 行为 。 每 当 用 
到 某 个 原始 值 的 方法 或 属性 时 ， 后 台 都 会 创建 一 个 相应 原始 包装 类 型 的 对 象 , 从 而 暴露 出 操作 原始 值 的 
各 种 方法 。 来 看 下 面 的 例子 : 


let sl 
let s2 


在 这 里 ,sl 是 一 个 包含 字符 串 的 变量 , 它 是 一 个 原始 值 . 第 二 行 紧 接着 在 sl 上 调用 了 substring () 
方法 ， 并 把 结果 保存 在 s2 中 。 我 们 知道 ， 原 始 值 本 身 不 是 对 象 ， 因 此 逻辑 上 不 应 该 有 方法 。 而 实际 上 
这 个 例子 又 确实 按照 预期 运行 了 。 这 是 因为 后 台 进 行 了 很 多 处 理 ， 从 而 实现 了 上 述 操作 。 具 体 来 说 ， 当 
第 二 行 访问 sl 时 ， 是 以 读 模 式 访问 的 ， 也 就 是 要 从 内 存 中 读 取 变量 保存 的 值 。 在 以 读 模 式 访问 字符 串 
值 的 任何 时 候 ， 后 台 都 会 执行 以 下 3 步 : 

(1) 创建 一 个 string 类 型 的 实例 ; 











































































































"Some text"; 
sl.substring (2); 
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(2) 调用 实例 上 的 特定 方法 ; 
(3) 销毁 实例 。 
可 以 把 这 3 步 想 象 成 执行 了 如 下 3 行 ECMAScript 代码 : 


let sl = new String("some text"); 
let s2 = sl.substring(2); 
Se ls 


这 种 行为 可 以 让 原始 值 拥有 对 象 的 行为 。 对 布尔 值 和 数值 而 言 ， 以 上 3 步 也 会 在 后 台 发 生 ， 只 不 过 
使 用 的 是 Boolean 和 Number 包装 类 型 而 已 。 

引用 类 型 与 原始 值 包装 类 型 的 主要 区 别 在 于 对 象 的 生命 周期 。 在 通过 nevw 实例 化 引用 类 型 后 , 得 到 
的 实例 会 在 离开 作用 域 时 被 销毁 ， 而 自动 创建 的 原始 值 包装 对 象 则 只 存在 于 访问 它 的 那 行 代码 执行 期 
间 。 这 意味 着 不 能 在 运行 时 给 原始 值 添加 属性 和 方法 。 比 如 下 面 的 例子 : 





















































let sl = "some text"; 
Sl Color' = "EO" 
console.log(sl.color); // undefined 





这 里 的 第 二 行 代 码 尝 试 给 字符 串 sl 添加 了 一 个 color 属性 。 可 是 , 第 三 行 代码 访问 color 属性 时 ， 
它 却 不 见 了 。 原 因 就 是 第 二 行 代码 运行 时 会 临时 创建 一 个 string 对 象 ， 而 当 第 三 行 代码 执行 时 ， 这 个 对 
象 已 经 被 销毁 了 。 实 际 上 ， 第 三 行 代码 在 这 里 创建 了 自己 的 string 对 象 ， 但 这 个 对 象 没有 color 属性 。 
可 以 显 式 地 使 用 Boolean、Number 和 string 构造 函数 创建 原始 值 包装 对 象 。 不 过 应 该 在 确实 必 
要 时 再 这 么 做 ,否则 容易 让 开发 者 疑惑 ， 分 不 清 它们 到 底 是 原始 值 还 是 引用 值 。 在 原始 值 包装 类 型 的 实 
例 上 调用 typeof 会 返回 "object"， 所 有 原始 值 包装 对 象 都 会 转换 为 布尔 值 true。 

另外 ，opject 构造 函数 作为 一 个 工厂 方法 ， 能 够 根据 传人 值 的 类 型 返回 相应 原始 值 包 装 类 型 的 实 
例 。 比 如 : 


let obj = new Object ("some text"); 
console.log(obj instanceof String); // true 


如 果 传 给 object 的 是 字符 串 ， 则 会 创建 一 个 string 的 实例 。 如 果 是 数值 ， 则 会 创建 Number 的 
实例 。 布 尔 值 则 会 得 到 Boolean 的 实例 。 
注意 ， 使 用 new 调用 原始 值 包 装 类 型 的 构造 函数 ， 与 调用 同名 的 转型 函数 并 不 一 样 。 例 如 : 
































































































































Jet Value = "25"; 

let number = Number (value); // 转型 函数 
console.log(typeof number); // "number" 
let obj = new Number (value); // 构造 水 数 
console.log(typeof obj); 7 ODIECtEY 


在 这 个 例子 中 ， 变 量 number 中 保存 的 是 一 个 值 为 25 的 原始 数值 ， 而 变量 opj 中 保存 的 是 一 个 
Number 的 实例 。 
虽然 不 推荐 显 式 创建 原始 值 包装 类 型 的 实例 , 但 它们 对 于 操作 原始 值 的 功能 是 很 重要 的 。 每 个 原始 
值 包装 类 型 都 有 相应 的 一 套 方法 来 方便 数据 操作 。 























5.3.1 Boolean 








Boolean 是 对 应 布尔 值 的 引用 类 型 。 要 创建 一 个 Boolean 对 象 , 就 使 用 Boolean 构造 函数 并 传人 
true 或 false， 如 下 例 所 示 : 


let booleanObject = new Boolean(true); 
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Boolean 的 实例 会 重 写 valueof () 方 法 , 返回 一 个 原始 值 true 或 false。toSstring () 方 法 被 调 
用 时 也 会 被 覆盖 ， 返 回 字符 串 "true" 或 "false"。 不 过 ，Boolean 对 象 在 ECMAScript 中 用 得 很 少 。 
不 仅 如 此 ， 它 们 还 容易 引起 误会 ， 尤 其 是 在 布尔 表达 式 中 使 用 Boolean 对 象 时 ， 比 如 : 


let falseObject = new Boolean (false); 
let result = falseObject && true; 
console.log(result); // true 









































let falseValue = false; 
result = falseValue && true; 
console.log(result); // false 


在 这 段 代码 中 ,我 们 创建 一 个 值 为 false 的 Boolean 对 象 。 然后 ,在 一 个 布尔 表达 式 中 通过 && 操 
作 将 这 个 对 象 与 一 个 原始 值 true 组 合 起 来 。 在 布尔 算术 中 ，false && true 等 于 false。 可 是 , 这 
个 表达 式 是 对 falseObject 对 象 而 不 是 对 它 表 示 的 值 ( false ) 求 值 。 前 面 刚 刚 说 过 ， 所 有 对 象 在 布 
尔 表达 式 中 都 会 自动 转换 为 true, 因此 falseobject 在 这 个 表达 式 里 实际 上 表示 一 个 true 值 。 那么 
true && true 当然 是 true。 

除 此 之 外 ， 原 始 值 和 引用 值 ( Boolean 对 象 ) 还 有 几 个 区 别 。 首 先 ，typeof 操作 符 对 原始 值 返回 
"boolean" ， 但 对 引用 值 返 回 "object"。 同 样 ，Boolean 对 象 是 Boolean 类 型 的 实例 ， 在 使 用 
instaceof 操作 符 时 返回 Erue， 但 对 原始 值 则 返回 false， 如 下 所 示 : 




































































console.log(typeof falseObject); // object 
console.log(typeof falseValue); // boolean 
console.log(falseObject instanceof Boolean); // true 
console.log(falseValue instanceof Boolean); // false 








理解 原始 布尔 值 和 Boolean 对 象 之 间 的 区 别 非常 重要 ， 强 烈 建议 永远 不 要 使 用 后 者 。 


5.3.2 ”Number 


Number 是 对 应 数值 的 引用 类 型 。 要 创建 一 个 Number 对 象 ， 就 使 用 Number 构造 函数 并 传人 一 个 
数值 ， 如 下 例 所 示 : 


let numberObject = new Number (10); 


























与 Boolean 类 型 一 样 ，Number 类 型 重 写 了 valueof ()、toLocaleString() 和 和 toString() 方 





























法 。valueof () 方 法 返回 Number 对 象 表示 的 原始 数值 ， 另 外 两 个 方法 返回 数值 字符 串 。 tOoOStrirne() 
方法 可 选 地 接收 一 个 表示 基数 的 参数 ， 并 返回 相应 基数 形式 的 数值 字符 串 ， 如 下 所 示 : 

let num = 10; 

console.log (num.toString()); AL “lO 

console.log(num.toString(2)); // "1010 

console.log (num.toString(8)); // "12" 

console.log(num.toString(10)); // "10 

console.log(num.toString(16)); // "a 











除了 继承 的 方法 ，Number 类 型 还 提供 了 几 个 用 于 将 数值 格式 化 为 字符 串 的 方法 。 
toFixed() 方 法 返回 包含 指定 小 数 点 位 数 的 数值 字符 串 ， 如 : 


let num = 10; 
console.log (num.toFixed(2)); // "10.00" 


这 里 的 toFixed() 方 法 接收 了 参数 2， 表 示 返 回 的 数值 字符 串 要 包含 两 位 小 数 。 结 果 返 回 值 为 
"10.00"， 小 数位 填充 了 0。 如 果 数 值 本 身 的 小 数位 超过 了 参数 指定 的 位 数 ， 则 四 舍 五 和 人 到 最 接近 的 
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小 数位 : 
let num = 10.005; 
console.log (num.toFixed(2)); // "10.01" 


toFixed() 自动 舍 入 的 特点 可 以 用 于 处理 货币 。 不 过 要 注意 的 是 , 多 个 浮 点 数值 的 数学 计算 不 一 定 
得 到 精确 的 结果 。 比 如 ,0.1 + 0.2 = 0.30000000000000004。 




















注意 toFixed() 方 法 可 以 表示 有 0~20 个 小 数位 的 数值 。 某 些 浏览 器 可 能 支持 更 大 的 范 








园 ， 但 这 是 通常 被 支持 的 范围 。 





另 一 个 用 于 格式 化 数值 的 方法 是 foExponential () ， 返 回 以 科学 记 数 法 〈 也 称 为 指数 记 数 法 ) 表 
示 的 数值 字符 串 。 与 toFixed() 一 样 ，toExponential () 也 接收 一 个 参数 ， 表 示 结 果 中 小 数 的 位 数 。 
来 看 下 面 的 例子 : 


let num = 10; 
console.log (num.toExponential(1)); // "1.0e+1" 


这 段 代 码 的 输出 为 "1 .0e+1"。 一般 来 说 ， 这 么 小 的 数 不 用 表示 为 科学 记 数 法 形式 。 如 果 想 得 到 数 
值 最 适当 的 形式 ， 那 么 可 以 使 用 toprecision()。 

topPrecision() 方 法 会 根据 情况 返回 最 合理 的 输出 结果 ， 可 能 是 固定 长 度 ， 也 可 能 是 科学 记 数 法 
形式 。 这 个 方法 接收 一 个 参数 ， 表 示 结 果 中 数字 的 总 位 数 (不 包含 指数 )。 来 看 几 个 例子 : 


let num = 99; 

console.log (num.toPrecision(1)); // "le+2" 
console.log (num.toPrecision(2)); // "99" 
console.log (num.toPrecision(3)); // "99.0" 


在 这 个 例子 中 ， 首 先 要 用 1 位 数字 表示 数值 99， 得 到 "1e+2"， 也 就 是 100。 因 为 99 不 能 只 用 1 位 
数字 来 精确 表示 ， 所 以 这 个 方法 就 将 它 舍 人 为 100， 这 样 就 可 以 只 用 1 位 数字 ( 及 其 科学 记 数 法 形式 ) 
来 表示 了 。 用 2 位 数字 表示 99 得 到 "99"， 用 3 位 数字 则 是 "99.0"。 本 质 上 ，toPrecision() 方 法 会 
根据 数值 和 精度 来 决定 调用 toFixed () 还 是 togxponential()。 为 了 以 正确 的 小 数位 精确 表示 数值 ， 
这 3 个 方法 都 会 向 上 或 向 下 舍 人 。 









































































































































注意 topPrecision() 方 法 可 以 表示 带 1~21 个 小 数位 的 数值 。 某 些 浏览 器 可 能 支持 更 大 








的 范围 ， 但 这 是 通常 被 支持 的 范围 。 














与 Boolean 对 象 类 似 ,，Number 对 和 象 也 为 数值 提供 了 重要 能 力 。 但 是 , 考虑 到 两 者 存在 同样 的 潜在 
问题 ,因此 并 不 建议 直接 实例 化 Number 对 象 , 在 处 理 原始 数值 和 引用 数值 时 ,typeof 和 instacnceof 
操作 符 会 返回 不 同 的 结果 ， 如 下 所 示 : 


let numberObject = new Number (10); 
Jet numberValue = 10; 


























console.log(typeof numberObject); /OBIEet 
console.log(typeof numberValue); // "number" 
console.log (numberObject instanceof Number); // true 
console.log (numberValue instanceof Number); // false 

















原始 数值 在 调用 typeof 时 始终 返回 "number" ,而 Number 对 象 则 返回 "object"。 类 似 地 ,Number 
对 象 是 Number 类 型 的 实例 ， 而 原始 数值 不 是 。 
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isInteger () 方 法 与 安全 整数 
ES6 新 增 了 Number .isInteger() 方 法 , 用 于 辨别 一 个 数值 是 否 保存 为 整数 。 有 时 候 , 小 数位 的 0 
可 能 会 让 人 误 以 为 数值 是 一 个 浮 点 值 : 


























console.log (Number.isInteger (1)); // true 
console.log (Number.isInteger(1.00)); // true 
console.log (Number.isInteger(1.01)); // false 








ey 








IEEE 754 数值 格式 有 一 个 特殊 的 数值 范围 , 在 这 个 范围 内 二 进 制 值 可 以 表示 一 个 整数 值 。 这 个 数值 
范围 从 Number .MIN_SAFE_INTEGER ( -2+1 ) 到 Number .MAX_SAFE_INTEGER (22 -1 )。 对 超出 这 
个 范围 的 数值 ， 即使 尝试 保存 为 整数 , IEEE 754 编码 格式 也 意味 着 二 进 制 值 可 能 会 表示 一 个 完全 不 同 的 
数值 。 为 了 鉴别 整数 是 否 在 这 个 范围 内 ， 可 以 使 用 Number .issafeInteger () 方 法 : 













































































console.log (Number.isSafeInteger(-1 * (2 xx 53))); // false 
console.log (Number.isSafeInteger(-1 * (2 ** 53) + 1)); // true 
console.log (Number.isSafeInteger(2 xx 53)); // false 
console.log (Number.isSafeInteger((2 ** 53) - 1)); // true 





5.3.3 String 


string 是 对 应 字符 串 的 引用 类 型 。 要 创建 一 个 string 对 象 ， 使 用 string 构造 函数 并 传人 一 个 
数值 ， 如 下 例 所 示 : 

let stringObject = new String("hello world"); 

String 对 象 的 方法 可 以 在 所 有 字符 串 原始 值 上 调用 ,3 个 继承 的 方法 valueof () 、toLocalestring() 
和 toString () 都 返回 对 象 的 原始 字符 串 值 。 

每 个 String 对 象 都 有 一 个 length 属性 ， 表 示 字 符 串 中 字符 的 数量 。 来 看 下 面 的 例子 : 


let stringValue = "hello world"; 
console.log(stringValue.length); // "11" 


这 个 例子 输出 了 字符 串 "hello world" 中 包含 的 字符 数量 : 11。 注 意 ， 即 使 字符 串 中 包含 双 字 节 
字符 ( 而 不 是 单字 节 的 ASCI 字 符 )， 也 仍然 会 按 单字 符 来 计数 。 

String 类 型 提供 了 很 多 方法 来 解析 和 操作 字符 串 。 

1. JavaScript 字符 

JavaScript 字符 串 由 16 位 码 元 ( code unit ) 组 成 。 对 多 数字 符 来 说 ， 每 16 位 码 元 对 应 一 个 字符 。 换 
句 话说 ， 字 符 串 的 1ength 属性 表示 字符 串 包含 多 少 16 位 码 元 : 


let message = "abcde"; 













































































console.log(message.length); // 5 
此 外 ，charat () 方 法 返回 给 定 索引 位 置 的 字符 ， 由 传 给 方法 的 整数 参数 指定 。 具 体 来 说 ， 这 个 方 
法 查找 指定 索引 位 置 的 16 位 码 元 ， 并 返回 该 码 元 对 应 的 字符 : 


let message = "abcde"; 



































console.1og(message.charAt(2)); // "c" 
JavaScript 字符 串 使 用 了 两 种 Unicode 编码 混合 的 策略 : UCS-2 和 UTF-16。 对 于 可 以 采用 16 位 编码 
的 字符 (U+0000~U+FFFF )， 这 两 种 编码 实际 上 是 一 样 的 。 





























注意 要 深入 了 解 关于 字符 编码 的 内 容 ， 推 荐 Joel Spolsky 写 的 博客 文章 :“The Absolute 
Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and 
Character Sets (No Excuses!)” 


另 一 个 有 用 的 资源 是 Mathias Bynens 的 博文 :“JavaScript’s Internal Character Encoding: 
UCS-2 or UTF-16?”。 











使 用 charcodeAt () 方 法 可 以 查看 指定 码 元 的 字符 编码 。 这 个 方法 返回 指定 索引 位 置 的 码 元 值 , 索 
引 以 整数 指定 。 比 如 : 


let message = "abcde"; 





// Unicode "Latin small letter C" 的 编码 是 U+0063 
console.log (message.charCodeAt (2)); // 99 


// 十 进 制 99 等 于 十 六 进 制 63 

console.10g(99 === 0x63); // true 

fromCharCode() 方 法 用 于 根据 给 定 的 UTF-16 码 元 创建 字符 串 中 的 字符 。 这 个 方法 可 以 接受 任 ; 
多 个 数值 ， 并 返回 将 所 有 数值 对 应 的 字符 拼接 起 来 的 字符 串 : 


// Unicode "Latin small letter A" 的 编码 是 U+0061 
// Unicode "Latin small letter B" 的 编码 是 U+0062 
// Unicode "Latin small letter C" 的 编码 是 U+0063 
D 
E 








省 











// Unicode "Latin small letter D" 的 编码 是 U+0064 
// Unicode "Latin small letter 了 "的 编码 是 U+0065 





console.log(String.fromCharCode (0x61, 0x62, 0x63, 0x64, 0x65)); // "abcde" 
人 大 OKOO06L as-97 

/7 0X0062 S==..98 

/OO063. = 09 

LT 证 0064 sas, ,1.0.0 

7 OKOOOGD, SSeS .101 

console.log(String.fromCharCode(97, 98, 99, 100, 101)); // "abcde" 





对 于 U+0000~U+FFFF 范围 内 的 字符 ，length、charAt ()、charCodeAt () 和 fromCcharcode () 
返回 的 结果 都 跟 预期 是 一 样 的 。 这 是 因为 在 这 个 范围 内 ， 每 个 字符 都 是 用 16 位 表示 的 ， 而 这 几 个 方法 
也 都 基于 16 位 码 元 完成 操作 。 只 要 字符 编码 大 小 与 码 元 大 小 一 一 对 应 ， 这 些 方法 就 能 如 期 工作 。 

这 个 对 应 关系 在 扩展 到 Unicode 增补 字符 平面 时 就 不 成 立 了 。 问 题 很 简单 ， 即 16 位 只 能 唯一 表示 
65 536 个 字符 。 这 对 于 大 多 数 语言 字符 集 是 足够 了 ， 在 Unicode 中 称 为 基本 多 语言 平面 (BMP )。 为 了 
表示 更 多 的 字符 ，Unicode 采用 了 一 个 策略 ， 即 每 个 字符 使 用 男 外 16 位 去 选择 一 个 增补 平面 。 这 种 每 个 
字符 使 用 两 个 16 位 码 元 的 策略 称 为 代理 对 。 

在 涉及 增补 平面 的 字符 时 ， 前面 讨论 的 字符 串 方法 就 会 出 问题 。 比 如 ， 下 面 的 例子 中 使 用 了 一 个 笑 
脸 表 情 符号 ， 也 就 是 一 个 使 用 代理 对 编码 的 字符 : 


// "smiling face with smiling eyes" 表情 符号 的 编码 是 U+1F60A 























ey 




































































天 RD 六 -二 三 |Z8522 
let message = "ab®de"; 
console.log(message.length); // 6 


console.log (message.charAt (1)); // Pb 
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console.log (message.charAt (2) ) ; AA 

console.log (message.charAt (3) ) ; 1 

console.log (message.charAt (4)); A/*qd 

console.log (message.charCodeAt (1)); // 98 

console.log (message.charCodeAt (2) ) ; LSS 

console.log (message.charCodeAt (3) ) ; 8 

console.log (message.charCodeAt (4) ) ; // 100 

console.log(String.fromCodePoint (0x1lF60A)); // © 

console.log(String.fromCharCode(97, 98, 55357, 56842, 100, 101)); // abede 

这 些 方法 仍然 将 16 位 码 元 当 作 一 个 字符 ， 事 实 上 索引 2 和 索引 3 对 应 的 码 元 应 该 被 看 成 一 个 代理 
对 ， 只 对 应 一 个 字符 。fromcharcode () 方 法 仍然 返回 正确 的 结果 ， 因 为 它 实 际 上 是 基于 提供 的 二 进 制 

















表示 直接 组 合成 字符 串 。 浏 览 器 可 以 正确 解析 代理 对 ( 由 两 个 码 元 构成 )， 并 正确 地 将 其 识别 为 一 个 
Unicode 笑脸 字符 。 

en 可 以 使 用 coqePointat () 来 代替 
charCodeAt () 。 跟 使 用 charcodeAt () 时 类 似 ，codePointAt () 接收 16 位 码 元 的 索引 并 返回 该 索引 
位 置 上 的 码 点 0 point )。 码 点 是 Unicode 中 一 个 字符 的 完整 标识 。 比 如 ，"c "的 码 点 是 0x0063 ， 而 
"@" 的 码 点 是 0x1F60A。 码 点 可 能 是 16 位 ， 也 可 能 是 32 位 ， 而 codePointAt () 方 法 可 以 从 指定 码 元 
位 置 识别 完整 的 码 点 。 












































let message = "ab®de"; 
console.log(message.codePointAt (1)); // 98 
console.log (message.codePointAt (2)); // 128522 
console.log(message.codePointAt (3)); // 56842 
console.log(message.codePointAt (4)); // 100 


注意 ， 如 果 传 和 人 的 码 元 索引 并 非 代理 对 的 开头 ， 就 会 返回 错误 的 码 点 。 这 种 错误 只 有 检测 单个 字符 
的 时 候 才 会 出 现 , 可 以 通过 从 左 到 右 按 正确 的 码 元 数 遍历 字符 串 来 规避 。 和 迭代 字 各 申 可 以 智能 地 识别 代 
理 对 的 码 点 : 


console.log([..."ab®@de"]); // ["a", "b", "®", "d", "e"] 









































与 charCodeAt () 有 对 应 的 codePointAt () 一 样 , fromCharCogde() 也 有 一 个 对 应 的 fromCodePoint ()。 
这 个 方法 接收 任意 数量 的 码 点 ， 返 回 对 应 字符 拼接 起 来 的 字符 串 : 


console.log(String.fromCharCode(97, 98, 55357, 56842, 100, 101)); // abedqe 
console.log(String.fromCodePoint (97, 98, 128522, 100, 101)); // abedqe 





2. normalize() 方 法 
某 些 Unicode 字符 可 以 有 多 种 编码 方式 。 有 的 字符 既 可 以 通过 一 个 BMP 字符 表示 ， 也 可 以 通过 一 
个 代理 对 表示 。 比 如 : 


// U+00C5: 上 面 带 圆圈 的 大 写 拉 丁字 母 入 
console.log(String.fromCharCode (0x00C5)); // A 























// U+212B: 长 度 单位 “ 埃 ” 
console.log(String.fromCharCode (0x212B) ) ; YY 


// U+004: 大 写 拉丁 字母 入 
// U+030A: 上 面 加 个 圆圈 
console.log(String.fromCharCode (0x0041, 0x030A)); // A 
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比较 操作 符 不 在 乎 字符 看 起 来 是 什么 样 的 ， 因 此 这 3 个 字符 互 不 相等 。 


let al = String.fromCharCode (0x00C5), 
a2 = String.fromCharCode (0x212B), 
a3 = String.fromCharCode (0x0041, 0x030A); 


console.log(al, a2, a3); // A, A, A 


console.log(al === a2); // false 
console.log(al === a3); // false 
console.log(a2 === a3); // false 














为 解决 这 个 问题 ，Unicode 提供 了 4 种 规范 化 形式 ,可 以 将 类 似 上 面 的 字符 规范 化 为 一 致 的 格式 , 无论 








底层 字符 的 代码 是 什么 。 这 4 种 规范 化 形式 是 : NFD ( Normalization Form D )、NFC ( Normalization Form C )、 
NFKD (Normalization Form KD ) 和 NFKC (Normalization Form KC )。 可 以 使 用 normalize() 方 法 对 字 


符 串 


























Ud 














应 用 上 述 规范 化 形式 ,使 用 时 需要 传人 表示 哪 种 形式 的 字符 串 ; 





"NFD"、 "NFC"、 "NFKD" 或 "NEKC" 。 





注意 这 4 种 规范 化 形式 的 具体 细节 超出 了 本 书 范围 ， 有 兴趣 的 读者 可 以 自行 参考 UAX 





15#: Unicode Normalization Forms 中 的 1.2 节 “Normalization Forms”。 
































通过 比较 字符 串 与 其 调用 normalize() 的 返回 值 ， 就 可 以 知道 该 字符 串 是 否 已 经 规范 化 了 : 


let al = String.fromCharCode (0x00C5), 
a2 = String.fromCharCode (0x212B), 
a3 = String.fromCharCode (0x0041, 0x030A); 











// U+00C5 是 对 0+212B 进行 NFC/NFKC 规范 化 之 后 的 结果 





console.log(al === al.normalize("NFD")); // false 
console.log(al === al.normalize("NFC")); // true 
console.log(al === al.normalize ("NFKD")); // false 
console.log(al === al.normalize ("NFKC")); // true 
// U+212B 是 未 规范 化 的 

console.log(a2 === a2.normalize("NFD")); // false 
console.log(a2 === a2.normalize("NFC")); // false 
console.log(a2 === a2.normalize ("NFKD")); // false 
console.log(a2 === a2.normalize ("NFKC")); // false 


// U+0041/U+030A 是 对 0+212B 进行 NFD/NFKD 规范 化 之 后 的 结果 








console a3.normalize("NFD")); // true 
console. = a3.normalize("NFC")); // false 
console. a3.normalize ("NFKD")); // true 
console. a3.normalize("NFKC")); // false 

















‘i 


选择 同一 种 规范 化 形式 可 以 让 比较 操作 符 返 回 正确 的 结果 : 


let al = String.fromCharCode (0x00C5), 
a2 = String.fromCharCode (0x212B) ， 
a3 = String.fromCharCode (0x0041, 0x030A); 


console.log(al.normalize ("NFD") === a2.normalize ("NFD")); // true 
console.log(a2.normalize ("NFKC") === a3.normalize("NFKC")); // true 
console.log(al.normalize ("NFC") === a3.normalize ("NFC")); // true 


3. 字符 串 操作 方法 
本 节 介 绍 几 个 操作 字符 串 值 的 方法 。 首 先是 concat () ， 用 于 将 一 个 或 多 个 字符 串 拼接 成 一 个 新 字 
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符 串 。 来 看 下 面 的 例子 : 


let stringValue "hello " 
let result stringValue.concat ("world" 


和 


ee 











































































































console.log(result); // "hello world" 

console.log(stringValue); // "hello" 

在 这 个 例子 中 ， 对 stringvalue 调用 concat() 方 法 的 结果 是 得 到 "hello world" ， 但 
stringValue 的 值 保持 不 变 。concat () 方 法 可 以 接收 任意 多 个 参数 ,因此 可 以 一 次 性 拼接 多 个 字符 串 ， 
如 下 所 示 : 

let stringValue = "hello " 

let result = stringValue.concat ("world", "!")，; 

console.log(result); // "hello world!" 

console.log(stringValue); // "hello" 

这 个 修改 后 的 例子 将 字符 串 "worlda" 和 "! "追加 到 了 "hello "后 面 。 虽 然 concat () 方 法 可 以 拼接 | 
字符 串 , 但 更 常用 的 方式 是 使 用 加 号 操作 符 (+ )。 而 且 多 数 情况 下 ， 对 于 拼接 多 个 字符 串 来 说 ， 使 用 加 
号 更 方便 。 

ECMAScript 提供 了 3 个 从 字符 串 中 提取 子 字符 串 的 方法 : slice() 、supstr() 和 substring()。 这 
3 个 方法 都 返回 调用 它们 的 字符 串 的 一 个 子 字 符 串 ， ee RD 























始 的 位 置 ， 第 二 个 参数 表示 子 字 符 串 结束 的 位 置 。 对 slice( 
束 的 位 置 ( 即 该 位 置 之 前 的 字符 会 被 提取 出 来 ), 对 substr () 而 言 ， 0 回 的 子 字 符 串 数量 。 
任何 情况 下 ， 省 略 第 二 个 参数 都 意味 着 提取 到 字符 串 未 尾 。 与 concat () 方 法 一 样 ，slice()、substr() 
也 不 会 修改 调用 它们 的 字符 串 ， 而 只 会 返回 提取 到 的 原始 新 字符 串 值 。 来 看 下 面 的 例子 : 


"hello world"; 





) 和 substring () ， 第 二 个 参数 是 提取 结 



































和 substring () 


let stringValue 


console.log(stringValue.slice(3)); // "lo world" 
console.log(stringValue.substring(3)); // "lo world" 
console.log(stringValue.substr(3));，; // "lo world" 
console.log(stringValue.slice(3, 7)); // "lo w" 
console.log(stringValue.substring(3,7)); // "lo w" 
console.log(stringValue.substr(3, 7)); // "lo worl" 


在 这 个 例子 中 ，slice()、 





和 substring() 是 以 相同 方式 被 调用 的 , 而 且 多 数 情 况 下 返 


substr() 


















































回 的 值 也 相同 。 如 果 只 传 一 个 参数 3, 则 所 有 方法 都 将 返回 "lo worlg", 因为 "hello" 中 "1" 位 置 为 3。 
如 果 传 人 两 个 参数 3 和 7， 则 slice() 和 substring() 返 回 "lo w" (因为 "worldq" 中 "o" 在 位 置 7， 
不 包含 )， Whee ye worl"， 因 为 第 二 个 参数 对 它 而 言 表 示 返 回 的 字符 数 。 
当 某 个 参数 是 负 值 时 ， 这 3 个 方法 的 行为 又 有 不 同 。 比 如 ，slice () 方 法 将 所 有 负 值 参数 都 当成 字 
符 串 长 度 加 上 负 参 数值 。 
而 substz () 方 法 将 第 一 个 负 参 数值 当成 字符 串 长 度 加 上 该 值 ， 将 第 二 个 负 参 数值 转换 为 0。 
substring () 方 法 会 将 所 有 负 参 数值 都 转换 为 0。 看 下 面 的 例子 : 
let stringValue = "hello world"; 
console.log(stringVvalue.slice(-3));，; // "rld" 
console.log(stringValue.substring(-3)); // "hello world" 
console.log(stringVvalue.substr(-3)); // "rld" 
console.log(stringValue.slice(3, -4)); // "lo w" 
console.log(stringValue.substring(3, -4)); // "hel" 
console.log(stringValue.substr(3, -4)); // "" (empty string) 
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这 个 例子 明确 演示 了 3 个 方法 的 差异 。 在 给 slice () 和 substr() 传 人 负 参 数 时 ,它们 的 返回 结果 

相同 。 这 是 因为 -3 会 被 转换 为 8 (长度 加 上 负 参 数 )， 实 际 上 调用 的 是 slice (8) 和 substr(8)。 而 
substring () 方 法 返回 整个 字符 串 ， 因 为 -3 会 转换 为 0。 
在 第 二 个 参数 是 负 值 时 ， 这 3 个 方法 各 不 相同 。slice () 方 法 将 第 二 个 参数 转换 为 7， 实际 上 相当 
于 调用 slice(3，7) ， 因 此 返回 "1o w"。 而 substring () 方 法 会 将 第 二 个 参数 转换 为 0， 相当 于 调用 
substring (3，0)， 等 价 于 substring (0，3)， 这 是 因为 这 个 方法 会 将 较 小 的 参数 作为 起 点 ， 将 较 
大 的 参数 作为 终点 。 对 substr () 来 说 , 第 二 个 参数 会 被 转换 为 0, 意味 着 返回 的 字符 串 包含 零 个 字符 ， 
因而 会 返回 一 个 空 字符 串 。 

4. 字符 串 位 置 方法 

有 两 个 方法 用 于 在 字符 串 中 定位 子 字符 串 : indqaexof() 和 1astIndex0f ()。 这 两 个 方法 从 字符 
串 中 搜索 传人 的 字符 串 ， 并 返回 位 置 (如 果 没 找到 ， 则 返回 -1 )。 两 者 的 区 别 在 于 ，indexof ( ) 方法 
从 字符 串 开 头 开始 查找 子 字符 串 , 而 1astIndexof () 方 法 从 字符 串 末 尾 开始 查找 子 字 符 串 。 来 看 下 面 
的 例子 : 


let stringValue = "hello world"; 
console.log(stringValue.indexOf ("o")); // 4 
console.log(stringValue.lastIndexOf ("o")); // 7 


这 里 , 字符 串 中 第 一 个 "o" 的 位 置 是 4, 即 "hello" 中 的 "o"。 最 后 一 个 "o" 的 位 置 是 7, 即 "worla" 
的 "o"。 如 果 字 符 串 中 只 有 一 个 "o"， 则 ingexof () 和 lastIndexof () 返 回 同一 个 位 置 。 

这 两 个 方法 都 可 以 接收 可 选 的 第 二 个 参数 ， 表 示 开 始 搜索 的 位 置 。 这 意味 着 ，indqexof () 会 从 这 个 
参数 指定 的 位 置 开始 向 字符 串 末 尾 搜索 ， 忽 略 该 位 置 之 前 的 字符 ; lastIndexof () 则 会 从 这 个 参数 指 
定 的 位 置 开 始 向 字符 串 开 头 搜 索 ， 忽 略 该 位 置 之 后 直到 字符 串 末 尾 的 字符 。 下 面 看 一 个 例子 : 


let stringValue = "hello wor1d" 
console.log(stringValue.indexOf("o", 6)); // 7 
console.log(stringValue.lastIndexOf("o", 6)); // 4 


在 传人 第 二 个 参数 6 以 后 ,结果 跟前 面 的 例子 恰好 相反 。 这 一 次 ，indexof () 返 回 7， 因 为 它 从 位 
置 6 (字符 "w" ) 开始 向 后 搜索 字符 串 ， 在 位 置 7 找到 了 "o"。 而 1astIndexof () 返 回 4， 因 为 它 从 位 
置 6 开始 反 向 搜索 至 字符 串 开 头 ， 因 此 找到 了 "hello" 中 的 "o"。 像 这 样 使 用 第 二 个 参数 并 循环 调用 
index0f () 或 1astIndqexof () ， 就 可 以 在 字符 串 中 找到 所 有 的 目标 子 字符 串 ， 如 下 所 示 : 


let stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit",; 
let positions = new Array (); 
let pos = stringValue.indexOf ("e"); 
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while(pos > -1) { 
positions.push(pos); 
pos = stringValue.indexOof("e", pos + 1); 


} 


console.log(positions); // [3,24,32,35,52] 

这 个 例子 逐步 增 大 开始 搜索 的 位 置 , 通过 indexof () 遍历 了 整个 字符 串 。 首先 取得 第 一 个 "e" 的 位 
置 ， 然 后 进入 循环 ， 将 上 一 次 的 位 置 加 1 再 传 给 indexof () ， 确 保 搜索 到 最 后 一 个 子 字 符 串 实例 之 后 。 
每 个 位 置 都 保存 在 positions 数组 中 ， 可 供 以 后 使 用 。 
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5. 字符 串 包 含 方法 

ECMAScript 6 增加 了 3 个 用 于 判断 字符 中 中 是 否 包含 另 一 个 字符 串 的 方法 : startswith()、 
endsWith() 和 includes ()。 这 些 方法 都 会 从 字符 串 中 搜索 传人 的 字符 串 ， 并 返回 一 个 表示 是 否 包含 
的 布尔 值 。 ns startswith() 检 查 开始 于 索引 0 的 匹配 项 ，endswitnh () 检 查 开 始 于 索 
引 (string.length - substring.length) 的 匹配 项 ， 而 incluaes () 检查 整个 字符 串 ; 























let message = "foobarbaz"; 
console.log(message.startsWith("foo")); // true 
console.log(message.startsWith("bar")); // false 
console.log(message.endsWith("baz")); // true 
console.log (message.endsWith("bar")); // false 
console.log(message.includes ("bar")); // true 


aonnole odios odd Inoue Cu) ). // false 

startsWith() 和 :incluaes () 方 法 接收 可 选 的 第 二 个 参数 ， 表 示 开 始 搜索 的 位 置 。 如 果 传 人 第 二 5 
个 参数 , 则 意味 着 这 两 个 方法 会 从 指定 位 置 向 着 字符 串 末尾 搜索 ,忽略 该 位 置 之 前 的 所 有 字符 。 下 面 是 
一 个 例子 : 























let message = "foobarbaz"; 

console.log(message.startsWith("foo")); // true 
console.log(message.startsWith("foo", 1)); // false 
console.log (message.includes ("bar"));} // true 
console.log(message.includes ("bar", 4)); // false 




















endsWith() 方 法 接收 可 选 的 第 二 个 参数 , 表示 应 该 当 作 字 符 串 末 尾 的 位 置 。 如 果 不 提供 这 个 参数 ， 
那么 默认 就 是 字符 串 长 度 。 如 果 提 供 这 个 参数 ， 那 么 就 好 像 字符 串 只 有 那么 多 字符 一 样 : 




















let message = "foobarbaz"; 
console.log (message.endsWith("bar")); // false 
console.log(message.endsWith("bar", 6)); // true 


6. trim() 方 法 
ECMAScript 在 所 有 字符 串 上 都 提供 了 trim() 方 法 。 这 个 方法 会 创建 字符 串 的 一 个 副本 ， 删 除 前 、 


后 所 有 空格 符 ， 再 返回 结果 。 比 如 : 























let stringValue = " hello world "; 

let trimmedStringValue = stringValue.trim(); 
console.log(stringValue); // " hello world " 
console.log(trimmedSstringValue); // "hello world" 











由 于 trim() 返 回 的 是 字符 串 的 副本 ,因此 原始 字符 串 不 受 影响 ， 即 原本 的 前 、 后 空格 符 都 会 保留 

男 外，trimLeft () 和 trimRight () 方 法 分 别 用 于 从 字符 串 开始 和 末尾 清理 空格 符 。 

7. repeat () 方 法 

ECMAScript 在 所 有 字符 串 上 都 提供 了 repeat () 方 法 。 这 个 方法 接收 一 个 整数 参数 ， 表 示 要 将 字 
符 串 复制 多 少 次 ， 然 后 返回 拼接 所 有 副本 后 的 结果 。 


let stringValue = "na "; 
console.log(stringValue.repeat(16) + "batman"); 
// na na na na na na na na na na na na na na na na batman 
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8. padstart () 和 padEnd() 方 法 


padstart () 


满足 长 度 条 件 。 


( U+0020 )。 


let stringValue = 


console.log(stringValue.padstart (6)); 
console.log(stringValue.padStart (9, ". 


console.log(stringValue.padEnd (6)); 
console.log(stringValue.padEnd(9, ". 


可 选 的 第 二 个 参数 并 不 限于 一 个 字符 。 如 果 提 供 了 
指定 长 度 。 此 外 ， 如 果 长 度 小 于 或 等 于 字符 串 长 度 ， 


let stringValue = 


console.log(stringValue.padSstart (8, 
console.log(stringValue.padstart (2));} 


console.log(stringValue.padEnd(8, 
console.log(stringValue.padEnd!( 


这 两 个 方法 的 第 


和 paqgi 











pnd () 方 法 会 复制 

















如 果 


HN 





Ud 








| 字符 串 ， 











"foo"; 


"foo"; 


9. 字符 串 迭 代 与 解构 








字符 串 的 原型 
手动 使 用 迭代 咒 : 


let message = 


let stringIterator = 


console.log(stringIterator.next()); // {value: "a", done: 

console.log(stringIterator.next()); // {value: "b", done: 

console.log(stringIterator.next()); // {value: "c", done: 

console.log(stringIterator.next()); // {value: undefined， 

在 for-of 循环 中 可 以 通过 这 个 迭代 器 按 序 访问 每 个 字符 : 

for (const C of "abcde") { 

console.log(c);} 

} 

// a 

// b 

/YY 远 

// Q 

// e 

有 了 这 个 迭代 器 之 后 ,字符 串 就 可 以 通过 解构 操作 符 来 解构 了 。 比 如 ， 
为 字符 数组 : 

let message = "abcde"; 

console.log([...messagel); // ["a", "b", "c", "gd", "e"] 


"abc"; 














10. 字符 串 大 小 写 转换 


下 一 组 方法 涉及 大 小 写 转换 ， 包 括 4 个 方法 : 


个 参数 是 长 度 ， 


SR 一 


时 


小 于 指定 
二 个 参数 是 














则 会 返 


"bar")); // 


// 


"par")); 
2)); 


了 
// 





多 个 字符 的 字符 串 ， 





回 原始 字符 串 。 


"barbafoo" 
Li foo" 


"foobarba" 
nn foo" 





4 上 暴露 了 一 个 aeeiterator 方法 , 表示 可 以 迭代 字符 串 的 每 个 字符 。 可 以 像 下 面 这 检 


message[Symbol.iterator] (); 


toLowerCase().、 


长 度 ， 则 在 相应 一 边 填充 字符 ， 直 至 
可 选 的 填充 字符 串 ， 默 认为 空格 








则 会 将 其 


拼接 并 截断 以 匹配 








Hk 





false} 
false} 
false} 


done: true} 




















可 以 更 方便 地 把 字符 叫 分 


I 履 
这 


toLocaleLowerCase() 、 
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toUpperCase() 和 toLocaleUpperCase() otoLowerCase() 和 toUpperCase() 方 法 是 原来 就 有 的 方法 ， 
与 java.lang.String 中 的 方法 同名 。toLocaleLowerCase () 和 toLocaleUpperCase() 方 法 旨 在 基于 











特定 地 区 实现 。 在 很 多 地 区 ， 地 区 特定 的 方法 与 通用 的 方法 是 一 相 





和 的。 但 在 少数 语言 中 〈 如 土耳其 语 )， 


Unicode 大 小 写 转换 需 应 用 特殊 规则 ， 要 使 用 地 区 特定 的 方法 才能 实现 正确 转换 。 下 鲁 


"hello world"; 


let stringValue 














i 是 几 个 例子 : 




















console.log(stringValue.toLocaleUpperCase()); // "HELLO WORLD" 

console.log(stringValue.toUpperCase()); // "HELLO WORLD" 

console.log(stringValue.toLocaleLowerCase()); // "hello world" 

console.log(stringValue.toLowerCase()); // "hello world" 

这 里 ，toLowerCase() 和 toLocaleLowerCase() 都 返回 hello world, 而 toUpperCase() 和 
toLocaleUpperCase() 都 返回 HELLO WORLD。 通常 ， 如 果 不 知 道 代码 涉及 什么 语言 ， 则 最 好 使 用 地 
区 特定 的 转换 方法 。 








11. 字符 串 模 式 匹 配方 法 
String 类 型 专门 为 在 字符 串 





























实现 模式 匹配 设计 了 几 个 方法 。 第 一 个 就 是 match () 方 法 ， 这 个 方 




















法 本 质 上 跟 RegExp 对 象 的 exec () 方 法 相同 。match () 方 法 接收 一 个 参数 ， 可 以 是 一 个 正则 表达 式 字 
符 串 ， 也 可 以 是 一 个 RegExp 对 象 。 来 看 下 面 的 例子 : 

let text = "cat, bat, sat, fat"; 

let pattern = /.at/; 


// 等 价 于 pattern.exec (text) 
let matches text .match (pattern); 





console.log (matches.index); // 0 
console.log (matches{[0]); Za ua 
console.log(pattern.lastIndex); // 0 





match() 方 法 返回 的 数组 与 RegExp 对 象 的 exec () 方 法 返回 的 数组 是 一 样 的 : 第 一 个 元 素 是 与 整 
个 模式 匹配 的 字符 串 ， 其 余 元 素 则 是 与 表达 式 中 的 捕获 组 匹配 的 字符 串 〈 如 果 有 的 话 )。 

男 一 个 查找 模式 的 字符 串 方 法 是 search () 。 这 个 方法 唯一 的 参数 与 mnatch () 方 法 一 样 : 正则 表达 
式 字符 串 或 RegExp 对 象 。 这 个 方法 返回 模式 第 一 个 匹配 的 位 置 索引 ， ) 
始终 从 字符 串 开 头 向 后 匹配 模式 。 看 下 面 的 例子 : 


上 
let text eat Dat Sat fat 
let pos text .search(/at/); 
console.log(pos); //1 












































回 ~1。 searc 








Nn 


























这 里 ，search (/at/) 返 回 1， 即 "at "的 第 一 个 字 符 在 字符 串 中 的 位 置 。 

为 简化 子 字符 串 蔡 换 操作 ，ECMAScript 提供 了 replace() 方 法 。 这 个 方法 接收 两 个 参数 ， 第 一 个 
参数 可 以 是 一 个 RegExp 对 象 或 一 个 字符 串 〈 这 个 字符 串 不 会 转换 为 正则 表达 式 )， 第 二 个 参数 可 以 是 
一 个 字符 串 或 一 个 函数 。 如 果 第 一 个 参数 是 字符 串 ,， 那么 只 会 替换 第 一 个 子 字符 串 。 要 想 替 换 所 有 子 字 






























































符 串 ， 第 一 个 参数 必须 为 正则 表达 式 并 且 带 全 局 标记 ， 如 下 面 的 例子 所 示 : 
let text = "cat, bat, sat, fat"; 
let result = text.replace("at", "ond"); 
console.log(result); // "cond, bat, sat, fat" 
result = text.replace(/at/g, "ond"); 
console.log(result); // "cond, bond, sond, fond" 
在 这 个 例子 中 ， 字 符 串 "at" 先 传 给 replace () 函数 ， 而 蔚 换 文本 是 "ona" 。 结 果 是 "cat "被 修改 
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为 "congd"， 
中 的 所 有 "at" 都 被 替换 成 了 "one 

















而 字符 串 的 剩余 部 分 保持 不 变 

















。 通 过 将 第 一 个 参数 改 为 带 全 局 标记 的 正则 表达 式 ， 字 符 串 





























































































































第 二 二 个 参数 是 字符 串 的 情况 下 ， 有 几 个 特殊 的 字符 序列 ， 可 以 用 来 插入 正则 表达 式 操作 的 值 。 
ECMA-262 中 规定 了 下 表 中 的 值 。 
字符 序列 替换 文本 

$$ $ 

$& 匹配 整个 模式 的 子 字符 串 。 与 RegExp.1lastMatch 相同 

RS 匹配 的 子 字符 串 之 前 的 字符 串 。 与 RegExp .rightcontext 相同 

EA 匹配 的 子 字符 串 之 后 的 字符 串 。 与 RegExp.1leftcontext 相同 

$n 匹配 第 = 个 捕获 组 的 字符 串 ， 其 中 了 是 0~9。 比 如 ，s1 是 匹配 第 一 个 捕获 组 的 字符 串 ，$2 是 匹配 第 二 个 
捕获 组 的 字符 串 ， 以 此 类 推 。 如 果 没 有 捕获 组 ， 则 值 为 空 字符 串 

$nn 匹配 第 nn 个 捕获 组 字符 串 ， 其 中 nn 是 01~99。 比 如 ，$01 是 匹配 第 一 个 捕获 组 的 字符 串 ，$02 是 匹配 第 
二 个 捕获 组 的 字符 串 ， 以 此 类 推 。 如 果 没 有 捕获 组 ， 则 值 为 空 字符 串 

使 用 这 些 特殊 的 序列 ， 可 以 在 替换 文本 中 使 用 之 前 匹配 的 内 容 ， 如 下 面 的 例子 所 示 : 

Jet text =° "gat bat Saty ‘tat 

result = text.replace(/(.at)/g, "word ($1)"); 


console.log(result); 


这 里 , 每 个 以 "at " 

replacel 
个 模式 匹配 的 字符 串 、 
个 匹配 捕获 组 的 字符 串 也 会 作为 参数 传 给 
原始 字符 串 。 这 个 函数 应 该 返回 一 个 字 
可 以 更 细致 地 控制 蔡 换 过 程 ， 如 下 所 示 ; 
{ 























function htmlEscape (text) 


return text.replace(/[<>"&]/9g, 


switch(match) { 
GES vas 
ret 
case ">" 
return 
case "&": 
return 
Case 扩 nn 
return 


"ggty"; 


"gamp;"; 





"gquot;"; 
} 
}9 
} 
console.log(htmlEscape("<p clas 
A 








吉 尾 的 词 都 会 被 蔡 换 成 "wora" 后 跟 对 小 括号 ,其 
) 的 第 二 个 参数 可 以 是 一 个 函数 。 在 只 有 一 个 匹配 项 时 ， 
匹配 项 在 字符 串 中 的 开始 位 置 ， 以 及 整个 字符 串 


Ah 时 


们 上 


// word (cat), word (bat), word (sat), word (fat) 























。 在 有 多 个 捕获 组 的 
这 个 函数 , 但 最 后 两 个 参数 还 是 与 整个 模式 匹配 的 开 
CE 示 应 该 把 匹配 项 替换 成 什么 。 使 用 函数 作为 第 














已 
中， 











function(match, pos, originalText) { 


s=\"greeting\">Hello world!</p>")); 


"&lt;p class=&quot;greeting&quot;&gt;Hello world!</p>" 


段 HTML 中 的 4 个 字符 替换 成 对 应 的 实体 : 





Escape() 用 于 将 
必须 经 过 转 义 )。 


这 里 ， 函数 html 
和 号 ， 还 有 双 引 号 (者 
符 ， 














最 后 一 个 与 模式 匹配 相关 的 字符 中 


四 .As 


实现 这 个 任务 最 简 








这 个 方法 会 根据 传人 的 分 隔 符 将 


小 于 号 、 
单 的 办 法 就 是 用 一 个 正则 表达 式 查 找 这 些 字 
然后 定义 一 个 函数 ， 根 据 匹 配 的 每 个 字 se HTML 实体 。 


方法 是 split ( 字符 


包含 捕获 组 匹配 的 内 容 $1。 
这 个 函数 会 收 到 3 个 参数 : 与 整 
青 况 下 ， 每 





始 位 置 和 
二 个 参数 





守信 


串 拆 分 成 
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数组 。 作 为 分 隔 符 的 参数 可 以 是 字符 串 ， 也 可 以 是 RegExp 对 象 。( 字符 串 分 隔 符 不 会 被 这 个 方法 当成 
正则 表达 式 。) 还 可 以 传人 第 二 个 参数 ， 即 数组 大 小 ， 确 保 返 回 的 数组 不 会 超过 指定 大 小 。 来 看 下 面 的 
例子 : 




















let colorText = "red,blue,green,yellow"; 
let colorsl = Colortexb SDELL (2 // ["red", "blue", "green", "yellow"] 
let colors2 = colorText.split(" 2)» // [l"red", ee 


let colors3 ColorText: Splice /TX A EN | 


在 这 里 ， 字 符 串 colorText 是 一 个 逗号 分 隔 的 颜色 名 称 符 串 。 调 用 split (",，") 会 得 到 包含 
颜色 名 的 数组 ， 基 于 逗号 进行 拆 分 。 要 把 数组 元 素 限 制 为 2 个 ， 全 个 参数 2 即 可 。 最 后 ， 人 
则 表达 式 可 以 得 到 一 个 包含 逗号 的 数组 。 注 意 在 最 后 一 次 调用 split () 时 , 返回 的 数组 前 后 包含 两 个 空 
字符 串 。 这 是 因为 正则 表达 式 指定 的 分 隔 符 出 现在 了 字符 串 开 头 〈 "zed" ) 和 末尾 ( "yellow" )。 

12. localeCompare() 方 法 

最 后 一 个 方法 是 localeCompare () ， 这 个 方法 比较 两 个 字符 串 ， 返 回 如 下 3 个 值 中 的 一 个 。 

口 如 果 按 照 字 母 表 顺序 ， i 则 返回 负 值 。( 通常 是 -1， 具 体 还 要 看 
与 实际 值 相关 的 实现 。) 

口 如 果 字 符 串 与 字符 串 参 数 相 等 ， 则 返回 0。 

口 如 果 按 照 字 母 表 顺序 ， 字 符 串 应 该 排 在 字符 串 参数 后 头 ， 则 返回 正 值 。( 通常 是 1， 具体 还 要 看 


















































































































































与 实际 值 相关 的 实现 。) 
下 面 是 一 个 例子 : 
let stringValue = "yellow"; 
console.log(stringValue.localeCompare("pbrick")); //1 
console.log(stringValue.localeCompare("yellow")); // 0 
console.log(stringValue.localeCompare ("zo00")); 类 人 汉王 


在 这 里 ， 字 符 串 "yellow" 与 3 个 不 同 的 值 进行 了 比较 : "prick"、"yellow" 和 "zoo"。"brick" 
按 字 母 表 顺 序 应 该 排 在 "yellow" 前 头 , 因此 1localecompare() 返 回 1。"vyellow" 等 于 "yellow" ， 
此 "localeCompare() "返回 0。 最 后 ，"zoo" 在 "yellow" 后 面 ， 因 此 localecompare() 返 回 -1。 强 调 
一 下 ， 因 为 返回 的 具体 值 可 能 因 具 体 实现 而 异 ， 所 以 最 好 像 下 面 的 示例 中 一 样 使 用 1ocalecompare () : 


function determineOrder (value) { 
let result = stringValue.localeCompare (value); 
if (result < 0) { 
console.log( ‘The string 'yellow' comes before the string '${value}'..); 
} else if (result > 0) { 
console.log( ‘The string 'yellow' comes after the string '${value}'..); 
} else { 
console.log( ‘The string 'yellow' is equal to the string '${value}'..); 
} 
} 























determineOrder ("brick"); 
determineOrder ("yellow"); 
determineOrder ("zo0"); 


这 样 一 来 ， 就 可 以 保证 在 所 有 实现 中 都 能 正确 判断 字符 串 的 顺序 了 
localeCompare() 的 独特 之 处 在 于 ,实现 所 在 的 地 区 ( 国家 和 语言 ) 决定 了 这 个 方法 如 何 比 较 字 
。 在 美国 , 英语 是 ECMAScript 实现 的 标准 语言 ， localecompare () 区 分 大 小 写 , 大 写字 母 排 在 小 














HH 


符 





128 第 5 章 基本 引用 类 型 




















写字 母 前 面 。 但 其 他 地 区 未 必 是 这 种 情况 。 

13. HTML 方法 

早期 的 浏览 器 开发 商 认为 使 用 JavaScript 动态 生成 HTML 标签 是 一 个 需求 。 因 此 ， 早 期 浏览 器 扩展 
了 规范 ， 增 加 了 辅助 生成 HTML 标签 的 方法 。 下 表 总 结 了 这 些 HTML 方法 。 不 过 ， 这 些 方法 基本 上 已 
经 没有 人 使 用 了 ， 因 为 结果 通常 不 是 语义 化 的 标记 。 















































方 ”法 输 出 
anchor (name) <a name="name">string</a> 
big() <big>string</big> 
bold() <b>string</b> 
fixed() <ttyatringe/tt> 
fontcolor (color) <font color="color">string</font> 
fontsize (size) <font size="size">string</font> 
italics() 二 证 SS /和 过 
link (url) <a href="url">string</a> 
small () <small>string</small> 
strike() <strike>string</strike> 
sub() <sub>string</sub> 
sup() <sup>string</sup> 


5.4 单 例 内 置 对 象 


ECMA-262 对 内 置 对 象 的 定义 是 “任何 由 ECMAScript 实现 提供 、 与 宿主 环境 无 关 ， 并 在 ECMAScript 
程序 开始 执行 时 就 存在 的 对 象 ”。 这 就 意味 着 ， 开 发 者 不 用 显 式 地 实例 化 内 置 对 象 ， 因 为 它们 已 经 实例 
化 好 了 。 前 面 我 们 已 经 接触 了 大 部 分 内 置 对 象 , 包括 object、Array 和 string。 本 节 介 绍 ECMA-262 
定义 的 另外 两 个 单 例 内 置 对 象 : Global 和 Math。 


































































































5.4.1 Global 





Global 对 象 是 ECMAScript 中 最 特别 的 对 象 , 因 为 代码 不 会 显 式 地 访问 它 .ECMA-262 规定 Global 
对 象 为 一 种 忽 底 对 象 , 它 所 针对 的 是 不 属于 任何 对 象 的 属性 和 方法 。 事实 上 , 不 存在 全 局 变量 或 全 局 孙 
数 这 种 东西 。 在 全 局 作用 域 中 定义 的 变量 和 函数 都 会 变 成 Global 对 象 的 属性 。 本 书 前 面 介绍 的 函数 ， 
包括 isNaN() 、isFinite()、parseInt() 和 parseFloat() ， 实 际 上 都 是 Global 对 象 的 方法 。 除 
了 这 些 ，Global 对 象 上 还 有 另外 一 些 方法 。 

1. URL 编码 方法 

encodeURI () 和 encodeURIComponent () 方 法 用 于 编码 统一 资源 标识 符 ( URI), 以 便 传 给 浏览 器 。 
有 效 的 URI 不 能 包含 某 些 字符 ， 比 如 空格 。 使 用 URI 编码 方法 来 编码 URI 可 以 让 浏览 器 能 够 理解 它们 ， 
同时 又 以 特殊 的 UTF-8 编码 替换 掉 所 有 无 效 字符 。 

ecnodeURI () 方 法 用 于 对 整个 URI 进行 编码 ， 比 如 "www.wrox.com/illegal value.js"。 而 
encodeURIComponent () 方 法 用 于 编码 URI 中 单独 的 组 件 ， 比 如 前 面 URL 中 的 "illegal value.js"。 
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这 两 个 方法 的 主要 区 别 是 ，encodeURI () 不 会 编码 属于 URL 组 件 的 特殊 字符 ， 比 如 冒号 、 斜 杜 、 问 号 、 
井 号 ， 而 encodeURIComponent () 会 编码 它 发 现 的 所 有 非 标准 字符 。 来 看 下 面 的 例子 : 


let uri = "http://ww.wrox.com/illegal value.js#start"; 














// "http://www.wrox.com/illegal%20value.js#start" 
console.log (encodeURI (uri)); 


// "http%$3A%S2F%S2Fwww.wrox.com%$2Fillegal%20value.js%23start" 
console.log (encodeURIComponent (uri)); 


这 里 使 用 encogdeURI () 编码 后 ， 除 空格 被 替换 为 s320 之 外 ,没有 任何 变化 。 而 encodeURI- 
Component () 方 法 将 所 有 非 字 母 字 符 都 替换 成 了 相应 的 编码 形式 。 这 就 是 使 用 encodeURI () 编码 整个 
URI， 但 只 使 用 encodeURIComponent () 编码 那些 会 追加 到 已 有 URI 后 面 的 字符 串 的 原因 。 







































































注意 一 般 来 说 , 使 用 encodeURIComponent () 应 该 比 使 用 encodeU 


这 是 因为 编码 查询 字符 串 参 数 比 编码 基准 URI 的 次 数 更 多 。 








与 encodeURI () 和 encodeURIComponent () 相对 的 是 decodeURI() 和 decodeURIComponent () 。 
decodeURI () 只 对 使 用 encodeURI () 编码 过 的 字符 解码 。 例 如 ，%20 会 被 替换 为 空格 ， 但 s23 不 会 被 
替换 为 井 号 〈(# )， 因 为 井 号 不 是 由 encodeURI () 替换 的 。 类 似 地 ，decodqeURIComponent () 解码 所 有 
被 encodeURIComponent () 编码 的 字符 ， 基 本 上 就 是 解码 所 有 特殊 值 。 来 看 下 面 的 例子 : 


let uri = "http%$3A%S2F%S2Fwww.wrox.com%$2Fillegal%20value.js%23start"; 

















// http%$3A%S2F%2Fwww.wrox.com%$2Fillegal value.js%23start 
console.log (decodeURI (uri)); 





// http:// www.wrox.com/illegal value.js#start 
console.log(decodeURIComponent (uri)); 


这 里 ，uri 变量 中 包含 一 个 使 用 encodeURIComponent () 编码 过 的 字符 串 。 首 先 输出 的 是 使 用 
decodeURI () 解码 的 结果 ， 可 以 看 到 只 用 空格 奉 换 了 820。 然 后 是 使 用 decodeURIComponent () 解码 的 
结果 ， 其 中 替换 了 所 有 特殊 字符 ， 并 输出 了 没有 包含 任何 转 义 的 字符 串 。( 这 个 字符 串 不 是 有 效 的 URL。 ) 









































注意 URI 方 法 encodeURI () .encodeURIComponent () .decodeURI () 和 decodeURI- 
Component () 取 代 了 escape() 和 unescape() 方 法 ,后 者 在 ECMA-262 第 3 版 中 就 已 经 





废弃 了 。URI 方 法 始终 是 首选 方法 ， 因 为 它们 对 所 有 Unicode 字符 进行 编码 ， 而 原来 的 方 
法 只 能 正确 编码 ASCII 字符 。 不 要 在 生产 环境 中 使 用 escape () 和 unescape()。 





2. eval () 方 法 

最 后 一 个 方法 可 能 是 整个 BCMAScript 语言 中 最 强大 的 了 ， 它 就 是 eval () 。 这 个 方法 就 是 一 个 完 
整 的 ECMAScript 解释 器 ， 它 接收 一 个 参数 ， 即 一 个 要 执行 的 ECMAScript ( JavaScript ) 字符 串 。 来 看 
一 个 例子 

eval ("console.log('hi')"); 

上 面 这 行 代码 的 功能 与 下 一 行 等 价 : 


console.log ("hi"); 
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当 解释 器 发 现 eval () 调用 时 ,会 将 参数 解释 为 实际 的 ECMAScript 语句 ， 然 后 将 其 插入 到 该 位 置 。 
通过 eval () 执行 的 代码 属于 该 调用 所 在 上 下 文 ， 被 执行 的 代码 与 该 上 下 文 拥有 相同 的 作用 域 链 。 这 意 
味 着 定义 在 包含 上 下 文中 的 变量 可 以 在 eval () 调用 内 部 被 引用 ， 比 如 下 面 这 个 例子 : 


let msg = "hello world"; 
eval ("console.log(msg)"); // "hello world" 


这 里 , 变量 msg 是 在 eval () 调用 的 外 部 上 下 文中 定义 的 ,而 console.1og() 显 示 了 文本 "hello 
world"。 这 是 因为 第 二 行 代 码 会 被 替换 成 一 行 真正 的 函数 调用 代码 。 类 似 地 ,可 以 在 eval () 内 部 定义 
一 个 函数 或 变量 ， 然 后 在 外 部 代码 中 引用 ， 如 下 所 示 : 


eval ("function sayHi() { console.log('hi'); }"); 
sayHi (); 


这 里 ,函数 sayHi () 是 在 eval () 内 部 定义 的 。 因 为 该 调用 会 被 替换 为 真正 的 函数 定义 ， 所 以 才 可 
能 在 下 一 行 代 码 中 调用 sayHi () 。 对 于 变量 也 是 一 样 的 : 


eval("let msg = 'hello world';"); 
console.log(msg); // Reference Error: msg is not defined 


通过 eval () 定义 的 任何 变量 和 函数 都 不 会 被 提升 ， 这 是 因为 在 解析 代码 的 时 候 ， 它 们 是 被 包含 在 
一 个 字符 串 中 的 。 它 们 只 是 在 eval () 执行 的 时 候 才 会 被 创建 。 

在 严格 模式 下 ， 在 eval () 内 部 创建 的 变量 和 函数 无 法 被 外 部 访问 。 换 句 话 说， 最 后 两 个 例子 会 报 
错 。 同 样 ， 在 严格 模式 下 ， 赋 值 给 eval 也 会 导致 错误 : 


"use strict"; 
eval = "hi"; // 导致 错误 























































































































注意 解释 代码 字符 串 的 能 力 是 非常 强大 的 ， 但 也 非常 危险 。 在 使 用 eval () 的 时 候 必 须 
极为 慎重 ,特别 是 在 解释 用 户 输入 的 内 容 时 。 因 为 这 个 方法 会 对 XSS 利用 暴露 出 很 大 的 


攻击 面 。 恶 意 用 户 可 能 插入 会 导致 你 网 站 或 应 用 前 溃 的 代码 。 





3. Global 对 象 属性 

Global 对 象 有 很 多 属性 ， 其 中 一 些 前 面 已 经 提 到 过 了 。 像 undefined、NaN 和 Infinity 等 特殊 
值 都 是 slopal 对 象 的 属性 。 此 外 ， 所 有 原生 引用 类 型 构造 函数 ， 比 如 object 和 Function， 也 都 是 
Global 对 象 的 属性 。 下 表 列 出 了 所 有 这 些 属 性 。 





























属 性 说 明 
undefined 特殊 值 ungefined 
NaN 特殊 值 NaN 
Infinity 特殊 值 Infinity 
Object Object 的 构造 函数 
Array Array 的 构造 也 数 
Function Function 的 构造 函数 
Boolean Boolean 的 构造 也 数 


String string 的 构造 也 数 
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( 续 ) 
属 性 说 ” 明 
Number Number 的 构造 函数 
Date Date 的 构造 函数 
RegExp RegExp 的 构造 函数 
Symbol Symbol 的 伪 构 造 函 数 
Error Error 的 构造 函数 
EvalError EvalError 的 构造 函数 
RangeError RangeError 的 构造 函数 
ReferenceError ReferenceError 的 构造 函数 
SyntaxError SyntaxError 的 构造 函数 
TypeError TypeError 的 构造 函数 5 
URIError URIError 的 构造 函数 





4. window 对 象 
虽然 ECMA-262 没有 规定 直接 访问 Global 对 象 的 方式 ， 但 浏览 器 将 window 对 象 实现 为 Global 
对 象 的 代理 。 因 此 ， 所 有 全 局 作用 域 中 声明 的 变量 和 函数 都 变 成 了 windovw 的 属性 。 来 看 下 面 的 例子 : 


Var. ColLOr SS 全 Q 























function sayColor() { 
console.log (window.color); 


} 


window.sayColor(); // "red" 


这 里 定义 了 一 个 名 为 color 的 全 局 变量 和 一 个 名 为 sayColor () 的 全 局 函数 ,在 sayColor () 内 部 ， 
通过 window.color 访问 了 color 变量 , 说 明 全 局 变量 变 成 了 window 的 属性 。 接着 , 又 通过 window 
对 象 直接 调用 了 wingdow.sayColor () 困 数 ， 从 而 输出 字符 串 。 

















注意 window 对 象 在 JavaScript 中 远 不 止 实现 了 ECMAScript 的 Global 对 象 那 么 简单 。 





关于 window 对 象 的 更 多 介绍 ， 请 参考 第 12 章 。 





男 一 种 获取 Global 对 象 的 方式 是 使 用 如 下 的 代码 : 


let global = function() { 
return this; 


}0; 

这 段 代 码 创建 一 个 立即 调用 的 函数 表达 式 ， 返 回 了 this 的 值 。 如 前 所 述 ， 当 一 个 函数 在 没有 明确 
(通过 成 为 某 个 对 象 的 方法 ， 或 者 通过 call ()/apply() ) 指定 this 值 的 情况 下 执行 时 ，this 值 等 于 
Global 对 象 。 因 此 ， 调 用 一 个 简单 返回 this 的 函数 是 在 任何 执行 上 下 文中 获取 Global 对 象 的 通用 
方式 。 


























5.4.2 Math 


ECMAScript 提供 了 Math 对 象 作为 保存 数学 公式 、 信 息 和 计算 的 地 方 。Math 对 象 提供 了 一 些 辅助 
计算 的 属性 和 方法 。 




















注意 Math 对 象 上 提供 的 计算 要 比 直接 在 JavaScript 实现 的 快 得 多 , 因为 Math 对 象 上 的 
计算 使 用 了 JavaScript 引擎 中 更 高 效 的 实现 和 处 理 器 指令 。 但 使 用 Math 计算 的 问题 是 精 


度 会 因 浏览 器 、 操 作 系 统 、 指 令 集 和 硬件 而 异 。 





1. Math 对 象 属性 
Math 对 象 有 一 些 属性 ， 主 要 用 于 保存 数学 中 的 一 些 特殊 值 。 下 表 列 出 了 这 些 属性 。 







































































属 性 说 明 
ath.E 自然 对 数 的 基数 e 的 值 
ath.LN10 10 为 底 的 自然 对 数 
ath .LN2 2 为 底 的 自然 对 数 
ath.LOG2E 以 2 为 底 e 的 对 数 
ath.LOG10E 以 10 为 底 e 的 对 数 
ath. PI 7 的 值 
ath.SQRT1_2 1/2 的 平方 根 
ath. SQRT2 2 的 平方 根 
这 些 值 的 含义 和 用 法 超出 了 本 书 的 范畴 , 但 都 是 ECMAScript 规范 定义 的 , 并 可 以 在 你 需要 时 使 用 。 
2. min() 和 max() 方 法 
Math 对 象 也 提供 了 很 多 辅助 执行 简单 或 复杂 数学 计算 的 方法 。 





























min() 和 max() 方 法 用 于 确定 一 组 数值 中 的 最 小 值 和 最 大 值 。 这 两 个 方法 都 接收 任意 多 个 参数 ， 如 








下 面 的 例子 所 示 : 
let max = Math.max(3, 54, 32, 16); 
console.log(max); // 54 


let min = Math.min(3, 54, 32, 16); 
console.log(min); // 3 


在 3、54、32 和 16 中 ，Math.max() 返 回 54，Math.min() 返 回 3。 使 用 这 两 个 方法 可 以 避免 使 月 
额外 的 循环 和 if 语句 来 确定 一 组 数值 的 最 大 最 小 值 。 
要 知道 数组 中 的 最 大 值 和 最 小 值 ， 可 以 像 下 面 这 样 使 用 扩展 操作 符 : 

















me 
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let max = Math.max(...val); 
3. 舍 入 方法 


接 下 来 是 用 于 把 小 数值 舍 入 为 整数 的 4 个 方法 : Math.ceil()、Math.floor()、Math.round() 
和 Math.fround()。 这 几 个 方法 处 理 舍 人 的 方式 如 下 所 述 。 
口 Math.ceil() 方 法 始终 向 上 舍 入 为 最 接近 的 整数 。 
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() 方 法 始终 向 下 舍 人 为 最 接近 的 整数 。 
口 Math.round () 方 法 执行 四 售 五 人 。 
口 Math.fround() 方 法 返回 数值 最 接近 的 单 精度 (32 位 ) 浮 点 值 表示 。 
以 下 示例 展示 了 这 些 方 法 的 用 法 : 


口 Math.floor 


























console.log (Math.ceil(25.9)); A/ 26 
console.log (Math.ceil(25.5)); /4 .26 
console.log (Math.ceil(25.1)); /L266 
console.log(Math.round(25.9)); // 26 
console.log(Math.round(25.5)); // 26 
console.log(Math.round(25.1)); // 25 
console.log(Math.fround(0.4)); // 0.4000000059604645 
console.log(Math.fround(0.5)); // 0.5 
console.log(Math.fround(25.9)); // 25.899999618530273 
console.log(Math.floor(25.9)); // 25 
console.log(Math.floor(25.5)); // 25 
console.log(Math.floor(25.1)); // 25 


对 于 25 网 26 (不 包含 ) 之 间 的 所 有 值 ，Math.ceil() 都 会 返回 26， 因 为 它 始终 向 上 舍 入 。 
Math.round() 只 在 数值 大 于 等 于 25.5 时 返回 26， 否 则 返回 25。 最 后 ，Math.floor() 对 所 有 25 和 
26 (不 包含 ) 的 值 都 返回 25。 


4. random() 方 法 

AR 0~1 范围 内 的 随机 数 ， 其 中 包含 0 但 不 包含 1。 对 于 希望 显示 随机 名 
言 或 随机 新 闻 的 网 页 ， 这 个 方法 是 非常 方便 的 。 可 以 基于 如 下 公式 使 用 Math.random() 从 一 组 整数 中 
随机 选择 一 个 数 : 

number = Math.floor(Math.random() * total_number_of_choices + first_possible value) 

这 里 使 用 了 Math.floor() 方 法 ， 因 为 Math.random() 始终 返回 小 数 ， 即 便 乘 以 一 个 数 再 加 上 一 
个 数 也 是 小 数 。 因 此 ， 如 果 想 从 1~10 范围 内 随机 选择 一 个 数 ， 代 码 就 是 这 样 的 : 

let num = Math.floor(Math.random() * 10 + 1); 

这 样 就 有 10 个 可 能 的 值 (1~10 ), 其 中 最 小 的 值 是 1。 如 果 想 选择 一 个 2~10 范围 内 的 值 , 则 代码 就 
要 写成 这 样 : 

let num = Math.floor(Math.random() * 9 + 2); 

2~10 只 有 9 个 数 ， 所 以 可 选 总 数 ( total_number_of_choices ) 是 9， 而 最 小 可 能 的 值 
(first_possible_value ) 是 2。 很 多 时 候 ， 通 过 函数 来 算出 可 选 总 数 和 最 小 可 能 的 值 可 能 更 方便 ， 
比如 : 


function selectFrom(lowerValue, upperValue) { 
let choices = upperValue - lowerValue + 1; 
return Math.floor(Math.random() * choices + lowerValue); 


} 

































































let num = selectFrom(2,10); 
console.log(num); // 2~10 范围 内 的 值 ， 其 中 包含 2 和 10 


这 里 的 函数 selectFrom() 接 收 两 个 参数 : 应 该 返回 的 最 小 值 和 最 大 值 。 通 过 将 这 两 个 值 相 减 再 
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加 1 得 到 可 选 总 数 ， 然 后 再 套用 上 面 的 公式 。 于 是 ， 调 用 selectFrom(2,10) 就 可 以 从 2~10 (包含 ) 
范围 内 选择 一 个 值 了 。 使 用 这 个 函数 ， 从 一 个 数组 中 随机 选择 一 个 元 素 就 很 容易 ， 比 如 : 


let colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"]; 
lJet color = colors[selectFrom(0, colors.length-1)]; 


在 这 个 例子 中 ， 传 给 selecFrom() 的 第 二 个 参数 是 数组 长 度 减 1， 即 数组 最 大 的 索引 值 。 








注意 Math.random() 方 法 在 这 里 出 于 演示 目的 是 没有 问题 的 。 如 果 是 为 了 加 密 而 需要 
生成 随机 数 ( 传 给 生成 器 的 输入 需要 较 高 的 不 确定 性 )， 那 么 建议 使 用 window.crypto. 


getRandomValues () 。 





5. 其 他 方法 
Math 对 象 还 有 很 多 涉及 各 种 简单 或 高 阶 数 运算 的 方法 。 讨 论 每 种 方法 的 具体 细节 或 者 它们 的 适用 
场景 超出 了 本 书 的 范畴 。 不 过 ， 下 表 还 是 总 结 了 Math 对 象 的 其 他 方法 。 
































方 ” ”法 说 明 
Math.abs (x) 返回 x 的 绝对 值 
Math.exp (x) 返回 Math.E 的 x 次 略 
Math.expml (x) 等 于 Math.exp(x) -1 
Math. 1og (x) 返回 x 的 自然 对 数 
Math.1loglp (x) 于 1 + Math.log (x) 
Math.pow (x, power) 回 x 的 power 次 窜 








nums 中 每 个 数 平方 和 的 平方 根 
32 位 整数 x 的 前 置 零 的 数量 
回 表示 x 符 号 的 1、0、-0 或 -1 








Math.hypot (...Dpums) 








回 加 


Math.clz32 (x) 


Math.sign (x) 









































等 

返 

返 

返 区 

返 
Math.trunc (x) 返回 x 的 整数 部 分 ， 删除 所 有 小 数 
Math.sqrt (x) 返回 x 的 平方 根 
Math .cpbrt (x) 返回 x 的 立方 根 
Math.acos (x) 返回 x 的 反 余 弦 
Math .acosh (x) 返回 x 的 反 双 曲 余弦 
Math.asin (x) 返回 x 的 反正 弦 
Math.asinh (x) 返回 x 的 反 双 曲 正弦 
Math.atan (x) 返回 x 的 反正 切 
Math.atanh (x) 返回 x 的 反 双 曲 正切 
Math .atan2 (y, x) 返回 y/x 的 反正 切 
Math. cos (x) 返回 x 的 余弦 
Math. sin (x) 返回 x 的 正弦 
Math. tan (x) 返回 x 的 正切 



































即便 这 些 方法 都 是 由 ECMA-262 定义 的 ,对 正弦 、 余 弦 、 正 切 等 计算 的 实现 仍然 取决 于 浏览 器 ,， 因 
为 计算 这 些 值 的 方式 有 很 多 种 。 结 果 ， 这 些 方法 的 精度 可 能 因 实 现 而 异 。 
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5.5 小结 


JavaScript 中 的 对 象 称 为 引用 值 ， 几 种 内 置 的 引用 类 型 可 用 于 创建 特定 类 型 的 对 象 。 
引用 值 与 传统 面向 对 象 编程 语言 中 的 类 相似 ， 但 实现 不 同 。 
口 Date 类 型 提供 关于 日 期 和 时 间 的 信息 ， 包 括 当 前 日 期 、 时 间 及 相关 计算 。 
口 RegExp 类 型 是 ECMAScript 支持 正则 表达 式 的 接 口 ， 提 供 了 大 多 数 基 础 的 和 部 分 高 级 的 正则 表 
达 式 功能 。 

JavaScript 比较 独特 的 一 点 是 ， 函 数 实际 上 是 Function 类 型 的 实例 ， 也 就 是 说 函数 也 是 对 象 。 
为 函数 也 是 对 象 ， 所 以 函数 也 有 方法 ， 可 以 用 于 增强 其 能 力 。 
由 于 原始 值 包装 类 型 的 存在 ，JavaScript 中 的 原始 值 可 以 被 当成 对 象 来 使 用 。 有 3 种 原始 值 包 装 类 
型 : Boolean、Number 和 string。 它们 都 具备 如 下 特点 。 
口 每 种 包装 类 型 都 映射 到 同名 的 原始 类 型 。 
口 以 读 模式 访问 原始 值 时 ， 后 台 会 实例 化 一 个 原始 值 包 装 类 型 的 对 象 ， 借 助 这 个 对 象 可 以 操作 相 
应 的 数据 。 
口 涉及 原始 值 的 语句 执行 完毕 后 ， 包 装 对 象 就 会 被 销毁 。 

当代 码 开 始 执行 时 ， 全 局 上 下 文中 会 存在 两 个 内 置 对 象 : Global 和 Math。 其 中 ，Global 对 象 在 
大 多 数 ECMAScript 实现 中 无 法 直接 访问 。 不 过 ， 浏 览 器 将 其 实现 为 window 对 象 。 所 有 全 局 变量 和 函 
数 都 是 Global 对 象 的 属性 。Math 对 象 包含 辅助 完成 复杂 计算 的 属性 和 方法 。 
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第 O 
集合 引用 类 型 


本 章 内 容 

口 对 象 

口 数组 与 定型 数组 

口 Map、WeakMap、Set 以 及 WeakSet 类 型 





6.1 Object 

















到 目前 为 止 ， 大 多 数 引 用 值 的 示例 使 用 的 是 object 类 型 。object 是 ECMAScript 中 最 常用 的 类 
型 之 一 。 虽 然 object 的 实例 没有 多 少 功能 ， 但 很 适合 存储 和 在 应 用 程序 间 交 换 数据 。 
显 式 地 创建 object 的 实例 有 两 种 方式 ,第 一 种 是 使 用 new 操作 符 和 object 构造 阴 数 ,如 下 所 示 : 


let person = new Object (); 
person.name = "Nicholas"; 
person.age = 29; 


另 一 种 方式 是 使 用 对 象 字 面 量 (object literal ) 表示 法 。 对 象 字 面 量 是 对 象 定义 的 简写 形式 ， 目 的 是 
为 了 简化 包含 大 量 属 性 的 对 象 的 创建 。 比 如 ,下 面 的 代码 定义 了 与 前 面 示例 相同 的 person 对 象 , 但 使 
用 的 是 对 象 字面 量 表示 法 : 

let person = { 

name: "Nicholas", 
age: 29 
于 


在 这 个 例子 中 ， 左 大 括号 ({ ) 表示 对 象 字面 量 开始 ， 因 为 它 出 现在 一 个 表达 式 上 下 文 ( expression 
context ) 中 。 在 ECMAScript 中 ， 表 达 式 上 下 文 指 的 是 期 待 返回 值 的 上 下 文 。 赋 值 操作 符 表示 后 面 要 期 
待 一 个 值 ， 因 此 左 大 括号 表示 一 个 表达 式 的 开始 。 同 样 是 左 大 括号 ， 如 果 出 现在 语 名 上下文 〈statement 
context ) 中 ， 比 如 if 语句 的 条 件 后 面 ， 则 表示 一 个 语句 块 的 开始 。 

接 下 来 指定 了 name 属性 ， 后跟 一 个 冒号 ， 然 后 是 属性 的 值 。 逗 号 用 于 在 对 象 字面 量 中 分 隔 属 
因此 字符 串 "Nicholas "后面 有 一 个 逗号 ， 而 29 后 面 没有 ， 因 为 age 是 这 个 对 象 的 最 后 一 个 属性 。 在 
最 后 一 个 属性 后 面 加 上 逗号 在 非常 老 的 浏览 器 中 会 导致 报错 ， 但 所 有 现代 浏览 器 都 支持 这 种 写法 。 

在 对 象 字 面 量 表示 法 中 ， 属 性 名 可 以 是 字符 串 或 数值 ， 比 如 : 


let person = { 
"name": "Nicholas", 
"age": 29, 
5: true 


}; 
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这 个 例子 会 得 到 一 个 带 有 属性 name 、age 和 5 的 对 象 。 注 意 ， 数 值 属性 会 自动 转换 为 字符 串 。 

当然 也 可 以 用 对 象 字 面 量 表示 法 来 定义 一 个 只 有 默认 属性 和 方法 的 对 象 ， 只 要 使 用 一 对 大 括号 ， 中 
间 留 空 就 行 了 : 

let person = {}; // 与 new Object() 相 同 


person.name = "Nicholas"; 
person.age = 29; 


这 个 例子 跟 本 节 开 始 的 第 一 个 例子 是 等 效 的 , 虽然 看 起 来 有 点 怪 。 对 象 字面 量 表示 法 通常 只 在 为 了 
让 属性 一 目 了 然 时 才 使 用 。 




















注意 ”在 使 用 对 象 字面 量 表示 法 定义 对 象 时 ， 并 不 会 实际 调用 Object 构造 函数 。 





nm 


虽然 使 用 哪 种 方式 创建 object 实例 都 可 以 , 但 实际 上 开发 者 更 倾向 于 使 用 对 象 字 面 量 表示 法 。 这 
是 因为 对 象 字 面 量 代码 更 少 , 看 起 来 也 更 有 封装 所 有 相关 数据 的 感觉 。 事实 上 ， 对象 字面 量 已 经 成 为 给 
函数 传递 大 量 可 选 参 数 的 主要 方式 ， 比 如 : 


function displayInfo(args) { 

















let output = "" 

if (typeof args.name == "string")t{ 
output += "Name: " + args.name + "\n"; 

} 

if (typeof args.age == "number") { 
output += "Age: " + args.age + "ANDn" 

} 

alert (output); 





} 


displayInfol({ 
name: "Nicholas", 
age: 29 

es 


displayInfol({ 
name: "Greg" 


}); 
这 里 ,函数 displayInfo () 接 收 一 个 名 为 args 的 参数 。 这 个 参数 可 能 有 属性 name 或 age, 也 可 
能 两 个 属性 都 有 或 者 都 没有 。 函 数 内 部 会 使 用 typeof 操作 符 测 试 每 个 属性 是 否 存在 ， 然 后 根据 属性 有 
无 构造 并 显示 一 条 消息 。 然 后 , 这 个 函数 被 调用 了 两 次 , 每 次 都 通过 一 个 对 象 字面 量 传人 了 不 同 的 数据 。 
两 种 情况 下 ， 函 数 都 正常 运行 。 

















注意 ”这 种 模式 非常 适合 函数 有 大 量 可 选 参数 的 情况 。 一 般 来 说 , 命名 参数 更 直观 ,但 在 
可 选 参 数 过 多 的 时 候 就 显得 策 抽 了 。 最 好 的 方式 是 对 必 选 参数 使 用 命名 参数 ， 再 通过 一 个 


对 象 字 面 量 来 封装 多 个 可 选 参数 。 

















虽然 属性 一 般 是 通过 点 语法 来 存 取 的 ,这 也 是 面向 对 象 语言 的 惯例 , 但 也 可 以 使 用 中 括号 来 存 取 属 
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性 。 在 使 用 中 括号 时 ， 要 在 括号 内 使 用 属性 名 的 字符 串 形式 ， 比 如 : 


console.log(person["name"]); // "Nicholas" 
console.log(person.name); // "Nicholas" 


从 功能 上 讲 , 这 两 种 存 取 属性 的 方式 没有 区 别 。 使 用 中 括号 的 主要 优势 就 是 可 以 通过 变量 访问 属性 ， 
就 像 下 面 这 个 例子 中 一 样 : 


let propertyName = "name" 
console.log(person[propertyName]); // "Nicholas" 


另外 ， 如 果 属 性 名 中 包含 可 能 会 导致 语法 错误 的 字符 ， 或 者 包含 关键 字 / 保 留 字 时 ， 也 可 以 使 用 中 
括号 语法 。 比 如 : 

person["first name"] = "Nicholas"; 

因为 "first name" 中 包含 一 个 空格 ， 所 以 不 能 使 用 点 语法 来 访问 。 不 过 ， 属 性 名 中 是 可 以 包含 非 
字母 数字 字符 的 ， 这 时 候 只 要 用 中 括号 语法 存 取 它 们 就 行 了 。 

通常 ， 点 语法 是 首选 的 属性 存 取 方式 ， 除 非 访问 属性 时 必须 使 用 变量 。 






















































































注意 第 8 章 将 更 全 面 、 深 入 地 介绍 Object 类 型 。 





6.2 Array 





除了 object, Array 应 该 就 是 ECMAScript 中 最 常用 的 类 型 了 。ECMAScript 数组 跟 其 他 编程 语言 
的 数组 有 很 大 区 别 。 跟 其 他 语言 中 的 数组 一 样 ，ECMAScript 数组 也 是 一 组 有 序 的 数据 ， 但 跟 其 他 语言 
不 同 的 是 ， 数 组 中 每 个 槽 位 可 以 存储 任意 类 型 的 数据 。 这 意味 着 可 以 创建 一 个 数组 ， 它 的 第 一 个 元 素 
是 字符 串 ， 第 二 个 元 素 是 数值 ， 第 三 个 是 对 象 。ECMAScript 数组 也 是 动态 大 小 的 ， 会 随 着 数据 添加 而 
自动 增长 。 


6.2.1 创建 数组 
有 了 几 种 基本 的 方式 可 以 创建 数组 。 一 种 是 使 用 Array 构造 函数 ， 比 如 : 


let colors = new Array(); 

如 果 知 道 数组 中 元 素 的 数量 , 那么 可 以 给 构造 函数 传人 一 个 数值 ， 然后 length 属性 就 会 被 自动 创 
建 并 设置 为 这 个 值 。 比 如 ， 下 面 的 代码 会 创建 一 个 初始 length 为 20 的 数组 : 

let colors = new Array (20);，; 

也 可 以 给 Array 构造 函数 传人 要 保存 的 元 素 。 比 如 ， 下 面 的 代码 会 创建 一 个 包含 3 个 字符 串 值 的 
数组 : 

let colors = new Array ("red", "blue", "green" ) 

创建 数组 时 可 以 给 构造 函数 传 一 个 值 。 这 时 候 就 有 点 问题 了 ， 因 为 如 果 这 个 值 是 数值 ， 则 会 创建 一 
个 长 度 为 指定 数值 的 数组 ; 而 如 果 这 个 值 是 其 他 类 型 的 ， 则 会 创建 一 个 只 包含 该 特定 值 的 数组 。 下 面 看 
一 个 例子 : 


let colors = new Array (3); // 创建 一 个 包含 3 个 元 素 的 数组 
let names = new Array ("Greg"); // 创建 一 个 只 包含 一 个 元 素 ， 即 字符 囊 "Greg" 的 数组 
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在 使 用 Array 构造 函数 时 ， 也 可 以 省 略 new 操作 符 。 结 果 是 一 样 的 ， 比 如 : 


let colors = Array (3); // 创建 一 个 包含 3 个 元 素 的 数组 
let names = Array ("Greg"); // 创建 一 个 只 包含 一 个 元 素 ， 即 字符 事 "Greg" 的 数组 


另 一 种 创建 数组 的 方式 是 使 用 数组 字面 量 ( array literal ) 表示 法 。 数 组 字面 量 是 在 中 括号 中 包含 以 
逗号 分 隔 的 元 素 列 表 ， 如 下 面 的 例子 所 示 : 











let colors = ["red"，"blue"， "green"]; // 创建 一 个 包含 3 个 元 素 的 数组 
let names = []; // 创建 一 个 空 数组 
let values = [1,2,]; // 创建 一 个 包含 2 个 元 素 的 数组 











在 这 个 例子 中 ,第 一 行 创建 一 个 包含 3 个 字符 串 的 数组 。 第 二 行 用 一 对 空中 括号 创建 了 一 个 空 数组 。 
第 三 行 展 示 了 在 数组 最 后 一 个 值 后 面 加 逗号 的 效果 : values 是 一 个 包含 两 个 值 (1 和 2 ) 的 数组 。 











注意 “与 对 象 一 样 ， 在 使 用 数组 字面 量 表示 法 创建 数组 不 会 调用 Array 构造 函数 。 








Array 构造 函数 还 有 两 个 ES6 新 增 的 用 于 创建 数组 的 静态 方法 : from() 和 of ()。from() 用 于 将 
类 数组 结构 转换 为 数组 实例 ， 而 of () 用 于 将 一 组 参数 转换 为 数组 实例 。 

Array .from() 的 第 一 个 参数 是 一 个 类 数组 对 象 ， 即 任何 可 迭代 的 结构 ,或 者 有 一 个 length 属性 
和 可 索引 元 素 的 结构 。 这 种 方式 可 用 于 很 多 场合 : 


// 字符 串 会 被 拆 分 为 单字 符 数 组 
CONSGOlLe: LOg (Arrays tom(" Matt ) ) ae AX EM Var VE; LEY] 














// 可 以 使 用 from() 将 集合 和 映射 转换 为 一 个 新 数组 
const m = new Map().set(1, 2) 
4); 
const s = new Set().add 


console.log(Array.from(m)); // [I[ 
console.log(Array.from(s)); // [1, 2, 3, 4] 


// Array .from() 对 现 有 数组 执行 浅 复制 


const dl es: [ly nO, 73 | 

const a2 = Array.from(al); 
console.1log(al); wy | 
alert(al === a2); // false 


// 可 以 使 用 任何 可 选 代 对 象 
const iter = { 
* [Symbol .iterator]l() { 
yield 1; 
yield 2; 
yield 3; 
yield 4; 





} 
} 
OnsSOle .Lo (Array -FroOm(iter) yt yy Ll 25,3. A] 
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// arguments 对 象 可 以 被 轻松 地 转换 为 数组 
function getArgsArray() { 
return Array.from(arguments);} 


} 


console.log(getArgsArray (1, 2, 3, 4)); // [1, 2, 3, 4] 
// from() 也 能 转换 带 有 必要 属性 的 自 定义 对 象 
const arrayLikeObject = { 
Oy cl 
bs 
2 
3 A 
length: 4 
过 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4] 


Array .from() 还 接收 第 二 个 可 选 的 映射 函数 参数 。 这 个 函数 可 以 直接 增强 新 数组 的 值 ， 而 无 须 像 
调用 Array .from() .map() 那 样 先 创 建 一 个 中 间 数 组 。 还 可 以 接收 第 三 个 可 选 参 数 ， 用 于 指定 映射 函 
数 中 this 的 值 。 人 这 个 重 写 的 this 值 在 币 头 函数 中 不 适用 。 



































GONnst: sels STL 9 7] 

CONnst a2 = Array ,trom(al, ,sy KL) 

const a3 = Array.from(al, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16€] 

console.log(a3); // [1, 4, 9, 16] 


Array .of () 可 以 招 _ 组 参数 转换 为 数组 。 这 个 方法 用 于 替代 在 ES6 之 前 常用 的 Array .prototype. 
slice.call (arguments) ， 一 种 异常 笨拙 的 将 arguments 对 象 转换 为 数组 的 写 与 法 : 


ONSOG .LOU (ATFaY OF (Lr 2 ro MP 2 TL 2 
console.log(Array.of (undefined)); // [undefined] 











6.2.2 ”数组 空位 


使 用 数组 字面 量 初始 化 数组 时 ， 可 以 使 用 一 串 逗 号 来 创建 空位 (hole )。ECMAScript 会 将 逗号 之 间 
相应 索引 位 置 的 值 当 成 空位 ，ES6 规范 重新 定义 了 该 如 何 处 理 这 些 空位 。 
可 以 像 下 面 这 样 创建 一 个 空位 数组 : 






































const options = [,,,,,]; // 创建 包含 5 个 元 素 的 数组 
console.log(options.length); 5 
console.1log (options); 人 




















ES6 新 增 的 方法 和 迭代 需 与 早期 ECMAScript 版 本 中 存在 的 方法 行为 不 同 。ES6 新 增 方法 普遍 将 这 
些 空位 当成 存在 的 元 素 ， 只 不 过 值 为 undefined: 


const oDEieons 3S 1 Pes 





for (const option of options) { 
console.log(option === undefined); 


// false 
// true 
// true 
// true 
// false 
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const a = Array.from([,,,]); // 使 用 ES6 的 Array .from() 创 建 的 包含 3 个 空位 的 数组 
for (const val of a) { 
alert (val === undefined); 
} 
// true 
// true 
// true 
alert (Array.of(...[,,,])); // [undefined, undefined, undefined] 
for (const [index, value] of options.entries()) { 


alert (value); 
} 
yl 
// undefined 
// undefined 
// undefined 


























// 5 
ES6 之 前 的 方法 则 会 忽略 这 个 空位 ， 但 具体 的 行为 也 会 因 方 法 而 异 : 
eonst QBtiongs es (LraS]: 


// map () 会 跳 过 空位 置 
console.log(options.map(() => 6)); // [6, undefined, undefined, undefined, 6] 





// join() 视 空位 置 为 空 字符 串 
console.log(options.join('-')); A A ret 


注意 ”由 于 行为 不 一 致 和 存在 性 能 隐患 ， 因 此 实践 中 要 避免 使 用 数组 空位 。 如 果 确 实 需要 


空位 ， 则 可 以 显 式 地 用 undefined 值 代替 。 





6.2.3 ”数组 索引 
要 取得 或 设置 数组 的 值 ， 需 要 使 用 中 括号 并 提供 相应 值 的 数字 索引 ， 如 下 所 示 : 





let colors = ["red"，"blue"， "green"];) // 定义 一 个 字符 串 数组 
alert (colors[0]); // 显示 第 一 项 
colors[2] = "black"; // 修改 第 三 项 
colors[3] = "brown"; // 添加 第 四 项 

















在 中 括号 中 提供 的 索引 表示 要 访问 的 值 。 如 果 索 引 小 于 数组 包含 的 元 素数 , 则 返回 存储 在 相应 位 置 
的 元 素 , 就 像 示例 中 colors [0] 显 示 "red" 一 样 。 设 置 数组 的 值 方法 也 是 一 样 的 ,就 是 蔡 换 指定 位 置 的 
值 。 如 果 把 一 个 值 设置 给 超过 数组 最 大 索引 的 索引 ， 就 像 示例 中 的 colors [3] ， 则 数组 长 度 会 自动 扩 
展 到 该 索引 值 加 1 ( 示例 中 设置 的 索引 3， 所 以 数组 长 度 变 成 了 4)。 

数组 中 元 素 的 数量 保存 在 length 属性 中 ， 这 个 属性 始终 返回 0 或 大 于 0 的 值 ， 如 下 例 所 示 : 


let colors = ["red"， "blue",， "green"]; // 创建 一 个 包含 3 个 字符 囊 的 数组 
let names = []; // 创建 一 个 空 数组 









































alert (colors.length); // 3 
alert (names.length); // 0 


数组 length 属性 的 独特 之 处 在 于 ， 它 不 是 只 读 的 。 通 过 修改 length 属性 ， 可 以 从 数组 末尾 删除 
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或 添加 元 素 。 来 看 下 面 的 例子 : 


let colors = ["red"，"blue"， "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
colors.length = 2; 
alert (colors[2]); // undefined 


这 里 ， 数 组 colors 一 开始 有 3 个 值 。 将 length 设置 为 2， 就 删除 了 最 后 一 个 (位置 2 的 ) 值 ， 
因此 colors[2] 就 没有 值 了 。 如 果 将 lengtn 设置 为 大 于 数组 元 素数 的 值 ， 则 新 添加 的 元 素 都 将 以 
undefined 填充 ， 如 下 例 所 示 : 


let colors = ["red"，"blue",， "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
colors.length = 4; 
alert (colors[3]); // undefined 


这 里 将 数组 colors 的 lengtn 设置 为 4， 虽然 数 组 只 包含 3 个 元 素 。 位 置 3 在 数组 中 不 存在 ， 
此 访问 其 值 会 返回 特殊 值 undefined。 
使 用 length 属性 可 以 方便 地 向 数组 末尾 添加 元 素 ， 如 下 例 所 示 : 























let colors = ["red"，"blue"， "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
colors[colors.length] = "black"; // 添加 一 种 颜色 (位 置 3) 
colors[colors.length] = "brown"; // 再 添加 一 种 颜色 (位 置 4) 














数组 中 最 后 一 个 元 素 的 索引 始终 是 length - 1， 因 此 下 一 个 新 增 槽 位 的 索引 就 是 length。 每 次 
在 数组 最 后 一 个 元 素 后 面 新 增 一 项 ,数组 的 1ength 属性 都 会 自动 更 新 ， 以 反映 变化 。 这 意味 着 第 二 行 
的 colors [colors .length] 会 在 位 置 3 添加 一 个 新 元 素 , 下 一 行 则 会 在 位 置 4 添加 一 个 新 元 素 。 新 的 
长 度 会 在 新 增 元 素 被 添加 到 当前 数组 外 部 的 位 置 上 时 自动 更 新 。 换 句 话 说 ,就 是 lengtn 属性 会 更 新 为 
位 置 加 上 1， 如 下 例 所 示 : 





















































let colors = ["red"，"blue",， "green"]; // 创建 一 个 包含 3 个 字符 串 的 数组 
colors[99] = "black"; // 添加 一 种 颜色 (位 置 99) 
alert (colors.length); // 100 














这 里 ，colors 数组 有 一 个 值 被 插入 到 位 置 99， 结 果 新 lengtnh 就 变 成 了 100 (99+ 1 )。 这 中 间 的 
所 有 元 素 ， 即 位 置 3~98， 实 际 上 并 不 存在 ， 因 此 在 访问 时 会 返回 undqefined。 














、\、 


注意 数组 最 多 可 以 包含 4294 967 295 个 元 素 , 这 对 于 大 多 数 编程 任务 应 该 足够 了 。 如 果 
尝试 添加 更 多 项 ， 则 会 导致 抛 出 错误 。 以 这 个 最 大 值 作 为 初始 值 创建 数组 ， 可 能 导致 脚本 
本 


行 时 间 过 长 的 错误 。 





6.2.4 检测 数组 


一 个 经 典 的 ECMAScript 问题 是 判断 一 个 对 象 是 不 是 数组 。 在 只 有 一 个 网 页 ( 因而 只 有 一 个 全 局 作 
用 域 ) 的 情况 下 ， 使 用 instanceof 操作 符 就 足 侨 : 


if (value instanceof Array){ 


// 操作 数组 























} 

使 用 instanceof 的 问题 是 假定 只 有 一 个 全 局 执行 上 下 文 。 如 果 网 页 里 有 多 个 框架 , 则 可 能 涉及 两 
个 不 同 的 全 局 执行 上 下 文 ， 因 此 就 会 有 两 个 不 同 版 本 的 Array 构造 函数 。 如 果 要 把 数组 从 一 个 框架 传 
给 男 一 个 框架 ， 则 这 个 数组 的 构造 函数 将 有 别 于 在 第 二 个 框架 内 本 地 创建 的 数组 。 
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为 解决 这 个 问题 , ECMAScript 提供 了 Array .isArray () 方 法 。 这 个 方法 的 目的 就 是 确定 一 个 值 是 
否 为 数组 ， 而 不 用 管 它 是 在 哪个 全 局 执行 上 下 文中 创建 的 。 来 看 下 面 的 例子 : 
if (Array.isArray (value))t{ 
// 操作 数组 
} 


6.2.5 和 迭代 器 方法 


在 ES6 中 ，Array 的 原型 上 暴露 了 3 个 用 于 检索 数组 内 容 的 方法 : keys () 、values () 和 
entries()。keys() 返 回 数组 索引 的 迭代 器 ，values () 返 回 数组 元 素 的 迭代 器 ， 而 entries () 返 回 
索引 / 值 对 的 迭代 器 : 


CONSE (a: I Eo, "bar Voas,, WAU 
































// 因为 这 些 方法 都 返回 选 代 器 ， 所 以 可 以 将 它们 的 内 容 
// 通过 Array.Efrom() 直 接 转换 为 数组 实例 

const aKeys = Array.from(a.keys()); 

const aValues = Array.from(a.values ()); 
const aEntries = Array.from(a.entries()); 


console.log (aKeys); | [| 











console.log(aValues); A Loos vbar, vbaz"y ou] 

console. log(aEntries}s we llO LEGO]S [ly Vbar lr [2 Baz]s 3, "gu"]] 
使 用 ES6 的 解构 可 以 非常 容易 地 在 循环 中 拆 分 键 / 值 对 : 

dom aS "i 和 所 阁下 

for (const [idx, element] of a.entries()) { 


alert (idqx) ; 
alert (element ) ， 


虽然 这 些 方法 是 ES6 规 范 定义 的 ,但 在 2017 年 底 的 时 候 仍 有 浏览 器 没有 实现 它们 。 





6.2.6 ”复制 和 填充 方法 


ES6 新 增 了 两 个 方法 : 批量 复制 方法 copywithin() ， 以 及 填充 数组 方法 fi11 ()。 这 两 个 方法 的 
函数 签名 类 似 ， 都 需要 指定 既 有 数组 实例 上 的 一 个 范围 ， 包 含 开 始 索引 ， 不 包 信 结束 家 3 使 用 这 个 方 
法 不 会 改变 数组 的 大 小 。 
使 用 fi11() 方 法 可 以 向 一 个 已 有 的 数组 中 插入 全 部 或 部 分 相同 的 值 。 开 始 索 引用 于 指定 开始 填充 
的 位 置 ， 它 是 可 选 的 。 如 果 不 提 供 结束 索引 ， 则 一 直 填 充 到 数组 末尾 。 负 值 索 引 从 数组 末尾 开始 计算 。 
也 可 以 将 负 索 引 想象 成 数组 长 度 加 上 它 得 到 的 一 个 正 索 引 : 
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const zeroes = [0, 0, 0, 0, 0]; 


// 用 5 填充 整个 数组 

Zeroes.fill(5); 

console.log(zeroes); // [5, 5, 5, 5, 5] 
zeroes.fill1(0); // 重 置 


// 用 6 填充 索引 大 于 等 于 3 的 元 素 
Zeroes.fill(6, 3); 

console.log(zeroes); // [0, 0, 0, 6, 6] 
zeroes.fill1(0); // 重 置 


// 用 7 填充 索引 大 于 等 于 1 且 小 于 3 的 元 素 
ErOeSe: EL AY. Lo: 3) 
console.log(zeroes); // [0, 7, 7, 0, 0]; 
zeroes.fil1l1(0); // 重 置 


// 用 8 填充 索引 大 于 等 于 1 且 小 于 4 的 元 素 
// (-4 + zeroes.length = 1) 
// (-1 + zeroes.length 4) 
Zeroes.fill(8, -4, -1); 
console.log(zeroes); // [0, 8, 8, 8, 0]; 


fill() 静 默 忽略 超出 数组 边界 、 零 长 度 及 方向 相反 的 索引 范围 


const zeroes = [0, 0, 0, 0, 0]; 

















员 





// 索引 过 低 ， 忽 略 
Zeroes.fill(1, -10, -6); 
console.log(zeroes); // [0, 0, 0, 0, 0 


// 索引 过 高 ， 忽 略 
ZEEEOeS. TfL (ly TL0 TS) 
console.log(zeroes); // [0, 0, 0, 0, 0 


// 索引 反 向 ， 忽略 
Zeroes.fill(2, 4, 2); 
console.log(zeroes); // [0, 0, 0, 0, 0 


// 索引 部 分 可 用 ， 填充 可 用 部 分 
zeroes.fill(4, 3, 10) 
console.log(zeroes); // [0, 0, 0, 4, 4 











与 fi11() 不 同 ，copyWithin () 会 按照 指定 范围 浅 复制 数组 中 的 部 分 内 容 ， 然 后 将 它们 提 
定 索引 











开始 的 位 置 。 开 始 索 引 和 结束 索引 风 与 fi111) 使 用 同样 的 计算 方法 ， 
let ints, 
eset ES () LES [07 20. 3 Si .73 Bs 9] 
reset (); 


Re 插入 到 索引 5 开始 的 位 置 

// 在 源 索 引 或 目标 索引 到 达 数 组 边界 时 停止 

ints.copyWithin(5); 

console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4] 
reset (); 


// 从 ints 中 复制 索引 5 开始 的 内 容 ， 插入 到 索引 0 开始 的 位 置 
ints.copyWithin(0, 5); 
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9] 








入 到 指 
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reset (); 


// 从 ints 中 复制 索引 0 开始 到 索引 3 结束 的 内 容 

// 插入 到 索引 4 开始 的 位 置 

ints.copyWithin(4, 0, 3); 

alert(intesyi., 7 0 Le 2 By 0F Ty 2 7 8 9] 
reset (); 


// JavaScript 引 掌 在 插值 前 会 完整 复制 范围 内 的 值 

// 因此 复制 期 间 不 存在 重 写 的 风险 

ints.copyWithin(2, 0, 6); 

alert(ints); // [0; 1, 0 1; 2; 3 4; 5, 8; 9] 
reset (); 





// 支持 负 索 引 值 ， 与 fi11() 相 对 于 数组 末尾 计算 正 向 索引 的 过 程 是 一 样 的 
ints.copyWithin(-4, -7, -3); 
alert(inte)s. WA [Oy Ly Ze-3 .dS dy 5 6] 





copyWithin () 静 默 忽 略 超出 数组 边界 、 零 长 度 及 方向 相反 的 索引 范围 : 
let ints, 

reSet := () SS" 108 [Ox 3. Dr dn de Dn bi Br D1 
reset (); 





// 索引 过 低 ， 和 忽略 

ints.copyWithin(1, -15, -12); 

Al (Lnteys vA lO 3 Zr By Md SB “77 8 9s 
reset () 


// 索引 过 高 ， 忽 略 

ints.copyWithin(1, 12, 15); 

aLEETt(Lna) 9 
reset (); 





// 索引 反 向 ,忽略 

ints.copyWithin(2, 4, 2); 

alert(intsys 7 LO Ly 23 3 :43S 6 172 85 “9 
reset (); 


// 索引 部 分 可 用 ， 复 制 、 填 充 可 用 部 分 
ints.copyWithin(4, 7, 10) 
alert (tinte)s. /A [0 TT, 22 37 Tr .87 9 7 8 Qs 





6.2.7 ”转换 方法 


前 面 提 到 过 ， 所 有 对 象 都 有 toLocalestring() 、toString() 和 valueof () 方 法 。 其 中 ，valueof () 
返回 的 还 是 数组 本 身 。 而 tostring() 返 回 由 数组 中 每 个 值 的 等 效 字 符 串 拼接 而 成 的 一 个 逗号 分 隔 的 
字符 串 。 也 就 是 说 ， 对 数组 的 每 个 值 都 会 调用 其 tostring () 方 法 ,以 得 到 最 终 的 字符 串 。 来 看 下 面 的 
例子 : 


let colors = ["red"，"blue"， "green"];) // 创建 一 个 包含 3 个 字符 串 的 数组 























alert (colors .上 toString() )， // red,blue,green 
alert (colors.valueOf ()); // red,blue,green 
alert (colors); // red,blue,green 





首先 是 被 显 式 调用 的 tostring () 和 valueof () 方 法 ， 它 们 分 别 返回 了 数组 的 字符 串 表 示 ， 即 将 





146 第 6 章 


集合 引用 类 


型 





所 有 字符 串 组 合 起 来 ， 以 逗号 分 隔 。 最 后 一 行 代码 直接 用 alert ( 




















串 ， 所 以 会 在 后 台 调 用 数组 的 tostring () 方 法 ， 从 而 得 到 跟前 面 一 样 的 结果 
toLocaleString() 方 法 也 可 能 返回 跟 tostring() 和 valueof ( 

调用 数组 的 toLocaleString () 方 法 时 ,会 得 到 一 

唯一 的 区 别 是 ， 为 了 得 到 最 终 的 字符 串 ， 会 调用 数组 每 








toString () 方 法 。 


let personl 


toLocaleString() 
"N 


return 


}, 


toStaErng(y) 
return 
} 
过 


let person2 


toLocaleString() 
"G 


return 


}, 


EOStELNg() 
return 
} 
Fs 


let people 


"nN 


"G 





看 下 面 的 例子 : 


{ 
{ 


ikolaos"; 


{ 


icholas"; 


{ 
{ 


到 于 可 加 下 工本 总 下 


{ 


reg"; 


[person1l, 


alert (people); 
alert (people.toString()); 


alert (people.toLocaleString()); 








person2]; 


// Nicholas,Greg 
// Nicholas,Greg 
// Nikolaos,Grigorios 


) 显示 数组 





， 因 为 alert () 期待 字符 

















人 oo 








) 相同 的 结果 ， 但 也 不 一 定 。 在 
个 逗号 分 隔 的 数组 值 的 字符 串 。 它 与 男 外 两 个 方法 
个 值 的 toLocalestring() 方 法 ， 而 不 是 


这 里 定义 了 两 个 对 象 person1 和 person2 , 它们 都 定义 了 tostring() 和 toLocaleSstring () 方 


法 , 而 且 返 





输出 的 是 "Nicholas,Greg"， 这 是 


结果 一 样 )。 而 在 





toString() 方 法 


Grigorios"， 这 是 
继承 的 方法 to 











办 | 








因为 调用 了 数组 


LocaleString 








用 不 同 的 分 隔 符 ， 则 可 以 使 用 join () 
有 项 的 字符 串 。 来 看 下 面 的 例子 : 


let colors 
alert 
alert 


这 里 在 colors 数组 上 调用 了 join () 方 法 ， 


(OOLOPS .TOLN (i 
(colors.join("| 


["red", "green", 


上 
i 





























回 不 同 的 值 。 然后 又 创建 了 一 个 包含 这 两 个 对 象 的 数组 people。 在 将 数组 传 给 alert () 








为 会 在 数组 每 一 项 上 调 月 








有 tostring() 


周 用 数组 的 toLocalestring() 方 法 时 ， 结 
) 以 及 tostring() 都 返回 数组 值 的 逗号 





一 项 的 toLocaleString () 方 法 。 





时 ， 
() 方 法 (与 下 一 行 显 式 调用 
变 成 了 "Nikolaos， 


号 te ta 使 








方法 。join () 方 法 接收 一 个 参数 ， 即 字符 串 分 隔 符 ， 


"blue"]; 
// red,green,blue 
// redllgreen||blue 





得 到 了 与 调用 tostring ( 


回 包 含 所 


) 方 法 相同 的 结果 。 传 入 去 











号 ， 结 果 就 是 逗号 分 隔 的 字符 串 。 最 后 一 行 给 join() 传 人 了 双 竖 线 ， 得 到 了 字符 串 
"red| 1green||blue"。 如果 不 给 join() 传 人 任何 参数 , 或 者 传人 undefined, 则 仍然 使 用 逗号 作为 





分 隔 符 。 
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注意 ”如果 数 组 中 某 一 项 是 null 或 undefined， 则 在 join()、toLocalestring()、 


toString() 和 value0f() 返 回 的 结果 中 会 以 空 字 符 串 表示 。 





6.2.8” 栈 方法 


ECMAScript 给 数组 提供 几 个 方法 ， 让 它 看 起 来 像 是 男 外 一 种 数据 结构 。 数 组 对 象 可 以 像 栈 一 样 ， 
也 就 是 一 种 限制 插入 和 删除 项 的 数据 结构 。 栈 是 一 种 后 进 先 出 (LIFO，Last-In-First-Out ) 的 结构 ， 也 就 
是 最 近 添 加 的 项 先 被 删除 。 数 据 项 的 插入 〔 称 为 推 入 ，push ) 和 删除 ( 称 为 弹出 ，pop ) 只 在 栈 的 一 个 
地 方 发 生 ， 即 栈 顶 。ECMAScript 数组 提供 了 push () 和 pop () 方 法 ， 以 实现 类 似 栈 的 行为 。 

push () 方 法 接收 任意 数量 的 参数 ,并 将 它们 添加 到 数组 未 尾 , 返回 数组 的 最 新 长 度 。pop () 方 法 则 
用 于 删除 数组 的 最 后 一 项 ， 同 时 减少 数组 的 length 值 ， 返 回 被 删除 的 项 。 来 看 下 面 的 例子 : 


















































let colors = new Array(); // 创建 一 个 数组 
let count = colors.push("red",， "green"); // 推 入 两 项 
alert (count); // 2 

count = colors.push("black"); // 再 推 入 一 项 

alert (count); A 

let item = colors.pop(); // 取得 最 后 一 项 

alert (item); /BLack 

alert (colors.length); J 


这 里 创建 了 一 个 当 作 栈 来 使 用 的 数组 ( 注意 不 需要 任何 额外 的 代码 ，push () 和 pop () 都 是 数组 的 
默认 方法 )。 首 先 ， 使 用 push () 方 法 把 两 个 字符 串 推 入 数组 末尾 ， 将 结果 保存 在 变量 count 中 (结果 
为 2 )。 

然后 ,再 推 人 另 一 个 值 ， 再 把 结果 保存 在 count 中 。 因 为 现在 数组 中 有 3 个 元 素 ， 所 以 push () 返 
回 3。 在 调用 pop () 时 ,会 返回 数组 的 最 后 一 项 ， 即 字符 串 "black"。 此 时 数组 还 有 两 个 元 素 。 

栈 方法 可 以 与 数组 的 其 他 任何 方法 一 起 使 用 ， 如 下 例 所 示 : 







































































let colors = ["red", "blue"]; 

colors.push ("brown"); // 再 添加 一 项 
colors[3] = "black"; // 添加 一 项 
alert (colors.length); // 4 

let item = colors.pop(); // 取得 最 后 一 项 
alert (item); // black 




















这 里 先 初 始 化 了 包含 两 个 字符 串 的 数组 ， 然 后 通过 pusnh () 添加 了 第 三 个 值 ， 第 四 个 值 是 通过 直接 
在 位 置 3 上 赋值 添加 的 。 调 用 pop () 时 ,返回 了 字符 串 "black"， 也 就 是 最 后 添加 到 数组 的 字符 串 。 


6.2.9 队列 方法 


就 像 栈 是 以 LIFO 形式 限制 访问 的 数据 结构 一 样 ， 队 列 以 先进 先 出 (FIFO ，First-In-First-Out ) 形式 
限制 访问 。 队 列 在 列表 末尾 添加 数据 , 但 从 列表 开头 获取 数据 。 因为 有 了 在 数据 未 尾 添加 数据 的 push () 
方法 , 所 以 要 模拟 队列 就 差 一 个 从 数组 开头 取得 数据 的 方法 了 。 这 个 数组 方法 叫 shift () ， 它 会 删除 数 
组 的 第 一 项 并 返回 它 ， 然 后 数组 长 度 减 1。 使 用 shift () 和 push()， 可 以 把 数组 当成 队列 来 使 用 : 






































wr 
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let colors = new Array(); // 创建 一 个 数组 
let count = colors.push("red"，"green"); // 推 入 两 项 
alert (count); // 2 
count = colors.push("black"); // 再 推 入 一 项 
alert (count); Nt 
let :item = colors.shift(); // 取得 第 一 项 
alert (item); // red 


alert (colors.length); /这 "如 


这 个 例子 创建 了 一 个 数组 并 用 push () 方 法 推 信 三 个 值 。 加 粗 的 那 行 代码 使 用 shi ft ( 
"green" 成 为 第 一 个 元 素 ，"plack" 成 为 第 二 个 元 素 ， 数 


数组 的 第 一 项 ， 即 "red"。 

组 此 时 就 包含 两 项 。 
ECMAScript 也 为 数组 提供 了 unshift 

操作 : 在 数组 开头 添加 任意 多 个 值 ， 然 后 


删除 这 一 项 之 后 ， 




















() 方 法 。 顾名思义 , unshift () 
ee 


) 方 法 








就 是 执行 跟 shift () 











新 的 数组 长 度 。 通 过 使 用 unshift () 








和 pop( 














相反 方向 上 模拟 队列 ， 即 在 数组 开头 添加 新 数据 ， 在 数组 末尾 取得 数据 ， 如 下 例 所 示 : 
let colors = new Artray(); // 创建 一 个 数组 
let count = colors.unshift("red"，, "green"); // 从 数组 开头 推 入 两 项 
alert (count); {i 2 
count = colors.unshift("black"); // 再 推 入 一 项 
alert (count); ye: 


let item = colors.pop(); 






























































// 取得 最 后 一 项 











































































































取得 了 


相反 的 


) ， 可 以 在 





alert (item) // green 

alert (colors.length); // 2 

这 里 ， 先 创建 一 个 数组 ， 再 通过 unshi ft () 填 充 数组 。 首先, 给 数组 添加 "red" 和 "green"， 再 添 
加 "black"， 得 到 ["black", "red", "green"]。 调 用 pop() 时 ,删除 最 后 一 项 "green" 并 返回 它 。 
6.2.10 ”排序 方法 

数组 有 两 个 方法 可 以 用 来 对 元 素 重新 排序 : reverse () 和 sort ()。 顾 名 思 义 ，reverse() 方 法 就 
是 将 数组 元 素 反 向 排列 。 比 如 : 

let Valueés = [LE 三 3 4y 5 

values.reverse(); 

alert (values); // 5,4,3,2,1 

这 里 ， 数组 values 的 初始 状态 为 [1,2,3,4,5] 。 通 过 调用 reverse() 反 向 排序 ， 得 到 了 
[5,4,3,2,1]。 这 个 方法 很 直观 ， 但 不 够 灵活 ， 所 以 才 有 了 sort () 方 法 。 

默认 情况 下 ， sort () 会 按照 升序 重新 排列 数组 元 素 ， 即 最 小 的 值 在 前 面 ， 最 大 的 值 在 后 面 。 为 此 ， 
sort () 会 在 每 一 项 上 调用 String () 转 型 函数 ,然后 比较 字符 串 来 决定 顺序 ,即使 数组 的 元 素 都 是 数值 ， 
也 会 先 把 数组 转换 为 字符 串 再 比较 、 排 序 。 比 如 : 

let values = [0, 1, 5, 10, 15]; 

values.sort(); 

alert (values); // 0,1,10,15,5 

一 开始 数组 中 数值 的 顺序 是 正确 的 , 但 调用 sort () 会 按照 这 些 数 值 的 字符 串 形式 重新 排序 。 因此， 
即使 5 小 于 10， 但 字符 串 "10" 在 字符 串 "5" 的 前 头 ， 所 以 10 还 是 会 排 到 5 前 面 。 很 明显 ， 这 在 多 数 情 
况 下 都 不 是 最 合适 的 。 为 此 ，sort () 方 法 可 以 接收 一 个 比较 函数 ， 用 于 判断 哪个 值 应 该 排 在 前 面 。 
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比较 函数 接收 两 个 参数 ， 如 果 第 一 个 参数 应 该 排 在 第 二 个 参数 前 面 ， 就 返回 负 值 ; 如 果 两 个 参数 相 
等 ， 就 返回 0; 如 果 第 一 个 参数 应 该 排 在 第 二 个 参数 后 面 ， 就 返回 正 值 。 下 面 是 使 用 简单 比较 函数 的 一 
个 例子 : 


function compare(valuel, value2) { 
if (valuel < value2) { 
return -1; 
} else if (valuel > value2) { 
return 1; 
} else { 
return 0; 








} 





个 比较 函数 可 以 适用 于 大 多 数 数据 类 型 ， 可 以 把 它 当 作 参 数 传 给 sort () 方 法 ， 如 下 所 示 : 


Jet valuees = [0, 57.10 5] 过 
values.sort (compare); 
alert(values)y. yy/ 0rLS510;15 





在 给 sort () 方 法 传 入 比较 函数 后 ， 数 组 中 的 数值 在 排序 后 保持 了 正确 的 顺序 。 当 然 ， 比 较 函 数 也 
可 以 产生 降序 效果 ， 只 要 把 返回 值 交换 一 下 即 可 : 


function compare(valuel, value2) { 
if (valuel < value2) { 

return 1; 

else if (valuel > value2) { 

return -1; 


一 


} else { 
return 0; 
} 
} 
let values. = [0 1 5; 0% 151; 
values.sort (compare); 
alert'(values)3 ALS5aL0.rSDNLi0 


此 外 ， 这 个 比较 函数 还 可 简写 为 一 个 箭头 函数 : 


let values = 
Values Sort((a bb) => a < bb 2 1 :a bb 1 0)3 
alert (valtes)s .FA T1510x5nLad 


) 
在 这 个 修改 版 函数 中 ， 如 果 第 一 个 值 应 该 排 在 第 二 个 值 后 面 则 返回 1， 如 果 第 一 个 值 应 该 排 在 第 二 
个 值 前 面 则 返回 -1。 交 换 这 两 个 返回 值 之 后 ， 较 大 的 值 就 会 排 在 前 头 ， 数 组 就 会 按照 降序 排序 。 当 然 ， 
如 果 只 是 想 反 转 数组 的 顺序 ，reverse () 更 简单 也 更 快 

































































注意 reverse() 和 sort () 都 返回 调用 它们 的 数组 的 引用 。 











如 果 数 组 的 元 素 是 数值 ， 或 者 是 其 valueof () 方 法 返回 数值 的 对 象 (如 Date 对 象 )， 这 个 比较 函 
数 还 可 以 写 得 更 简单 ， 因 为 这 时 可 以 直接 用 第 二 个 值 减 去 第 一 个 值 : 
function compare(valuel, value2)t{ 


return value2 - valuel; 


} 
比较 函数 就 是 要 返回 小 于 0、0 和 大 于 0 的 数值 ， 因 此 减法 操作 完全 可 以 满足 要 求 。 
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6.2.11 ”操作 方法 








对 于 数组 中 的 元 素 ， 我 们 有 很 多 操作 方法 。 比 如 ，concat () 方 法 可 以 在 现 有 数组 全 部 元 素 基础 上 











创建 一 个 新 数组 。 它 首先 会 创建 一 个 当前 数组 的 副本 ,然后 再 把 它 的 参数 添加 到 副本 末尾 ,最 后 返回 这 
个 新 构建 的 数组 。 如 果 传 入 一 个 或 多 个 数组 ， 则 concat () 会 把 这 些 数组 的 每 一 项 都 添加 到 结果 数组 。 



































如 果 参 数 不 是 数组 ， 则 直接 把 它们 添加 到 结果 数组 未 尾 。 来 看 下 面 的 例子 : 


let colors = ["red", "green", "blue"]; 

let colors2 = colors.concat ("yellow", ["black", "brown"]);} 
console.log(colors);} // ["red", "green","blue"] 

console.log(colors2); // ["red", "green", "blue", "yellow", "black", "brown"] 


/EE nn 








这 里 先 创建 一 个 包含 3 个 值 的 数组 colors。 然后 colors 调用 concat () 方 法 , 传人 字符 串 "yellow" 
和 一 个 包含 "black" 和 "brown" 的 数组 。 保 存在 colors2 中 的 结果 就 是 ["red",， "green",， "blue",， 





"yellow"，"black"，"brown"]。 原 始 数 组 colors 保持 不 变 。 














打 平 数组 参数 的 行为 可 以 重 写 ， 方 法 是 在 参数 数组 上 指定 一 个 特殊 的 符号 : Symbol .isconcat- 
Spreadable。 这 个 符号 能 够 阻止 concat () 打 平 参数 数组 。 相 反 ， 把 这 个 值 设置 为 true 可 以 强制 打 平 














类 数组 对 象 : 
let colors = ["red", "green", "blue"]; 
Jet newColors = ["black", "brown"]; 
Jet moreNewColors = { 
[Symbol .isConcatSpreadable] : true, 
length: 2， 
0 MBLNkY; 
ds “Ma 
ee 
newColors[Symbol.isConcatSpreadable] = false; 


// 强制 不 打 平 数 和 


let colors2 = colors.concat ("yellow", newColors); 














// 强制 打 平 类 数组 对 象 


Jet colors3 = colors.concat (moreNewColors); 


console.log(colors);} // ["red", "green", "blue"] 
console.log(colors2); // ["red", "green", "blue", "yellow", ["black", "brown"]] 
console.log(colors3); // ["red", "green", "blue", "pink", "cyan"l] 

















接 下 来 , 方法 slice() 用 于 创建 一 个 包含 原 有 数组 中 一 个 或 多 个 元 素 的 新 数组 。 slice() 方 法 可 以 
接收 一 个 或 两 个 参数 : 返回 元 素 的 开始 索引 和 结束 索引 。 如 果 只 有 一 个 参数 , 则 slice () 会 返回 该 索引 


























到 数组 末尾 的 所 有 元 素 。 如 果 有 两 个 参数 , 则 slice () 返 回 从 开始 索引 到 结束 索引 对 应 的 所 有 元 素 ， 

















! 不 包含 结束 索引 对 应 的 元 素 。 记 住 ， 这 个 操作 不 影响 原始 数组 。 来 看 下 面 的 例子 : 
let colors = ["red", "green", "blue", "yellow", "purple"]; 


let colors2 = colors.slice(1); 
let colors3 = colors.slice(1, 4); 














alert (colors2); // green,blue,yellow,purple 
alert (colors3); // green,blue,yellow 











其 


一 





这 里 ，colors 数组 一 开始 有 5 个 元 素 。 调 用 slice () 传 人 1 会 得 到 包含 4 个 元 素 的 新 数组 。 其 中 
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不 包括 "red"， 这 是 因为 拆 分 操作 要 从 位 置 1 开始 ， 即 从 "green" 开 始 。 得 到 的 colors2 数组 包含 
"green"、"blue"、"yellow" 和 "purple"。colors3 数组 是 通过 调用 siice() 并 传人 1 和 4 得 到 的 ， 
即 从 位 置 1 开始 复制 到 位 置 3。 因 此 colors3 包含 "green"、"blue" 和 "yellow"。 











如 果 slice() 的 参数 有 负 值 ,那么 就 以 数值 长 度 加 上 这 个 负 值 的 结果 确定 位 置 。 比 
， 在 包含 5 个 元 素 的 数组 上 调用 slice(-2,-1)， 就 相当 于 调用 slice (3,4)。 如 果 结 


于 开始 位 置 ， 则 返回 空 数组 。 














或 许 最 强大 的 数组 方法 就 属 splice() 了 ， 使 用 它 的 方式 可 以 有 很 多 种 。splice () 的 主要 目的 是 

在 数组 中 间 插 入 元 素 , 但 有 3 种 不 同 的 方式 使 用 这 个 方法 。 

口 删除 。 需 要 给 splice () 传 2 个 参数 : 要 删除 的 第 一 个 元 素 的 位 置 和 要 删除 的 元 素数 量 。 可 以 从 

ee 比如 splice(0，2) 会 删除 前 两 个 元 素 。 

口 插入 。 需 要 给 splice () 传 3 个 参数 ， 0( 要 删除 的 元 素数 量 ) 和 要 插入 的 元 素 ， 可 
ta 第 三 个 参数 之 后 还 可 以 传 第 四 个 、 第 五 个 参数 ， 乃 至 任意 多 
个 要 插入 的 元 素 。 比 如 ，splice(2，0，"red"，"green") 会 从 数组 位 置 2 开始 插入 字符 串 
"red" 和 "green"。 

口 替换 。splice () 在 删除 元 素 的 同时 可 以 在 指定 位 置 插入 新 元 素 ， 同 样 要 传人 3 个 参数 : 开始 位 

置 、 要 删除 元 素 的 数量 和 要 插入 的 任意 多 个 元 素 。 要 插入 的 元 素数 量 不 一 定 跟 删 除 的 元 素数 量 

一 致 。 比 如 ，splice(2，1，"red"，"green") 会 在 位 置 2 删除 一 个 元 素 ， 然 后 从 该 位 置 开 始 
向 数组 中 搬入 "redq" 和 "green"。 
splice() 方 法 始终 返回 这 样 一 个 数组 ， 它 包含 从 数组 中 被 删除 的 元 素 〈 如果 没 有 删除 元 素 ， 则 返 

回 空 数组 )。 以 下 示例 展示 了 上 述 3 种 使 用 方式 。 








































































































let colors = ["red", "green", "blue"]; 

let removed = colors.splice(0,1); // 删除 第 一 项 

alert (colors); // green,blue 

alert (removed); // red， 只 有 一 个 元 素 的 数组 

removed = colors.splice(1, 0, "yellow", "orange"); // 在 位 置 1 插入 两 个 元 素 

alert (colors); // green,yellow,orange,blue 
alert (emoved) ; // 空 数组 

removed = colors.splice(1，1， "red"，"purple"); // 插入 两 个 值 ， 删 除 一 个 元 素 

alert (colors) ; // green,red,purple,orange,blue 
alert (removed); // yellow， 只 有 一 个 元 素 的 数组 

















这 个 例子 中 ,colors 数组 一 开始 包含 3 个 元 素 。 第 一 次 调用 splice () 时 ,只 删除 了 第 一 项 ,colors 
中 还 有 "green" 和 "blue"。 第 二 次 调用 slice() 时 , 在 位 置 1 搬入 两 项 ， 然 后 colors 包含 "green"、 
"yellow" 、"orange" 和 "blue"。 这 次 没 删 除 任 何 项 ， 因 此 返回 空 数组 。 最 后 一 次 调用 splice() 时 
删除 了 位 置 1 上 的 一 项 , 同时 又 插入 了 "redq" 和 "purple"。 最 后 ,colors 数组 包含 "green"、"red"、 
"purple"、"orange" 和 "blue"。 


6.2.12 ”搜索 和 位 置 方 法 
ECMAScript 提供 两 类 搜索 数组 的 方法 : 按 严格 相等 搜索 和 按 断 言 函数 搜索 。 
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1. 严格 相等 


ECMAScript 提供 了 3 个 严格 相等 的 搜索 方法 : inqexof ()、 


lastIndex0of () 和 includes()。 其 














中 ， 前 两 个 方法 在 所 有 版 本 中 都 可 用 ， 而 第 三 个 方法 是 ECMAScript 7 新 增 的 。 这 些 方法 都 接收 两 个 参 
数 : 要 查找 的 元 素 和 一 个 可 选 的 起 始 搜索 位 置 。inqexof () 和 includes () 方 法 从 数组 前 头 (第 一 项 ) 


开始 向 后 搜索 ， 而 lastIndqexof () 从 数组 


indexO 





includes () 返 

















未 尾 〈 最 后 一 项 ) 开始 向 前 搜索 。 
E() 和 lastIndexof () 都 返回 要 查找 的 元 素 在 数组 中 的 位 置 ， 如 果 没 找到 则 返回 -1。 
回 布尔 值 ， 表 示 是 否 至 少 找到 一 个 与 指定 元 素 匹 配 的 项 。 














在 比较 第 一 个 参数 跟 数 组 每 一 


项 时 ,会 使 用 全 等 (=== ) 比较 ， 也 就 是 说 两 项 必须 严格 相等 。 下 面 来 看 一 些 例子 : 








Let Tumberess Ly 3337 D7 WM 3 2 rhs 
alert (numbers.indexOf (4)); NA 
alert (numbers.lastIndexOof (4) ) /5 
alert (numbers.includes (4)); // true 
alert (numbers.indexOf (4, 4)); // 5 
alert (numbers.lastIndexOf (4, 4)); NA 这 
alert (numbers.includes (4, 7)); // false 
let person = { name: "Nicholas" }; 

let people = [{ name: "Nicholas" }]; 

let morePeople = [person]; 

alert (people.indexOf (person)); A 
alert (morePeople.indexOf (person)); // 0 
alert (people.includes (person)); // false 
alert (morePeople.includes (person)); // true 


2. 断言 函数 
ECMAScript 也 允许 按照 定义 的 断言 也 数 搜索 数组 ， 每 个 索引 都 会 调用 这 个 函数 。 断 言 函 数 的 返回 
值 决 定 了 相应 索引 的 元 素 是 否 被 认为 匹配 。 
断言 函数 接收 3 个 参数 : 元 素 、 索 引 和 数组 本 身 。 其 中 元 素 是 数组 中 当前 搜索 的 元 素 ,索引 是 当前 
元 素 的 索引 ， 而 数组 就 是 正在 搜索 的 数组 。 断 言 函 数 返 回 真 值 ， 表 示 是 否 匹 配 。 
find() 和 findIndex() 方 法 使 用 了 断言 函数 。 这 两 个 方法 都 从 数组 的 最 小 索引 开始 。fina() 返 回 
和 一 个 匹配 的 元 素 , findIndex() 返 回 第 一 个 匹配 元 素 的 索引 。 这 两 个 方法 也 都 接收 第 二 个 可 选 的 参数 ， 
用 于 指定 断言 郴 数 内 部 this 的 值 。 
const people = [ 
{ 


name: 
age: 





























六 








yy 





"Matt", 
2.7 


"Nicholas", 
29 


name: 
age: 
} 
J 


alert (people.find( (element, index, array) => element.age < 28)); 
// {name: "Matt", age: 27} 
alert (people.findIndex( (element, index, array) => element .age < 28)); 


LQ 
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找到 匹配 项 后 ， 这 两 个 方法 都 不 再 继续 搜索 。 


const evens = [2, 4, 6]; 











// 找到 匹配 后 ， 永 远 不 会 检查 数组 的 最 后 一 个 元 素 
evens.find((element, index, array) => { 
console.log(element); 
console.log (index); 
console.log(array); 


return element === 4; 

}); 

// 2 

// 0 

// [2, 4, 6] 

// 4 

4 

PA | 


6.2.13 ”和 迭代 方法 


ECMAScript 为 数组 定义 了 5 个 迭代 方法 。 每 个 方法 接收 两 个 参数 ， 以 每 一 项 为 参数 运行 的 函数 ， 
以 及 可 选 的 作为 函数 运行 上 下 文 的 作用 域 对 象 (影响 函数 中 this 的 值 )。 传 给 每 个 方法 的 函数 接收 3 GI 
个 参数 : 数组 元 素 、 元 素 索 引 和 数组 本 身 。 因 具体 方法 而 异 ， 这 个 函数 的 执行 结果 可 能 会 也 可 能 不 会 影 
响 方法 的 返回 值 。 数 组 的 5 个 迭代 方法 如 下 。 
口 every () : 对 数组 每 一 项 都 运行 传人 的 函数 , 如 果 对 每 一 项 函数 都 返回 true, 则 这 个 方法 返回 true。 
口 filter(): 对 数组 每 一 项 都 运行 传人 的 函数 ， 函 数 返回 true 的 项 会 组 成 数组 之 后 返回 。 
口 forEach () : 对 数组 每 一 项 都 运行 传人 的 函数 ， 没 有 返回 值 。 
口 mnap () : 对 数组 每 一 项 都 运行 传人 的 函数 ， 返 回 由 每 次 函数 调用 的 结果 构成 的 数组 。 
口 some () : 对 数组 每 一 项 都 运行 传人 的 函数 , 如 果 有 一 项 函数 返回 true, 则 这 个 方法 返回 true。 
这 些 方法 都 不 改变 调用 它们 的 数组 。 

在 这 些 方法 中 ,every () 和 some () 是 最 相似 的 ， 都 是 从 数组 中 搜索 符合 某 个 条 件 的 元 素 。 对 every () 
来 说 , 传人 的 函数 必须 对 每 一 项 都 返回 true, 它 才 会 返回 true; 否则 , 它 就 返回 false。 而 对 some () 
来 说 ， 只 要 有 一 项 让 传人 的 函数 返回 true， 它 就 会 返回 true。 下面 是 一 个 例子 : 































































































ie 

let everyResult = numbers .every ((item, index, array) => item > 2); 
alert (everyResult); // false 

let someResult = numbers.some((item, index, array) => item > 2); 
alert (someResult); // true 

















以 上 代码 调用 了 every () 和 some () ， 传 人 的 函数 都 是 在 给 定 项 大 于 2 时 返回 true。every () 返 
回 false i ee te 而 some () 返 回 true 是 因为 至 少 有 一 项 满足 条 件 。 

下 面 再 看 一 看 filter () 方 法 。 这 个 方法 基于 给 定 的 函数 来 决定 某 一 项 是 否 应 该 包含 在 它 返回 的 数 
组 中 。 比 如 ， 要 返回 一 个 所 有 数值 都 大 于 2 的 数组 ， 可 以 使 用 如 下 代码 : 


ret munmders:. er [1 2 3%, 各 光学 -人 人才] 
































let filterResult = numbers.filter((item, index, array) => item > 2); 
alert (filterResult); // 3,4,5,4,3 
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这 里 , 调用 filter() 返 回 的 数组 包含 3、4、5、4、3，, 因为 只 有 对 这 些 项 传人 的 函数 才 返回 true。 
这 个 方法 非常 适合 从 数组 中 筛选 满足 给 定 条 件 的 元 素 。 

接 下 来 map ( ) 方法 也 会 返回 一 个 数组 。 这 个 数组 的 每 一 项 都 是 对 原始 数组 中 同样 位 置 的 元 素 运 行 传 
人 函数 而 返回 的 结果 。 例 如 ， 可 以 将 一 个 数组 中 的 每 一 项 都 乘 以 2， 并 返回 包含 所 有 结果 的 数组 ， 如 下 
所 示 : 


et merer se 外 下 区 3 大/ 坟 交 证 二 全 十 这 













































































let mapResult = numbers.map((item, index, array) => item * 2) 

alert (mapResult); // 2,4,6,8,10,8,6,4,2 

以 上 代码 返回 了 一 个 数组 , 包含 原始 数组 中 每 个 值 乘 以 2 的 结果 。 这 个 方法 非常 适合 创建 一 个 与 原 
始 数组 元 素 一 一 对 应 的 新 数组 。 

最 后 ， 再 来 看 一 看 forEach () 方 法 。 这 个 方法 只 会 对 每 一 项 运行 传人 的 函数 ， 没 有 返回 值 。 本 质 
上 ，forEach () 方 法 相当 于 使 用 for 循环 遍历 数组 。 比 如 : 


Tet 全 了 D3 A SA 3 2 TL] 




















numbers.forEach( (item, index, array) => { 
// 执行 某 些 操作 
Es 


数组 的 这 些 迭 代 方 法 通过 执行 不 同 操作 方便 了 对 数组 的 处 理 。 
6.2.14 ”归并 方法 


ECMAScript 为 数组 提供 了 两 个 归并 方法 : reduce () 和 reduceRight ()。 这 两 个 方法 都 会 迭代 数 
组 的 所 有 项 ， 并 在 此 基础 上 构建 一 个 最 终 返 回 值 。reduce() 方 法 从 数组 第 一 项 开始 遍历 到 最 后 一 项 。 
而 reduceRight () 从 最 后 一 项 开始 遍历 至 第 一 项 。 

这 两 个 方法 都 接收 两 个 参数 : 对 每 一 项 都 会 运行 的 归并 函数 ,以 及 可 选 的 以 之 为 归并 起 点 的 初始 值 。 
传 给 reduce () 和 reduceRight () 的 函数 接收 4 个 参数 : 上 一 个 归并 值 、 当 前 项 、 当 前 项 的 索引 和 数 
组 本 身 。 这 个 函数 返回 的 任何 值 都 会 作为 下 一 次 调用 同一 个 函数 的 第 一 个 参数 。 如 果 没 有 给 这 两 个 方法 
传人 可 选 的 第 二 个 参数 (作为 归并 起 点 值 )， 则 第 一 次 迭代 将 从 数组 的 第 二 项 开始 ， 因 此 传 给 归并 函数 
的 第 一 个 参数 是 数组 的 第 一 项 ， 第 二 个 参数 是 数组 的 第 二 项 。 

可 以 使 用 reduce () 函数 执行 累加 数组 中 所 有 数值 的 操作 ， 比 如 : 


let values. = 211 23 3,. vd 51 
Jet sum = values.reduce((prev, cur, index, array) => prev + cur); 

























































































alert(sum); // 15 

第 一 次 执行 归并 函数 时 ，prev 是 1，cur 是 2。 第 二 次 执行 时 ，prev 是 3 (1+2)，cur 是 3 ( 数 

组 第 三 项 )。 如 此 递 进 ， 直 到 把 所 有 项 都 遍历 一 次 ， 最 后 返回 归并 结果 。 
reduceRight () 方 法 与 之 类 似 ， 只 是 方向 相反 。 来 看 下 面 的 例子 : 


二 全 世人 全 = 11, 2.7 3;. MH). .B13 

let sum = values.reduceRight (function(prev, cur, index, array){ 
return preyv + cur; 

3 

alert (sum); // 15 
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在 这 里 ， 第 一 次 调用 归并 函数 时 prev 是 5， 而 cur 是 4。 当 然 ， 最 终结 果 相 同 ， 因 为 归并 操作 都 
是 简单 的 加 法 。 

究竟 是 使 用 reduce () 还 是 reduceRight ()， 只 取决 于 遍历 数组 元 素 的 方向 。 除 此 之 外 ， 这 两 个 
方法 没什么 区 别 。 


6.3 ”定型 数组 


定型 数组 ( typed array ) 是 ECMAScript 新 增 的 结构 , 目的 是 提升 向 原生 库 传输 数据 的 效率 。 实际 上 ， 
JavaScript 并 没有 “TypedArray” 类 型 , 它 所 指 的 其 实 是 一 种 特殊 的 包含 数值 类 型 的 数组 。 为 理解 如 何 使 
用 定型 数组 ， 有 必要 先 了 解 一 下 它 的 用 途 。 


6.3.1 历史 


随 着 浏览 器 的 流行 ， 不 难 想象 人 们 会 满怀 期 待 地 通过 它 来 运行 复杂 的 3D 应 用 程序 。 早 在 2006 年 ， 
Mozilla、Opera 等 浏览 器 提供 商 就 实验 性 地 在 浏览 器 中 增加 了 用 于 泻 染 复杂 图 形 应 用 程序 的 编程 平台 ， 
无 须 安装 任何 插件 。 其 目标 是 开发 一 套 JavaScript API， 从 而 充分 利用 3D 图 形 API 和 GPU 加速， 以便 
在 <canvas> 元 素 上 演 染 复杂 的 图 形 。 

1. WebGL 

最 后 的 JavaScript API 是 基于 OpenGL ES ( OpenGL for Embedded Systems ) 2.0 规范 的 。OpenGL ES 
是 OpenGL 专注 于 2D 和 3D 计算 机 图 形 的 子 集 。 这 个 新 API 被 命名 为 WebGL ( Web Graphics Library )， 
于 2011 年 发 布 1.0 版 。 有 了 它 ， 开 发 者 就 能 够 编写 涉及 复杂 图 形 的 应 用 程序 ， 它 会 被 兼容 WebGL 的 浏 
览 器 原生 解释 执行 。 

在 WebGL 的 早期 版 本 中 , 因为 JavaScript 数组 与 原生 数组 之 间 不 匹配 , 所 以 出 现 了 性 能 问题 。 图 形 
驱动 程序 API 通常 不 需要 以 JavaScript 默认 双 精 度 浮 点 格式 传递 给 它们 的 数值 ， 而 这 恰恰 是 JavaScript 
数组 在 内 存 中 的 格式 。 因 此 ， 每 次 WebGL 与 JavaScript 运行 时 之 间 传 递 数组 时 ，WebGL 绑 定 都 需要 在 
目标 环境 分 配 新 数组 ， 以 其 当前 格式 迭代 数组 ， 然 后 将 数值 转型 为 新 数组 中 的 适当 格式 ， 而 这 些 要 花费 
很 多 时 间 。 

2. 定型 数组 

这 当然 是 难以 接受 的 ，Mozilla 为 解决 这 个 问题 而 实现 了 canvasFloatArray。 这 是 一 个 提供 
JavaScript 接口 的 、C 语 言 风格 的 浮 点 值 数组 。JavaScript 运行 时 使 用 这 个 类 型 可 以 分 配 、 读 取 和 写 人 数组 。 
这 个 数组 可 以 直接 传 给 底层 图 形 驱 动 程序 API， 也 可 以 直接 从 底层 获取 到 。 最 终 ，CanvasFloatArray 
变 成 了 Float32Array， 也 就 是 今天 定型 数组 中 可 用 的 第 一 个 “类 型 ”。 






















































































































































































6.3.2 ArrayBuffer 


Float32Array 实际 上 是 一 种 “视图 ”， 可 以 允许 JavaScript 运行 时 访问 一 块 名 为 ArrayBuffer 的 
预 分 配 内 存 。ArrayBuffer 是 所 有 定型 数组 及 视图 引用 的 基本 单位 。 








注意 SharegdArrayBuffer 是 ArrayBuffer 的 一 个 变 体 ， 可 以 无 须 复制 就 在 执行 上 下 





文 间 传 递 它 。 关 于 这 种 类 型 ， 请 参考 第 27 章 。 
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ArrayBuffer () 是 一 个 普通 的 JavaScript 构造 函数 ， 可 用 于 在 内 存 中 分 配 特定 数量 的 字 节 空间 。 


const buf = new ArrayBuffer(16); // 在 内 存 中 分 配 16 字 节 
alert (buf.byteLength); /6 


ArrayBuffer 一 经 创建 就 不 能 再 调整 大 小 。 不 过 ， 可 以 使 用 slice() 复 制 其 全 部 或 部 分 到 一 个 新 
实例 中 : 


const bufl = new ArrayBuffer(16); 
Const buf2 = bufl.slice(4, 12); 
alert (buf2.byteLength); // 8 


ArrayBuffer 某 种 程度 上 类 似 于 C++ 的 malloc() ， 但 也 有 几 个 明显 的 区 别 。 
D malloc () 在 分 配 失败 时 会 返回 一 个 null 指针 。ArrayBuffer 在 分 配 失败 时 会 抛 出 错误 。 
口 malloc() 可 以 利用 虚拟 内 存 ， 因 此 最 大 可 分 配 尺 寸 只 受 可 寻 址 系统 内 存 限制 。ArrayBuffer 
分 配 的 内 存 不 能 超过 Number .MAX_SAFE_INTEGER (23 -1 ) 字 节 。 
口 malloc () 调用 成 功 不 会 初始 化 实际 的 地 址 。 声 明 ArrayBuffer 则 会 将 所 有 二 进 制 位 初始 化 
为 0。 
口 通过 malloc () 分 配 的 堆 内 存 除非 调用 free () 或 程序 退出 ， 和 否则 系统 不 能 再 使 用 。 而 通过 声明 

ArrayBuffer 分 配 的 堆 内 存 可 以 被 当成 垃圾 回收 ， 不 用 手动 释放 。 

不 能 仅 通过 对 ArrayBuffer 的 引用 就 读 取 或 写 人 其 内 容 。 要 读 取 或 写 人 ArrayBuffer， 就 必须 

通过 视图 。 视 图 有 不 同 的 类 型 ， 但 引用 的 都 是 ArrayBuffer 中 存储 的 二 进 制 数据 。 

















































































































6.3.3 DataView 


第 一 种 允许 你 读 写 ArrayBuffer 的 视图 是 DataView。 这 个 视图 专 为 文件 IO 和 网 络 WO 设计 , 其 
API 支持 对 缓冲 数据 的 高 度 控 制 ， 但 相 比 于 其 他 类 型 的 视图 性 能 也 差 一 些 。DataView 对 缓冲 内 容 没有 
任何 预 设 ， 也 不 能 迭代 。 

必须 在 对 已 有 的 ArrayBuffer 读 取 或 写 人 时 才能 创建 Dataview 实例 。 这 个 实例 可 以 使 用 全 部 或 
部 分 arrayBuffer， 且 维护 着 对 该 缓冲 实例 的 引用 ， 以 及 视图 在 缓冲 中 开始 的 位 置 。 


const buf = new ArrayBuffter(16) 


这 





















































// DataView 默认 使 用 整个 ArrayBuffer 
const fullDataView = new DataView (buf); 


alert (fullDataView.byteOffset); // 0 
alert (fullDataView.byteLength); 4A 6 
alert (fullDataView.buffer === buf); // true 


// 构造 函数 接收 一 个 可 选 的 字 节 偏 移 量 和 字 节 长 度 

// byteOffset=0 表示 视图 从 缓冲 起 点 开始 

// byteLength=8 限制 视图 为 前 8 个 字 节 

const firstHalfDataView = new DataView(buf, 0, 8); 





alert (firstHalfDataView.byteOffset).; LA- 0 
alert (firstHalfDataView.byteLength); // 8 
alert (firstHalfDataView.buffer === buf); // true 


// 如 果 不 指定 ， 则 DataView 会 使 用 剩余 的 缓冲 

// byteOffset=8 表示 视图 从 缓冲 的 第 9 个 字 节 开始 

// byteLength 未 指定 ， 默 认为 剩余 缓冲 

const secondHalfDataView = new DataView(buf, 8); 
alert (secondHalfDataView.byteOffset); A 
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ElementType， 然 后 DataView 就 会 忠实 


alert (secondHalfDataView.byteLength); 
alert (secondHalfDataView.buffer === buf); 


要 通过 DataView 读 取 缓冲 ， 还 需要 几 个 组 件 。 
口 首先 是 要 读 或 写 的 字 节 
口 DataView 应 该 使 用 
换 。 

口 最 后 是 内 存 中 值 的 字 


1. ElementType 



































节 序 。 默 认为 大 端 字 节 序 。 


放生 
// true 











Co 可 以 看 成 DatavView 中 的 某 种 “地 址 ”。 
ElementType 来 实现 JavaScript 的 Number 类 型 


J 到 缓冲 内 二 进 制 格 式 的 转 





DataView 对 存储 在 绥 冲 内 的 数据 类 型 没有 预 设 。 它 暴露 的 API 强制 开发 者 在 读 、 写 时 指定 一 个 





实地 为 读 、 





写 而 完成 相应 的 转换 。 


ECMAScript 6 支持 8 种 不 同 的 ElementType ( 见 下 表 )。 














里 











ElementType 字 节 说 明 等 价 的 C 类 型 值 的 范围 
Int8 1 8 位 有 符号 整数 signed char —128~127 
Uint8 1 8 位 无 符号 整数 unsigned char 0~255 
Int16 2 16 位 有 符号 整数 short -32 768~32 767 GI 
Uint16 之 16 位 无 符号 整数 unsigned short 0~65 535 
Int32 4 32 位 有 符号 整数 int -2 147 483 648~2 147 483 647 
Uint32 4 32 位 无 符号 整数 unsigned int 0~4 294 967 295 
Float32 4 32 位 IEEE-754 浮 点 数 float -3.4e+38~+3.4e+38 
Float64 8 64 位 IEEE-754 浮 点 数 double —1.7e+308~+1.7e+308 


Ww 





DatavView 为 上 表 中 的 每 种 类 型 都 
定位 要 读 取 或 写 人 值 的 位 置 。 类 到 


// 在 内 存 中 分 配 两 个 字 节 并 声明 一 个 DataView 
const buf = new ArrayBuffer(2); 
const view = new DataView (buf); 




















// 说 明 整 个 绥 冲 确实 所 有 二 进 制 位 部 是 0 
// 检查 第 一 个 和 第 二 个 字符 





alert (view.getInt8(0)); // 0 
alert (view.getInt8(1)); // 0 
// 检查 整个 缓冲 

alert (view.getInt16(0)); // 0 


// 将 整个 缓冲 都 设置 为 1 
// 255 的 二 进 制 表示 是 11111111 (2^8 - 1) 
view.setUint8(0, 255); 


// DataView 会 自动 将 数据 转换 为 特定 的 ElementType 
// 255 的 十 六 进 制 表示 是 0XFF 
view.setUint8(1, OxFF); 


// 现在 缓冲 里 都 是 1 了 
// 如 果 把 它 当 成 二 补 数 的 有 符号 整数 ， 则 应 该 是 -1 
alert (view.getInt16(0)); // -1 


暴露 了 get 和 set 方法 , 这 些 方法 使 用 byteoffset ( 字 节 
型 是 可 以 互 换 使 用 的 ， 如 下 例 所 示 : 


偏 移 


A 


第 集合 引用 类 型 


闫 


158 6 章 





2. 字 节 序 





前 面 例子 中 的 缓冲 有 意 回避 了 字 节 序 的 问题 。“ 字 节 序 ” 指 的 是 计算 系统 维护 的 一 种 字 节 顺序 的 约 





定 。DataView 只 文 持 两 种 约定 : 大 端 字 节 序 和 小 端 字 节 序 。 大 端 字 节 序 也 称 为 “网 络 字 节 序 "， 意 思 




















是 最 高 有 效 位 保存 在 第 一 个 字 节 ， 而 最 低 有 效 位 保存 在 最 后 一 个 字 节 。 小 端 字 节 序 正好 相反 ， 即 最 低 有 











效 位 保存 在 第 


个 字 节 ， 最 高 有 效 位 保存 在 最 后 一 个 字 贡 。 














JavaScript 运行 时 所 在 系统 的 原生 字 节 序 决 定 了 如 何 读 取 或 写 入 字 节 ,但 DataView 并 不 遵守 这 




















个 约定 。 对 一 段 内 存 而 言 ，DataVievw 是 一 个 
有 API 方 法 都 以 大 端 字 节 序 作 为 默认 值 ， 但 接 


字 节 序 。 


// 在 内 存 中 分 配 两 个 字 节 并 声明 一 个 DataView 


const buf = new ArrayBuffer(2); 
const view = new DataView (buf); 


// 填充 缓冲 ， 让 第 一 位 和 最 后 一 位 都 是 工 
view.setUint8(0, 0x80); 
view.setUint8(1, 0x01); 


缓冲 内 容 (为 方便 阅读 ， 人 为 加 了 空格 ) 
Ox8 0x0 0x0 0xl 
1000 0000 0000 0001 


按 大 端 字 节 序 读 取 Uint16 
0x80 是 高 字 节 ，0x01 是 低 字 节 
0x8001 = 2^15 + 2^0 = 32768 + 1 = 


alert (view.getUint16(0)); // 32769 


// 按 小 痛 字 节 序 读 取 Uint16 
// 0x01 是 高 字 节 ，0x80 是 低 字 节 
// 0x0180 = 2^8 + 2^7 = 256 + 128 = 


alert (view.getUint16(0, true)); 


// 按 大 端 字 节 序 写 入 Uint16 
view.setUint16(0, 0x0004); 


// 缓冲 内 容 (为 方便 阅读 ， 人 为 加 了 空格 ) 
// Ox0 0x0 0x0 0x4 
// 0000 0000 0000 0100 


alert (view.getUint8(0)); 
alert (view.getUint8(1)); 


// 按 小 端 字 节 序 写 入 Uint16 
view.setUint16(0, 0x0002, true); 
// 缓冲 内 容 (为 方便 阅读 ， 人 为 加 了 空格 ) 
// 0x0 0x2 0x0 0x0 

// 0000 0010 0000 0000 


alert (view.getUint8(0) ) 
alert (view.getUint8(1)); // 0 


3. 边 家 情形 


I 立 接口 ， 它 会 遵循 你 指定 的 字 节 序 。DataVievw 的 所 





必 一 个 可 选 的 布尔 值 参数 ， 设 置 为 Erue 即 可 启用 小 端 





// 设置 最 左边 的 位 等 于 1 
// 设置 最 右边 的 位 等 于 1 


32769 


384 
/74 384 


DataVievw 完成 读 、 写 操作 的 前 提 是 必须 有 充足 的 缓冲 区 ， 否 则 就 会 抛 出 RangeError: 
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const buf = new ArrayBuffer(6); 
const view = new DataView (buf); 





// 尝试 读 取 部 分 超出 缕 冲 范围 的 值 
view.getInt32(4); 
// RangeError 


// 尝试 读 取 超出 缓冲 范围 的 值 
view.getInt32(8); 
// RangeError 


// 尝试 读 取 超出 缓冲 范围 的 值 
view.getInt32(-1); 
// RangeError 








// 尝试 写 入 超出 缓冲 范围 的 值 
view.setInt32(4, 123); 
// RangeError 


DataView 在 写 人 缓冲 里 会 尽 最 大 努力 把 一 个 值 转换 为 适当 的 类 型 ， 后备 为 0。 如 果 无 法 转换 ， 则 


























抛 出 错误 : 
const buf = new ArrayBuffer(1); 
const view = new DataView (buf); 





view.setInt8(0, 1.5); 
alert (view.getInt8(0)); // 1 


view.setInt8(0, [4]); 
alert (view.getInt8(0)); // 4 





view.setInt8(0, 'f'); 
alert (view.getInt8(0)); // 0 











view.setInt8(0, Symbol ()); 
// TypeError 


6.3.4 定型 数组 


定型 数组 是 另 一 种 形式 的 ArrayBuffer 视图 。 虽然 概念 上 与 DataView 接近 ,但 定型 数组 的 区 别 
在 于 ， 它 特定 于 一 种 ElementType 日 遵循 系统 原生 的 字 节 序 。 相 应 地 ， 定 型 数组 提供 了 适用 面 更 广 的 
API 和 更 高 的 性 能 。 设 计 定 型 数组 的 目的 就 是 提高 与 WebGL 等 原生 库 交 换 二 进 制 数据 的 效率 。 由 于 定 
型 数组 的 二 进 制 表示 对 操作 系统 而 言 是 一 种 容易 使 用 的 格式 ，JavaScript 引擎 可 以 重度 优化 算术 运算 、 
按 位 运算 和 其 他 对 定型 数组 的 常见 操作 ， 因 此 使 用 它们 速度 极 快 。 

创建 定型 数组 的 方式 包括 读 取 已 有 的 缓冲 、 使 用 自 有 缓冲 、 填 充 可 迭代 结构 ， 以 及 填充 基于 任意 类 
型 的 定型 数组 。 另 外 ， 通 过 <ElementType> .from() 和 <ElementType>.of() 也 可 以 创建 定型 数组 ， 

// 创建 一 个 12 字 节 的 缓冲 

const buf = new ArrayBuffer(12); 

// 创建 一 个 引用 该 缓冲 的 Int32Array 

const ints = new Int32Array (buf); 

// 这 个 定型 数组 知道 自己 的 每 个 元 素 需要 4 字 节 

// 因此 长 度 为 3 

alert (ints.length); // 3 
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// 创建 一 个 长 度 为 6 的 Int32Array 

const ints2 = new Int32Array (6); 

// 每 个 数值 使 用 4 字 节 ， 因 此 ArrayBuffer 是 24 字 节 
alert (ints2.1length); OS 

// 类 似 DataView， 定 型 数组 也 有 一 个 指向 关联 疆 冲 的 引用 
alert (ints2.buffer.byteLength); // 24 


// 创建 一 个 包含 [2，4，6，8] 的 Int32Array 


const ints3 = new Int32Array ([2, 4, 6, 8]); 
alert (ints3.1length); // 4 
alert (ints3.buffer.byteLength); // 16 
alert (ints3[2]); 人 6 


// 通过 复制 ints3 的 值 创建 一 个 Int16Array 
const ints4 = new Intl6Array (ints3); 
// 这 个 新 类 型 数组 会 分 配 自己 的 缓冲 

// 对 应 索引 的 每 个 值 会 相应 地 转换 为 新 格式 


alert (ints4.1length); // 4 
alert (ints4.buffer.byteLength); // 8 
alert (ints4[2]); // 6 


// 基于 普通 数组 来 创建 一 个 Int16Array 





1 
alert (ints5.1length); L774 
alert (ints5.buffer.byteLength); // 8 
alert (ints5[2]); ZA 


// 基于 传 入 的 参数 创建 一 个 Float32Array 
tonst floats = Float32Array of(3.14, 25718, J.618)’3 


alert (floats.1length); fh 3 
alert (floats.buffer.byteLength); // 12 
alert (floats[2]); // 1.6180000305175781 











定型 数组 的 构造 函数 和 实例 都 有 一 个 BYTES_PER_ELEMENT 属性 , 返回 该 类 型 数组 中 每 个 元 素 的 大 小 : 














aler 
aler 


(Int16Array .BYTES_PER_ELEMENT); // 2 
(Int32Array .BYTES_PER_ELEMENT); // 4 





const ints = new Int32Array (1),， 
floats = new Float64Array (1); 


























alert (ints.BYTES_PER_ ELEMENT); // 4 

alert (floats.BYTES_PER_ELEMENT ) ， // 8 

如 果 定 型 数组 没有 用 任何 值 初始 化 ， 则 其 关联 的 缓冲 会 以 0 填充 : 
const ints = new Int32Array (4);，; 

alert (ints[0]); // 0 

alert (ints[1]); // 0 

alert (ints[2]); // 0 

alert (ints[3]); // 0 


1. 定型 数组 行为 

从 很 多 方面 看 ， 定 型 数组 与 普通 数组 都 很 相似 。 定 型 数组 支持 如 下 操作 符 、 方 法 和 属 
DI[] 

口 copyWithin () 

口 entries() 























性 
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口 
0 
< 
0 
S 
x 


Eyl (0) 
ter() 
) 
findIndex() 
forEach() 
indexOf () 
OTTi() 
keys () 
口 lastIndexOf () 
DQ length 

DO map () 

DQ reduce() 

DQ reduceRight () 
DQ reverse() 

DQ slice() 

口 some() 

口 sort () 


DQ toLocaleString() GI 
DQ toSstring () 


口 values () 
其 中 ,返回 新 数组 的 方法 也 会 返回 包含 同样 元 素 类 型 (element type ) 的 新 定型 数组 : 


const ints = new Intl6éArray ([1, 2, 3]); 
const doubleints = ints.map (x => 2*x); 
alert (doubleints instanceof Int16Array); // true 


定型 数组 有 一 个 Symbol .iterator 符号 属性 , 因此 可 以 通过 for. .of 循环 和 扩展 操作 符 来 操作 : 


const ints = new Intl6éArray ([1, 2, 3]); 
for (const int of ints) { 
alert (int); 
} 
AZ: 证 
/7 这 
// 3 


mh 1 
卢 - 


四 
3 
QQ 





DOODOOODODOODO 















































alert (Math.max(...ints)); // 3 


2. 合并 、 复 制 和 修改 定型 数组 
定型 数组 同样 使 用 数组 缓冲 来 存储 数据 ， 而 数组 缓冲 无 法 调整 大 小 。 因 此 ， 下 列 方法 不 适用 于 定型 
数组 : 
口 concat () 
口 pop () 
DQ push() 
口 shift() 
口 splice() 
DQ unshift() 
不 过 ， 定 型 数组 也 提供 了 两 个 新 方法 ， 可 以 快速 向 外 或 向 内 复制 数据 : set () 和 subarray ()。 
set () 从 提供 的 数组 或 定型 数组 中 把 值 复制 到 当前 定型 数组 中 指定 的 索引 位 置 : 
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// 创建 长 度 为 8 的 int16 数组 

const container = new Intl6Array (8); 
// 把 定型 数组 复制 为 前 4 个 值 

// 偏 移 量 默认 为 索引 0 

container.set (Int8Array.of(1, 2, 3, 4 
console.log(container); // [1,2,3 

// 把 普通 数组 复制 为 后 4 个 值 

// 偏 移 量 4 表示 从 索引 4 开始 插入 
container.set ([5,6,7,8], 4); 
console.log(container); // [1,2,3,4,5,6,7,8] 














// 溢出 会 抛 出 错误 
container.set ([5,6,7,8], 7); 
// RangeError 


subarray () 执行 与 set () 相反 的 操作 , 它 会 基于 从 原始 定型 数组 中 复制 的 值 返回 一 个 新 定型 数组 。 
复制 值 时 的 开始 索引 和 结束 索引 是 可 选 的 : 


const source = Intl6Array.of(2, 4, 6, 8); 

















// 把 整个 数组 复制 为 一 个 同类 型 的 新 数组 
const fullCopy = source.subarray ();} 
Console: log(fullCopy)$ /7/' [2 4; G7 9 


// 从 索引 2 开始 复制 数组 
const halfCopy = source.subarray (2); 
console.log(halfCopy); // [6, 8] 





// 从 索引 1 开始 复制 到 索引 3 
const partialCopy = source.subarray (1, 3); 
console.log(partialCopy); // [4, 6] 


定型 数组 没有 原生 的 拼接 能 力 ， 但 使 用 定型 数组 API 提供 的 很 多 工具 可 以 手动 构建 : 


// 第 一 个 参数 是 应 该 返回 的 数组 类 型 
// 其 余 参 数 是 应 该 拼接 在 一 起 的 定型 数组 












































function typedArrayConcat (typedArrayConstructor, ...typedArrays) { 
// 计算 所 有 数组 中 包含 的 元 素 总 数 
const numElements = typedArrays.reduce((x,y) => (x.length || x) + y.length); 


// 按照 提供 的 类 型 创建 一 个 数组 ， 为 所 有 元 素 留 出 空间 


const resultArray = new typedqArrayConsttructor (numElements) : 


// 依次 转移 数组 

let currentOffset = 0; 

typedArrays.map(x => { 
resultArray.set (x, currentOffset); 
currentOffset += x.length; 

必用。 


return resultArray; 


} 


const concatArray = typedArrayConcat (Int32Array, 
TneANrray of (Cl 2 jy 
Intl6Array .of (4, 5, 6), 
Float32Array.of(7, 8, 9)); 

console.log(concatArray); 1// [1l, 2, 3; 4,; 5, 6, 7, 8, 9] 

console.log(concatArray instanceof Int32Array); // true 
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3. 下 浇 和 上 涪 








定型 数组 中 值 的 下 洲 和 上 洪 不 会 影响 到 其 他 索引 , 但 仍然 需要 考虑 数组 的 元 素 应 该 是 什么 类 型 。 定 





如 何 处 理 下 洪 和 上 洪 : 
// 长 度 为 2 的 有 符号 整数 数组 





型 数组 对 于 可 以 存储 的 每 个 索引 只 接受 一 个 相关 位 ， 而 不 考虑 它们 对 实际 数值 的 影响 。 以 下 代码 演示 了 


// 每 个 索引 保存 一 个 二 补 数 形式 的 有 符号 整数 





// 范围 是 -128 (-1 * 2^7) ~127 (2 
const ints = new Int8Array (2); 


// 长 度 为 2 的 无 符号 整数 数组 
// 每 个 索引 保存 一 个 无 符号 整数 
// 范围 是 0~255 (2^7 - 1) 





7 11) 


const unsignedInts = new Uint8Array (2); 


// 上 溢 的 位 不 会 影响 相 邻 索引 
// 索引 只 取 最 低 有 效 位 上 的 8 位 


unsignedInts[1] = 256; // 
console.log(unsignedIints); // 
unsignedInts[1] = 511; Ah 


console.log(unsignedIints); // 


0x100 
[0, 0] 
Oxl1FF 
[0 了 和 25 


// 下 溢 的 位 会 被 转换 为 其 无 符号 的 等 价值 
// 0xFF 是 以 二 补 数 形式 表示 的 -1 (截取 到 8 位 ) ， 


// 但 255 是 一 个 无 符号 整数 
unsignedInts[1] = -1 // 
console.log(unsignedIints); // 





// 上 溢 自 动 变 成 二 补 数 形式 


OxFF (truncated to 8 bits) 
[O07 2554 


// 0x80 是 无 符号 整数 的 128， 是 二 补 数 形式 的 -128 


irits[1i e128 // Ox80 


console.log(ints); 2 Oy: 281 


// 下 溢 自 动 变 成 二 补 数 形式 


// 0XFF 是 无 符号 整数 的 255， 是 二 补 数 形式 的 -1 


irits[11 e255> // OxFF 


console.log(ints); 7 Os i] 
除了 8 种 元 素 类 型 ， 还 有 一 种 “夹板 ”数组 类 型 . Uint8ClampedArray， 不 允许 任何 方向 溢出 。 
超出 最 大 值 255 的 值 会 被 向 下 舍 入 为 255， 而 小 于 最 小 值 0 的 值 会 被 向 上 舍 人 为 0。 


const clampedIints = new Uint8ClampedArray ([-1, 0, 255, 256]); 
console.log(clampedInts); // [0, 0, 255, 255] 


按照 JavaScript 之 父 Brendan Eich 的 说 法 :“Uint8ClampedArray 完全 是 HTML5canvas 元 素 的 
历史 留存 。 除 非 真 的 做 跟 canvas 相关 的 开发 ， 否 则 不 要 使 用 它 。” 





6.4 Map 














ECMAScript 6 以 前 ,在 JavaScript 








' 实 现 “ 键 / 值 ” 式 存储 可 以 使 用 object 来 方便 高 效 地 完成 ， 也 





























就 是 使 用 对 象 属性 作为 键 ， 再 使 用 属性 来 引用 值 。 但 这 种 实现 并 非 没 有 问题 ， 为 此 TC39 委员 会 专门 为 














“ 键 / 值 ”存储 定义 了 一 个 规范 。 














作为 ECMAScript 6 的 新 增 特性 ，Map 是 一 种 新 的 集合 类 型 ， 为 这 门 语言 带 来 了 真正 的 键 / 值 存储 机 














制 。Map 的 大 多 数 特性 都 可 以 通过 obj 











ct 类 型 实现 , 但 二 者 之 间 还 是 存在 一 些 细 微 的 差异 。 具 体 实践 








中 使 用 哪 一 个 ， 还 是 值得 细 细 甄别 。 
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闫 





6.4.1 基本 API 
使 用 new 关键 字 和 Map 构造 函数 可 以 创建 一 个 空 映射 


const m = new Map(); 


如 果 想 在 创建 的 同时 初始 化 实例 ， 可 以 给 Map 构造 函数 传人 一 个 可 迭代 对 象 ， 需 要 包含 键 / 值 对 数 
组 。 可 迭代 对 象 中 的 每 个 键 / 值 对 都 会 按照 欠 代 顺序 插入 到 新 映射 实例 中 : 
// 使 用 谋 套 数组 初始 化 映射 


const ml = new Map([ 
[" keyl1", nr] 
EE key2", "val2"] 
E key3 oe "val3"] 

















alert (ml.size); // 3 


// 使 用 自 定义 选 代 器 初始 化 映射 
const m2 = new Map(({ 
[Symbol.iterator]: function*() { 
yield ["keyl", "vall"]; 
yield ["key2", "val2"]; 
yield ["key3", "val3"]; 
} 
Fs 
alert (m2.size); // 3 





// 映射 期 待 的 键 / 值 对 ， 无 论 是 否 提供 
const m3 = new Map([[]]1); 

alert (m3.has (undefined 
alert (m3 .get (undefined 


// true 
// undefined 


初始 化 之 后 ， 可 以 使 用 set () 方 法 再 添加 键 / 值 对 。 另 外 ， 可 以 使 用 get () 和 has () 进 行 查 询 ， 可 
以 通过 size 属性 获取 映射 中 的 键 / 值 对 的 数量 ， 还 可 以 使 用 delete() 和 clear () 删 除 值 。 


const m = new Map(); 


)); 
a 




















alert (m.has ("firstName")); // false 
alert (m.get ("firstName")); // undefined 
alert (m.size); // 0 
m.set ("firstName", "Matt") 

.Set ("lastName", "Frisbie"); 
alert (m.has ("firstName")); // true 
alert (m.get ("firstName")); // Matt 
alert (m.size); // 2 
m.delete("firstName"); // 只 删除 这 一 个 键 / 值 对 
alert (m.has ("firstName")); // false 
alert(m.has ("lastName")); // true 
alert (m.size); Va 


m.clear(); // 清除 这 个 映射 实例 中 的 所 有 键 / 值 对 





alert(m.has("firstName")); // false 
alert(m.has ("lastName")); // false 
alert (m.size); // 0 
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set () 方 法 返回 映射 实例 ， 因 此 可 以 把 多 个 操作 连 缀 起 来 ， 包 括 初始 化 声明 : 


const m = new Map().set ("keyl", "vall"); 
m.set ("key2", "val2") 
.Set ("key3", "val3");} 


alert (m.size); // 3 


与 object 只 能 使 用 数值 、 字 符 串 或 符号 作为 键 不 同 ，Map 可 以 使 用 任何 JavaScript 数据 类 型 作为 
键 。Map 内 部 使 用 SameValueZero 比较 操作 ( ECMAScript 规范 内 部 定义 ,语言 中 不 能 使 用 )， 基 本 上 相 
当 于 使 用 严格 对 象 相等 的 标准 来 检查 键 的 匹配 性 。 与 object 类 似 ， 映 射 的 值 是 没有 限制 的 。 


const m = new Map(); 





















































const functionKey = function() {}; 
const symbolKey = Symbol (); 

const objectKey = new Object(); 

m.set (functionKey, "functionValue"); 


m.set (symbolKey, "symbolValue"); 





m.set (objectKey, "objectValue"); 6 
alert (m.get (functionKey)); // functionValue 

alert (m.get (symbolKey) ) ; // symbolValue 

alert (m.get (opjectKey)); // objectValue 


// SameValueZero 比较 意味 着 独立 实例 不 冲突 
alert (m.get (function() {})); // undefined 


与 严格 相等 一 样 ， 在 映射 中 用 作 键 和 值 的 对 象 及 其 他 “集合 ”类 型 ,在 自己 的 内 容 或 属性 被 修改 时 
仍然 保持 不 变 : 


const m = new Map(); 














const objKey = {}, 
objVal 下 水 
arrKey Els 
arr Va se: [3 


m.set (objKey, objVal); 
m.set (arrKey, arrVal); 


objKey.foo = "foo" 
objVal .bar = "bar" 
arrKey .push ("foo"); 
arrVal .push("bar"); 


console.log(m.get (objKey)) 
console.log(m.get (arrKey)) 


SameValueZero 比较 也 可 能 导致 意 想不到 的 冲突 : 


const m = new Map(); 


A bars. "bar 
// ["bar"] 


’ 
’ 


const a 0/"", // NaN 
b 0/"", // NaN 
BZ. SS 0 
证 2 二 全 昌 池 





alert (a === b); // false 
alert (pz === nz); // true 
m.set (a, "foo") 

m.set (pz bar") 
alert(m.get (b)); // foo 
alert (m.get (nz)); // bar 


注意 SameValueZero 是 ECMAScript 规 范 新 增 的 相等 性 比较 算法 。 关于 ECMAScript 的 相 


等 性 比较 ， 可 以 参考 MDN 文档 中 的 文章 “Equality Comparisons and Sameness”。 





6.4.2 ”顺序 与 迭代 


与 Object 类 型 的 一 个 主要 差异 是 ，Map 实例 会 维护 键 值 对 的 插入 顺序 ， 因 此 可 以 根据 插入 顺序 执 
行 迭 代 操 作 。 

映射 实例 可 以 提供 一 个 迭代 器 ( Iterator )， 能 以 插入 顺序 生成 [key，value] 形 式 的 数组 。 可 以 
通过 entries () 方 法 (或 者 Symbol .iterator 属性 ， 它 引用 entries() ) 取得 这 个 迭代 器 : 


const m = new Map([ 
["key1l", "vall" 























["key2"， "val2"] 

["key3"， "val3"] 
J 
alert (m.entries === m[Symbol.iterator]); // true 
for (let pair of m.entries()) { 


alert (pair); 
于 
// [keyl,valll] 
// [key2,val2] 
// [key3,val3] 


for (let pair of m[Symbol.iterator] ()) { 
alert (pair); 

} 

// [keyl,valll] 

// [key2,val2] 

// [key3,val3] 






































因为 entries () 是 默认 迭代 器 ， 所 以 可 以 直接 对 映射 实例 使 用 扩展 操作 ， 把 映射 转换 为 数组 : 
| 
["key2", "val2" 
["key3", "val3" 
]); 
console.log([...m]); // [[keyl,vall], [key2,val2], [key3,val3]] 
如 果 不 使 用 夫 代 器 ,而 是 使 用 回调 方式 , 则 可 以 调用 映射 的 I opt_thisArg) 
方法 并 传人 回调 ， 依 次 迭代 每 个 键 / 值 对 。 传 和 的 回调 接收 可 选 的 第 二 个 参数 ， 参数 用 于 重 写 回 调 














内 部 this 的 值 : 
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const m = new Map([ 
["Kkey1"， "vall"], 
["key2", "val2"] 
["key3", "val3"] 


] 





m.forEach((val, key) => alert (‘S${key} -> S${val}. 
// keyl -> vall 
// key2 -> val2 
// key3 -> val3 
keys () 和 values () 分 别 返 回 以 插入 顺序 生成 键 和 值 的 迭 
const m = new Map([ 
["keyl", wy] 和 
["key2", "yal2"] 和 
["key3", "val3"] 
1); 
for (let key of m.keys()) { 
alert (key); 
} 
// keyl 
// Key2 
// key3 
for (let key of m.values()) { 
alert (key); 
} 
// valuel 
// value2 
// value3 





键 和 值 在 迭代 器 遍历 时 是 可 以 修改 的 , 但 映射 内 部 的 引 月 








new Map ([ 
wz 和] 


const ml 
[ nh keyl nh a 
| 


// 作为 键 的 字符 囊 原始 值 是 不 能 修改 的 


for (let key of ml.keys()) { 
key = "newkKey"; 
alert (key); // newKey 
alert (ml.get ("key1")); // vall 


} 


const keyObj = {id: 1}; 


new Map ([ 
wa ] 


const m 
[keyObj, 
人 


// 修改 了 作为 键 的 对 象 的 属性 ， 但 对 象 在 映射 内 部 仍然 引用 相同 


for (let key of m.keys()) { 
key.id = "newKey"; 
alert (key); // {id: "newKey"} 
alert (m.get (keyObj)); // vall 

} 

alert (keyObj); // {id: "newKey"} 


ee 


失 代 器 : 


有 则 无 法 修改 。 当 然 ， 这 并 不 妨 


键 或 值 的 对 象 内 部 的 属性 ， 因 为 这 样 并 不 影响 它们 在 映射 实例 中 的 身份 : 


的 值 





碍 


修改 作为 
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6.4.3 选择 object 还 是 Map 


对 于 多 数 Web 开发 任务 来 说 ， 选 择 object 还 是 Map 只 是 个 人 偏好 问题 ， 影 响 不 大 。 不 过 ， 对 于 
在 乎 内 存 和 性 能 的 开发 者 来 说 ， 对 象 和 映射 之 间 确 实 存在 显著 的 差别 。 

1. 内 存 占用 

object 和 Map 的 工程 级 实现 在 不 同 浏览 器 间 存 在 明显 差异 , 但 存储 单个 键 / 值 对 所 占用 的 内 存 数量 
都 会 随 键 的 数量 线性 增加 。 批 量 添加 或 删除 键 / 值 对 则 取决 于 各 浏览 器 对 该 类 型 内 存 分 配 的 工程 实现 。 
不 同 浏览 器 的 情况 不 同 ， 但 给 定 固定 大 小 的 内 存 ，Map 大 约 可 以 比 object 多 存储 50% 的 键 / 值 对 。 

2. 插入 性 能 

向 object 和 Map 中 插入 新 键 / 值 对 的 消耗 大 致 相当 ， 不 过 插入 Map 在 所 有 浏览 器 中 一 般 会 稍微 快 
一 点 儿 。 对 这 两 个 类 型 来 说 ,插入 速度 并 不 会 随 着 键 / 值 对 数量 而 线性 增加 。 如 果 代 码 涉 及 大 量 插入 操 
作 ， 那 么 显然 Map 的 性 能 更 佳 。 

3. 查找 速度 

与 插入 不 同 ， 从 大 型 object 和 Map 中 查找 键 / 值 对 的 性 能 差异 极 小 ， 但 如 果 只 包含 少量 键 / 值 对 ， 
则 object 有 时 候 速度 更 快 。 在 把 object 当成 数组 使 用 的 情况 下 ( 比如 使 用 连续 整数 作为 属性 )， 浏 
览 器 引擎 可 以 进行 优化 ， 在 内 存 中 使 用 更 高 效 的 布局 。 这 对 Map 来 说 是 不 可 能 的 。 对 这 两 个 类 型 而 言 ， 
查找 速度 不 会 随 着 键 / 值 对 数量 增加 而 线性 增加 。 如 果 代 码 涉 及 大 量 查找 操作 ， 那 么 某 些 情况 下 可 能 选 
择 object 更 好 一 些 。 

4. 删除 性 能 

使 用 aelete 删除 object 属性 的 性 能 一 直 以 来 饱 受 诉 病 ， 目 前 在 很 多 浏 览 器 中 仍然 如 此 。 为 此 ， 
出 现 了 一 些 伪 删 除 对 象 属性 的 操作 , 包括 把 属性 值 设置 为 undaefinea 或 null。 但 很 多 时 候 , 这 都 是 一 
种 讨厌 的 或 不 适宜 的 折 中 。 而 对 大 多 数 浏览 器 引擎 来 说 ，Map 的 aelete () 操作 都 比 插入 和 查找 更 快 。 
如 果 代 码 涉及 大 量 删除 操 作 ， 那 么 毫 无 疑问 应 该 选择 Map。 






























































































































































































































































6.5 WeakMap 





ECMAScript 6 新 增 的 “ 弱 映射 ”( weakMap ) 是 一 种 新 的 集合 类 型 ， 为 这 门 语言 带 来 了 增强 的 键 / 
值 对 存储 机 制 。 weakMap 是 Map 的 “兄弟 ”类 型 , 其 API 也 是 Map 的 子 集 。 weakMap 中 的 “weak”( 弱 )， 
描述 的 是 JavaScript 垃圾 回收 程序 对 待 “ 弱 映射 ”中 键 的 方式 。 


6.5.1 基本 API 
可 以 使 用 new 关键 字 实 例 化 一 个 空 的 WeakMap: 


const wm = new WeakMap ();} 

弱 映 射 中 的 键 只 能 是 object 或 者 继承 自 object 的 类 型 ,尝试 使 用 非 对 象 设置 键 会 抛 出 
TypeError。 值 的 类 型 没有 限制 。 

如 果 想 在 初始 化 时 填充 弱 映 射 ， 则 构造 函数 可 以 接收 一 个 可 迭代 对 象 ， 其 中 需要 包含 键 / 值 对 数组 。 
可 迭代 对 象 中 的 每 个 键 / 值 都 会 按照 欠 代 顺序 插入 新 实例 中 : 


{Td 于 茜 ， 
{和 




































































const keyl 
key2 
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key3 = {id: 3}; 
// 使 用 谋 套 数组 初始 化 弱 映 射 
const wml = new WeakMap ( [ 
[key1， "vall"], 
[key2, "val2"], 
[key3, "val3"] 
| 


alert (wml .get (key1)); // vall 
alert (wml .get (key2)); // val2 
alert (wml .get (key3)); // val3 


// 初始 化 是 全 有 或 全 无 的 操作 
// 只 要 有 一 个 键 无 效 就 会 抛 出 错误 ， 导 致 整个 初始 化 失败 
const wm2 = new WeakMap ([ 
[key1， "vall"], 
["BADKEY", "val2"], 
[key3, "val3"] 
J 
// TypeError: Invalid value used as WeakMap key 
typeof wm2; 
// ReferenceError: wm2 is not defined 


// 原始 值 可 以 先 包装 成 对 象 再 用 作 键 
const stringKey = new String("keyl"); 
const wm3 = new WeakMap ([ 
stringKey, "vall" 
| 
alert (wm3.get (stringKey)); // "vall" 





初始 化 之 后 可 以 使 用 set () 再 添加 键 / 值 对 , 可 以 使 用 get () 和 has () 查询 , 还 可 以 使 用 delete() 





const wm = new WeakMap () ; 


Tid: 于 5 
Ls 2 


const keyl 


{ 
key2 { 


// false 
// undefined 


alert (wm.has (key1) ) ; 
alert (wm.get (key1)); 
wm.set (key1l, "Matt") 

.Set (key2, "Frisbie"); 


alert (wm.has (key1)); // true 

alert (wm.get (key1)); // Matt 

wm.delete (key1); // 只 删除 这 一 个 键 / 值 对 
alert (wm.has (key1)); // false 

alert (wm.has (key2)); // true 


set () 方 法 返回 弱 映 射 实例 ， 因 此 可 以 把 多 个 操作 连 级 起 来 ， 包 括 初始 化 声明 : 


const keyl = {id: 1}, 
key2 = {id: 2}, 
key3” = {id: 3); 


Const wm = new WeakMap() .set (keyl, "vall"); 
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wm.set (key2, "val2") 
.Set (key3, "val3"); 


alert (wm.get (key1)); // vall 

alert (wm.get (key2)); // val2 

alert (wm.get (key3)); // val3 
6.5.2” 弱 键 





WeakMap 中 “weak” 表 示弱 映射 的 键 是 “ 弱 弱 地 拿 着 ”的 。 意 思 就 是 ， 这 些 键 不 属于 正式 的 引 
不 会 阻止 垃圾 回收 。 但 要 注意 的 是 ， 弱 映射 中 值 的 引用 可 不 是 “ 弱 弱 地 拿 着 ”的 。 只 要 键 存在 ， 
对 就 会 存在 于 映射 中 ， 并 被 当 作对 值 的 引用 ， 因 此 就 不 会 被 当 作 垃圾 回收 。 

来 看 下 面 的 例子 : 


const wm = new WeakMap ();} 


























wm.set ({}, "val"); 


set () 方 法 初始 化 了 一 个 新 对 象 并 将 它 用 作 一 个 字符 串 的 键 。 因 为 没有 指向 这 个 对 象 的 其 他 纪 




















| 用 ， 
键 / 值 


| 用 ， 


所 以 当 这 行 代码 执行 完成 后 ， 这 个 对 象 键 就 会 被 当 作 垃圾 回收 。 然 后 ， 这 个 键 / 值 对 就 从 弱 映 射 中 消失 





























了 ， 使 其 成 为 一 个 空 映射 。 在 这 个 例子 中 ， 因 为 值 也 没有 被 引用 ， 所 以 这 对 键 / 值 被 破坏 以 后 ， 值 本 身 


| 


也 会 成 为 垃圾 回收 的 目标 。 
再 看 一 个 稍微 不 同 的 例子 : 


const wm = new WeakMap () 





const container = { 
key: {} 
2 


wm.set (container.key, "val"); 
function removeReference() { 


container.key = null; 


} 














这 一 次 ，container 对 象 维护 着 ee | 用 ， 因 此 这 个 对 象 键 不 会 成 为 垃圾 回收 的 目 
标 。 不 过 ， 如 果 调 用 了 removeReference() ， 就 会 摧毁 键 对 象 的 最 后 一 个 引用 ,垃圾 回收 程序 就 可 以 















































把 这 个 键 / 值 对 清理 掉 。 
6.5.3 不 可 和 迭代 键 























因为 weakMap 中 的 键 / 值 对 任何 时 候 都 可 能 被 销 般 ， 所 以 没 必要 提供 迭代 其 键 / 值 对 的 能 力 。 当 然 ， 
也 用 不 着 像 clear () 这 样 一 次 性 销毁 所 有 键 / 值 的 方法 。 weakMap 确实 没有 这 个 方法 。 因 为 不 可 能 迭代 ， 











所 以 也 不 可 能 在 不 知道 对 象 引 用 的 情况 下 从 弱 映 射 中 取得 值 。 即 便 代码 可 以 访问 weakMap 实例 ， 
办 法 看 到 其 中 的 内 容 。 
WeakMap 实例 之 所 以 限制 只 能 用 对 象 作为 键 , 是 为 了 保证 只 有 通过 键 对 象 的 引用 才能 取得 值 。 























也 没 


如 果 


允许 原始 值 ， 那 就 没 办 法 区 分 初始 化 时 使 用 的 字符 串 字 面 量 和 初始 化 之 后 使 用 的 一 个 相等 的 字符 串 了 。 
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6.5.4 使 用 弱 映 射 


WeakMap 实例 与 现 有 JavaScript 对 象 有 着 很 大 不 同 ， 可 能 一 时 不 容易 说 清楚 应 该 怎么 使 用 它 。 这 个 
问题 没有 唯一 的 答案 ， 但 已 经 出 现 了 很 多 相关 策略 。 

1. 私有 变量 

弱 映 射 造就 了 在 JavaScript 中 实现 真正 私有 变量 的 一 种 新 方式 。 前 提 很 明确 : 私有 变量 会 存储 在 弱 
映射 中 ， 以 对 象 实 例 为 键 ， 以 私有 成 员 的 字典 为 值 。 

下 面 是 一 个 示例 实现 : 


const wm = new WeakMap(); 

















class User { 
constructor(id) { 
this.idProperty = Symbol('id'); 
this.setId(id); 
} 


setPrivate(property, value) { 

const privateMembers = wm.get (this) || {}; 
privateMembers [property] = value; 

wm.set (this, privateMembers); 





} 





getPrivate(property) { 
return wm.get (this) [property]; 


} 


setId(id) { 
this.setPrivate(this.idProperty, id); 


} 


ge 工人 的 > 江 
return this.getPrivate(this.idProperty); 
} 
} 


const user = new User (123); 


alert (user.getId()); // 123 
user.setId(456); 
alert (user.getId()); // 456 


// 并 不 是 真正 私有 的 
alert (wm.get (user) [user.idProperty]); // 456 


慧眼 独 具 的 读者 会 发 现 , 对 于 上 面 的 实现 ,外 部 代码 只 需要 拿 到 对 象 实例 的 引用 和 弱 映 射 ， 就 可 以 
取得 “私有 ”变量 了 。 为 了 避免 这 种 访问 ， 可 以 用 一 个 闭 包 把 weakMap 包装 起 来 ， 这 样 就 可 以 把 弱 映 





射 与 外 界 完 全 隔离 开 了 : 
const User = (() => { 
const wm = new WeakMap (); 


class User { 
constructor(id) { 
this.idProperty = Symbol('id'); 
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this.setId(id); 
} 


setPrivate(property, value) { 
const privateMembers = wm.get (this) || {}; 
privateMembers [property] = value; 
wm.set (this, privateMembers); 


. 


getPrivate(property) { 
return wm.get (this) [property]; 


} 


setId(id) { 
this.setPrivate(this.idProperty, id); 
} 





getId(id) { 
return this.getPrivate(this.idProperty); 
} 
} 
return User; 
}) (); 


const user = new User(123); 


alert (user.getId()); // 123 
user.setId(456); 
alert (user.get1Id()); // 456 





这 样 ， 拿 不 到 弱 映 射 中 的 健 ， 也 就 无 法 取得 弱 映 射 中 对 应 的 值 。 虽然 这 防止 了 前 面 提 到 的 访问 , 但 
整个 代码 也 完全 陷入 了 ES6 之 前 的 闭 包 私有 变量 模式 。 

2. DOM 节点 元 数据 

因为 WeakMap 实例 不 会 妨碍 垃圾 回收 ， 所 以 非常 适合 保存 关联 元 数据 。 来 看 下 面 这 个 例子 ， 其 中 
使 用 了 常规 的 Map: 


const m = new Map(); 


























const loginButton = document .querySelector('#login'); 

// 给 这 个 节点 关联 一 些 元 数据 

m.set (loginButton, {disabled: true}); 

假设 在 上 面 的 代码 执行 后 ， 页 面 被 JavaScript 改变 了 ， 原 来 的 登录 按钮 从 DOM 树 中 被 删 掉 了 。 但 
由 于 映射 中 还 保存 着 按钮 的 引用 ， 所 以 对 应 的 DOM 节点 仍然 会 逗留 在 内 存 中 ， 除 非 明确 将 其 从 映射 中 
删除 或 者 等 到 映射 本 身 被 销毁 。 

如 果 这 里 使 用 的 是 弱 映 射 ， 如 以 下 代码 所 示 ， 那 么 当 节 点 从 DOM 树 中 被 删除 后 ， 垃 圾 回收 程序 就 
可 以 立即 释放 其 内 存 ( 假设 没有 其 他 地 方 引 用 这 个 对 和 象 ): 


const wm = new WeakMap ();} 







































































const loginButton = document .gquerySelector('#login'); 


// 给 这 个 节点 关联 一 些 元 数据 
wm.set (loginButton, {disabled: true}); 


6.6 Set 173 





6.6 Set 


ECMAScript 6 新 增 的 set 是 一 种 新 集合 类 型 ， 为 这 门 语言 带 来 集合 数据 结构 。set 在 很 多 方面 都 
像 是 加 强 的 Map， 这 是 因为 它们 的 大 多 数 API 和 和 a Et 有 的 。 


6.6.1 基本 API 
使 用 new 关键 字 和 set 构造 函数 可 以 创建 一 个 空 


const m = new Set(); 


如 果 想 在 创建 的 同时 初始 化 实例 , 则 可 以 给 set 构造 冰 数 传人 一 个 可 迭代 对 象 , 其 中 需要 包含 插入 
到 新 集合 实例 中 的 元 素 : 


// 使 用 数组 初始 化 集合 
const sl = new Set(["vall", "val2", "val3"]); 






































油 


合 . 
上 : 











alert (sl.size); // 3 


// 使 用 自 定 义 选 代 器 初始 化 集合 
const S2 = new Set({ 
[Symbol.iterator]: function*() { 
yield "vall"; 
yield "val2"; 
yield "val3"; 
} 
由 
alert (s2.size); // 3 


初始 化 之 后 , 可 以 使 用 aaa () 增 加 值 , 使 用 has () 查询 , 通过 size 取得 元 素数 量 , 以 及 使 用 delete () 
和 clear () 删 除 元 素 : 


const s = new Set(); 

















alert(s.has ("Matt")); // false 
alert (s.size); // 0 


s.add ("Matt") 
.add ("Frisbie"); 


ALOr 
可 二 亿 王 


(s.has ("Matt")); // true 
(s.size); // 2 


s.delete("Matt"); 


alert(s.has ("Matt")); // false 
alert(s.has ("Frisbie")); // true 
alert (s.size); Le 


s.clear(); // 销毁 集合 实例 中 的 所 有 值 








alert(s.has("Matt'") ) ; // false 
alert(s.has("Frisbie")); // false 
alert(s.Size) ; // 0 


add() 返 回 集合 的 实例 ， 所 以 可 以 将 多 个 添加 操作 连 缀 起 来 ， 包 括 初始 化 : 
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const s = new Set().add("vall"); 


s.add("val2") 
.add ("val3"); 


alert(s.size); // 3 





与 Map 类 似 ，set 可 以 包含 任何 JavaScript 数据 类 型 作为 值 。 集 合 也 使 用 SameValueZero 操作 
( ECMAScript 内 部 定义 ， 无 法 在 语言 中 使 用 )， 基 本 上 相当 于 使 用 严格 对 象 相等 的 标准 来 检查 值 的 匹 





配 性 。 


const 


S new Set () 


function() 
Symbol () ， 
new Object () 


functionVal 
symbolVal 
objectVal 


const 
COnst 
SONSt 


网 必 


s.add(functionVal); 
s.add(symbolVal); 
s.add(objectVal); 


alert(s.has (functionVal)); // true 
alert(s.has (symbolVal)); // true 
alert (s.has (objectVal)); // true 


// SameValueZero 检查 意味 着 独立 的 实例 不 会 冲突 
alert(s.has (function() {})); // false 























与 严格 相等 一 样 ， 用 作 值 的 对 象 和 其 他 “集合 ”类 型 在 自己 的 内 容 或 属性 被 修改 时 也 不 会 改变 : 











const s = new Set(); 
const objVal = {}, 
arrVal = []; 


s.add (objVal); 
s.add(arrVal); 


objVal.bar = "bar"; 
arrVal .push("bar");} 


alert(s.has(objVal)); // true 
alert(s.has(arrVal)); // true 
ada() 和 delete() 操 作 是 备 等 的 。delete() 返 
const s = new Set(); 
s.add('foo'); 

alert(s.size); // 1 
s.add('foo'); 

alert(s.size); // 1 

// 集合 里 有 这 个 值 
alert(s.delete('foo')); // true 
// 集合 里 没有 这 个 值 
alert(s.delete('foo')); // false 














回 一 个 布尔 值 ， 表 示 集 合 中 是 否 存在 要 删除 的 值 : 
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6.6.2 ”顺序 与 迭代 


Set 会 维护 值 插入 时 的 顺序 ， 因 此 支持 按 顺序 迭代 。 
集合 实例 可 以 提供 一 个 迭代 器 ( Iterator )， 能 以 插入 顺序 生成 集合 内 容 。 可 以 通过 values () 方 
法 及 其 别名 方法 keys () (或 者 Symbol .iterator 属性 ， 它 引用 values () ) 取得 这 个 迭代 器 : 













































































const s = new Set(["vall", "val2", "val3"]); 
alert(s.values === s[Symbol.iterator]); // true 
alert(s.keys === s[Symbol.iterator]); // true 
for (let value of s.values()) { 

alert (value); 
} 
// vall 
// val2 
// val3 
for (let value of s[Symbol.iterator] ()) { 

alert (value); 
} 
// vall 
// val2 
// val3 
因为 values () 是 默认 迭代 器 ， 所 以 可 以 直接 对 集合 实例 使 用 扩展 操作 ， 把 集合 转换 为 数组 : 
const s = new Set(["vall", "val2", "val3"]); 
CONseole. LOg (Clas Sls ZA LD vall,. “veal,, “valSe] 


集合 的 entries () 方 法 返回 一 个 迭代 器 ， 可 以 按照 搬入 顺序 产生 包含 两 个 元 素 的 数组 ， 这 两 个 元 
素 是 集合 中 每 个 值 的 重复 出 现 : 


const s = new Set(["vall", "val2", "val3"]); 








for (let pair of s.entries()) { 
console.log(pair); 

} 

| 

| 

7 "vas vyal3"] 


如 果 不 使 用 迭代 右 ， 而 是 使 用 回调 方式 ， 则 可 以 调用 集合 的 forEach () 方 法 并 传人 回调 ， 依 次 迭 
代 每 个 键 / 值 对 。 传 入 的 回调 接收 可 选 的 第 二 个 参数 ， 这 个 参数 用 于 重 写 回调 内 部 this 的 值 : 


const s = new Set(["vall", "val2", "val3"]); 




















s.forEach((val, dupVal) => alert(“${val} -> ${dupVval}. )); 
// vall -> vall 
// val2 -> val2 
// val3 -> val3 


修改 集合 中 值 的 属性 不 会 影响 其 作为 集合 值 的 身份 : 


const sl = new Set(["vall"]); 














字符 串 原始 值 作为 值 不 会 被 修改 


人 Value of sl.values()) { 
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Value = "newVal"; 
alert (value); // newVal 
alert(sil.has("val1l")); // true 


} 


const valObj = 


const 


‘3 


S2 = new Set([valObj]); 


// 修改 值 对 象 的 属性 ， 但 对 象 仍 然 存 在 于 集合 中 


for (let value of s2.values()) { 
value.id = "newVal"; 
alert (value); // {id: "newVal"} 
alert(s2.has(valObj)); // true 


} 


alert (valObj); 


// {id: "newVal"} 


6.6.3 ”定义 正式 集合 操作 
从 各 方面 来 看 ，set 跟 Map 都 很 相似 ， 只 是 API 稍 有 调整 。 唯 一 需要 强调 的 就 是 集合 的 API 对 自 





身 的 简单 操作 。 很 多 天 



































方法 。 在 实现 这 些 操作 时 ， 需 要 考虑 几 个 地 方 。 





口 Set 








口 某 些 set 操作 是 有 关联 性 的 ， 因 此 最 好 让 实现 的 方法 能 支持 处 理 任意 多 个 集合 实例 。 











F 发 者 都 喜欢 使 用 set 操作 , 但 需要 手动 实现 : 或 者 是 子 类 化 set, 或 者 是 定义 一 
个 实用 函数 库 。 要 把 两 种 方式 合 二 为 一 ， 可 以 在 子 类 上 实现 静态 方法 ,然后 在 实例 方法 中 使 用 这 些 背 














这 











保留 插入 顺序 ， 所 有 方法 返回 的 集合 必须 保证 顺序 。 














口 尽 可 能 高 效 地 使 用 内 存 。 扩 展 操作 符 的 语法 很 简洁 ， 
够 节省 对 象 初始 化 成 本 。 








class XSet extends Set { 


union(...sets) { 
return XSet.union(this, ...sets) 
} 
intersection(...sets) { 
return XSet.intersection(this, ...sets); 


} 


difference(set) { 


上 


} 





turn XSe 





t.difference(this, set); 


symmetricDifference(set) { 


天公 


} 


turn XSe 


t.symmetricDifference(this, set); 


cartesianProduct (set) { 


Tr 


} 


turn XSe 


powerSet() { 


TS 


} 





turn XSe 


t.cartesianProduct (this, set); 





t .powerSet (this); 





但 尽 可 能 避免 集合 和 数组 间 的 相互 转换 能 


口 不 要 修改 已 有 的 集合 实例 。union (a，b) 或 a.union(b) 应 该 返回 包含 结果 的 新 集合 实例 。 
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// 返回 两 个 或 更 多 集合 的 并 集 
static union(a, ...bSets) { 
const unionSet = new XSet (a); 
for (const b of bSets) { 
for (const bValue of b) { 
unionSet.add (bvValue); 
} 
} 
return unionSset; 


} 


// 返回 两 个 或 更 多 集合 的 交集 
static intersection(a, ...bSets) { 
const intersectionSet = new XSet (a); 
for (const aValue of intersectionSet) { 
for (const b of bSets) { 
if (!b.has(aValue)) { 
intersectionSet .delete(aValue); 


} 
} 


return intersectionSset,; 





} 
// 返回 两 个 集合 的 差 集 


static difference(a, b) { 
const differenceSet = new XSet (a); 
for (const bValue of b) { 
if (a.has(bValue)) { 
differenceSet.delete(bVvalue); 
} 
} 
return differenceSet,; 


} 
// 返回 两 个 集合 的 对 称 差 集 


static symmetricDifference(a, b) { 
// 按照 定义 ， 对 称 差 集 可 以 表达 为 
return a.union(b) .difference(a.intersection(b)); 


} 


// 返回 两 个 集合 (数组 对 形式 ) 的 笛 卡 儿 积 
// 必须 返回 数组 集合 ， 因 为 笛 卡 儿 积 可 能 包含 相同 值 的 对 
static cartesianproduct(a, b) { 
const cartesianproductSet = new XSet (); 
for (const aValue of a) { 
for (const bValue of b) { 
cartesianproductSet.add([aValue, bValuel]); 
; 
3 
return cartesianProductSet; 


} 
// 返回 一 个 集合 的 宕 集 


static powerSet(a) { 
const powerSet = new XSet() .add (new XSet () ) ; 
for (const aValue of a) { 
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for (const set of new XSet (powerSet)) { 


powerSet .add (new XSet (set) .add(aValue)); 
} 
} 


return PowersSet ， 
} 
} 


6.7 WeakSet 


ECMAScript 6 新 增 的 “ 弱 集 合 ”( WeakSet ) 是 一 种 新 的 外 











Cy 








合 类 型 ， 为 这 门 语言 带 来 了 集合 数据 结 


构 。weakSet 是 set 的 “兄弟 ”类 型 ， 其 API 也 是 set 的 子 集 。weakset 中 的 “weak”( 弱 )， 描 述 的 








是 JavaScript 垃 圾 回收 程序 对 待 “ 弱 集 合 ”中 值 的 方式 。 


6.7.1 基本 API 
可 以 使 用 new 关键 字 实 例 化 一 个 空 的 weakSet: 


Const ws = new WeakSet (); 











弱 集 合 中 的 值 只 能 是 object 或 者 继承 自 object 的 类 型 , 尝试 使 用 非 对 象 设置 值 会 抛 出 TypeError。 


如 果 想 在 初始 化 时 填充 弱 集 合 ， 则 构造 机 数 可 以 接收 一 个 可 迭代 对 象 ， 
迭代 对 象 中 的 每 个 值 都 会 按照 欠 代 顺序 搬入 到 新 实例 中 : 

















CONSt valLL :es Ld 1 
VaALZ :2 
VAL3. = {Ld DB.}s 


// 使 用 数组 初始 化 弱 集 合 


const ws1 = new WeakSet ([vall, val2, val3]); 


alert (wsl.has (val1l)); // true 
alert (wsl.has (val2)); // true 
alert (wsl.has (val3)); // true 


// 初始 化 是 全 有 或 全 无 的 操作 

// 只 要 有 一 个 值 无 效 就 会 抛 出 错误 ， 导致 整个 初始 化 失败 
const ws2 = new WeakSet ([vall, "BADVAL", val3]); 
// TypeError: Invalid value used in WeakSet 
typeof ws2; 

// ReferenceError: ws2 is not defined 





// 原始 值 可 以 先 包 装 成 对 象 再 用 作 值 

const stringVal = new String("vall"); 
const ws3 = new WeakSet ([stringVall]); 
alert (ws3.has (stringVal)); // true 























其 














-~ 





' 需 要 包含 有 效 的 值 。 可 


初始 化 之 后 可 以 使 用 aaaq () 再 添加 新 值 ， 可 以 使 用 has () 查询 ， 还 可 以 使 用 aelete() 删 除 : 








const ws = new WeakSet () ; 





const vall = {id: 1}, 
val2 = {id: 2}; 
alert (ws.has (vall)); // false 


ws.add (vall) 


6.7 WeakSet 179 














组 起 来 ， 包 括 初始 化 声明 : 


.add (val2); 
alert (ws.has(vall)); // true 
alert (ws.has (val2)); // true 
ws.delete(vall); // 只 删除 这 一 个 值 
alert (ws.has (vall)); // false 
alert (ws.has (val2)); // true 
add () 方 法 返回 弱 集 合 实例 ， 因 此 可 以 把 多 个 操作 连 
Const, vall. s(tLd: Ty 
Val2 'S (id 2; 
val3 = {id: 3}; 
const ws = new WeakSet () .add (vall); 
ws.add (val2) 
.add (val3); 
alert (ws.has (vall)); // true 
alert (ws.has (val2)); // true 
alert (ws.has (val3)); // true 


6.7.2” 弱 值 





weakSet 中 “weak” 表 示弱 集合 的 值 是 “ 弱 弱 地 拿 着 ”的 。 意 


不 会 阻止 垃圾 回收 。 
来 看 下 面 的 例子 : 


const ws = new WeakSet (); 


ws.add({}); 


addq () 方 法 初 始 化 了 一 个 新 对 象 ， 并 将 它 用 作 一 个 值 。 因为 没有 指 向 这 个 对 象 的 大 
这 个 对 象 值 就 会 被 当 作 垃 圾 回收 。 然 后 ， 


这 行 代码 执行 完成 后 ， 


一 个 空 





集合 oO 

再 看 一 个 稍微 不 同 的 例子 : 
const ws = new WeakSet (); 
const container = { 


val: {} 
下 


ws.add(container.val); 
function removeReference() { 


container.val = null; 


} 


季 思 就 是 ， 这 些 值 不 属于 正式 的 引用 ， 





他 引用 ， 所 以 当 
这 个 值 就 从 弱 集 合 中 消失 了 ,使 其 成 为 








这 一 次 ，container 对 象 维 ee 因此 这 个 对 象 值 不 会 成 为 垃圾 回收 的 目 











标 。 不 过 ， 如 果 调 用 了 removeReferenc 
把 这 个 值 清理 掉 。 





， 就 会 摧毁 值 对 象 的 最 后 一 个 引用 ， 垃 圾 回收 程序 就 可 以 
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6.7.3 不 可 迭代 值 


因为 weakset 中 的 值 任何 时 候 都 可 能 被 销毁 ， 所 以 没 必 要 提供 迭代 其 值 的 能 力 。 当 然 ， 也 用 不 着 
， clear() 这 样 一 次 性 销毁 所 有 值 的 方法 。weakset 确实 没有 这 个 方法 。 因 为 不 可 能 迭代 ， 所 以 也 不 
能 在 不 知道 对 象 引用 的 情况 下 从 弱 集 合 中 取得 值 。 即 便 代码 可 以 访问 WeakSet 实例 ， 也 没 办 法 看 到 





























ee 
WeakSet 之 所 以 限制 只 能 用 对 象 作为 值 , 是 为 了 保证 只 有 




















通过 值 对 象 的 引用 才能 取得 值 。 如 果 允 许 





原始 值 ， 那 就 没 办 法 区 分 初始 化 时 使 用 的 字符 串 字面 量 和 初始 化 之 后 使 用 的 一 个 相等 的 字符 串 了 。 








6.7.4 使 用 弱 集 合 








相 比 于 WeakMap 实例 ，weakSet 实例 的 用 处 没有 那么 大 。 











价值 的 。 
来 看 下 面 的 例子 ， 这 里 使 用 了 一 个 普通 set: 


const disabledElements = new Set() 








不 过 ， 弱 集合 在 给 对 象 打 标 签 时 还 是 有 


const loginButton = document .gquerySelector('#login'); 


// 通过 加 入 对 应 集合 ,给 这 个 节点 打上 “禁用 ”标签 
disabledElements.add(loginButton); 








这 样 ， 通 过 查询 元 素 在 不 在 disabledElements 中 ， 就 可 以 知道 它 是 不 是 被 禁用 了 。 不 过 ， 假 如 














元 素 从 DOM 树 中 被 删除 了 ， 它 的 引用 却 仍然 保存 在 set 中 ， 

















因此 垃圾 回收 程序 也 不 能 回收 它 。 


为 了 让 垃圾 回收 程序 回收 元 素 的 内 存 ， 可 以 在 这 里 使 用 Weakset: 


const disabledElements = new WeakSet (); 


const loginButton = document .gquerySelector('#login'); 


// 通过 加 入 对 应 集合 ， 给 这 个 节点 打上 “禁用 ”标签 
disabledElements.add(loginButton); 


这 样 ， 只 要 weakset 中 任何 元 素 从 DOM 树 中 被 删除 ， 垃 圾 回收 程序 就 可 以 忽略 其 存在 ， 而 立即 

















释放 其 内 存 ( 假设 没有 其 他 地 方 引用 这 个 对 象 ) 
6.8 和 迭代 与 扩展 操作 








ECMAScript 6 新 增 的 迭代 器 和 扩展 操作 符 对 集合 引用 类 型 
相互 操作 、 复 制 和 修改 变 得 异常 方便 。 

















特别 有 用 。 这 些 新 特性 让 集合 类 型 之 间 








如 本 章 前 面 所 示 ， 有 4 种 原生 集合 类 型 定义 了 默认 迭代 器 : 











口 Array 

口 所 有 定型 数组 
口 Map 

DQ Set 
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很 简单 ， 这 意味 着 上 述 所 有 类 型 都 支持 顺序 迭代 ， 都 可 以 传 入 for-of 循环 : 


let iterableThings = [ 
ArTrav .oft{t1l 2); 
typedArr = Intl6Array .of (3, 4), 
new Map([[5, 6], [7, 8]]), 
new Set([9, 10]) 
J 


for (const iterableThing of iterableThings) { 
for (const x of iterableThing) { 
console.1log (x); 


} 


~ Un 


a 
ss 
户 \O 一 RODDP 
OO 


Co: 

















这 也 意味 着 所 有 这 些 类 型 都 兼容 扩展 操作 符 。 扩 展 操作 符 在 对 可 迭代 对 象 执行 浅 复 制 时 特别 有 用 ， 
只 需 简单 的 语法 就 可 以 复制 整个 对 象 : 














eb EE S|[T 下 

let arr2 = [...arrl]; 

console.1log(arrl1); | 

console.1log(arr2); | 

console.log(arrl === arr2); // false 

对 于 期 待 可 迭代 对 象 的 构造 函数 ， 只 要 传人 一 个 可 迭代 对 象 就 可 以 实现 复制 : 
let mapl new Map([[1, 2], [3, 4]]); 


let map2 = new Map (map1); 


console.log(mapl); // Map {1 => 2, 3 => 4} 
console.log(map2); // Map {1 => 2, 3 => 4} 


当然 ， 也 可 以 构建 数组 的 部 分 元 素 : 


let arrl = [1, 2, 3]; 
let arr2 = [0, ...arrl, 4, 5]; 


EONnsGle .logtarr2)s /7 [OWL 2 Bs "Ay 5] 


浅 复制 意味 着 只 会 复制 对 象 引用 : 





Let arrL.e LE]e 

let arr2 = [...arrl]; 

arrl[t0]: fe00, = bar”; 
console:, log (arr210]); "A/. -£60; "bar" } 





上 面 的 这 些 类 型 都 支持 多 种 构建 方法 ， 比 如 Array .of () 和 Array .from() 静 态 方法 。 在 与 扩展 操 
作 符 一 起 使 用 时 ， 可 以 非常 方便 地 实现 互 操 作 : 
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let arrl = [1; 2, 3]; 


// 把 数组 复制 到 定型 数组 
let typedArrl 
Jet typedArr2 = 
console.lodg(typedqArr1) ， 
console.log(typedArr2);，; 


1 


// 把 数组 复制 到 映射 
let map = new Map (arr1.map((X) 
console.1log(map) ; 


把 数组 复制 到 集合 
new Set (typedArr2); 
// Set {1, 


// 
let set = 
console.log(set); 


// 把 集合 复制 回 数 组 
let arr2 = [...set]; 
console.log(arr2); 





A 


6.9 小 结 





=> 
// Map {1 => 


2， 


3 


让 


INtIGArray of(s.. sarrl)}y 
Int16Array.from(art1) ， 
// Int16Array [1，2，3] 
// Int16Array [1, 2, 3] 


[RR valy 


a 2 TL 


3 


} 


JavaScript 中 的 对 象 是 引用 值 ， 可 以 通过 几 种 内 置 引 用 类 型 创建 特定 类 型 的 对 象 。 








x 








口 引用 类 型 与 传统 面向 对 象 编程 语 
























































口 Dat 











高 级 正则 表达 式 的 能 





旺 


口 object 类 型 是 一 个 基础 类 型 ， 所 有 引 
口 Array 类 型 表示 一 组 有 序 的 值 ， 并 提供 了 操作 和 转换 值 的 能 

口 定型 数组 包含 一 套 不 同 的 引用 类 型 ， 用 于 管理 数值 在 内 存 中 的 类 型 。 
类 型 提供 了 关于 日 期 和 时 间 的 信息 ， 
口 RegExp 类 型 是 ECMAScript 支持 的 正则 表达 式 的 接口 ， 提 供 了 大 多 数 基本 正则 表达 式 以 及 一 些 





中 的 类 相似 ， 但 实现 不 同 。 

















用 类 型 都 从 它 继承 了 基本 的 行为 。 





包括 当前 日 期 和 时 间 以 及 计算 。 











JavaScript 比较 独特 的 一 点 是 ， 函 数 其实 是 Function 类 型 的 实例 ， 这 意味 着 函数 也 是 对 象 。 由 于 


函数 是 对 象 ， 因 此 也 就 具有 能 够 增强 自身 行为 的 方法 。 
因为 原始 值 包装 类 型 的 存在 ， 所 以 JavaScript 


























包装 类 型 : Boolean 、Number 和 string。 它 们 都 具有 如 下 特点 。 





口 在 以 读 模 式 访问 原始 值 时 ， 后 台 





会 


口 涉及 原始 值 的 语句 只 要 一 执行 完毕 ， 


口 每 种 包装 类 型 都 映射 到 同名 的 原始 类 型 。 
实例 化 一 个 原始 值 包装 对 象 ， 通 过 这 个 对 象 可 以 操作 数据 。 


包装 对 象 就 会 立即 销毁 。 


的 原始 值 可 以 拥有 类 似 对 象 的 行为 。 有 3 种 原始 值 


JavaScript 还 有 两 个 在 一 开始 执行 代码 时 就 存在 的 内 置 对 象 : Global 和 Math。 其 中 ，Global 对 
象 在 大 多 数 ECMAScript 实现 中 无 法 直接 访问 。 不 过 浏览 器 将 Global 实现 为 window 对 象 。 所 有 全 局 
变量 和 函数 都 是 Global 对 象 的 属性 。Math 对 象 包含 辅助 完成 复杂 数学 计算 的 属 怕 











ECMAScript 6 新 增 了 一 批 引用 类 型 : Map、WeakMap、Set 和 WeakSet。 这 些 类 型 为 组 织 应 


数据 和 简化 内 存 管理 提供 了 新 能 力 。 

















E 和 方法 。 











用 程 





序 





第 / 章 
友人 代 器 与 生成 器 


本 章 内 容 

口 理解 近代 
口 迭代 器 模式 
口 生成 器 














迭代 的 英文 “iteration” 源 自 拉 丁 文 itero， 意 思 是 “重复 ”或 “再 来 " 。 在 软件 开发 领域 ,“ 人 迭代 ” 
的 意思 是 按照 顺序 反复 多 次 执行 一 段 程序 , 通常 会 有 明确 的 终止 条 件 。ECMAScript 6 规范 新 增 了 两 个 高 
级 特性 : 迭代 器 和 生成 器 。 使 用 这 两 个 特性 ， 能 够 更 清晰 、 高 效 、 方 便 地 实现 迭代 。 


7.1 理解 迭代 
在 JavaScript 中 ， 计 数 循环 就 是 一 种 最 简单 的 迭代 : 


for (let i = 1; i <= 107 ++1i) { 
console.1log(i); 


} 

循环 是 迭代 机 制 的 基础 ， 这 是 因为 它 可 以 指定 迭代 的 次 数 ， 以 及 每 次 迭代 要 执行 什么 操作 。 每 次 循 
环 都 会 在 下 一 次 迭代 开始 之 前 完成 ， 而 每 次 迭代 的 顺序 都 是 事先 定义 好 的 。 

迭代 会 在 一 个 有 序 集合 上 进行 。( “有 序 ” 可 以 理解 为 集合 中 所 有 项 都 可 以 按照 既定 的 顺序 被 遍历 
到 ， 特 别 是 开始 和 结束 项 有 明确 的 定义 。) 数组 是 JavaScript 中 有 序 集合 的 最 典型 例子 。 


let collections [too0r;, whan™, Da] 
































































































































for (let index = 0; index < collection.length; ++index) { 
console.log(collection[index]); 


} 
为 数组 有 已 知 的 长 度 , 上 且 数 组 每 一 项 都 可 以 通过 索引 获取 , 所 以 整个 数组 可 以 通过 递增 索引 来 遍历 。 
由 于 如 下 原因 ， 通 过 这 种 循环 来 执行 例 程 并 不 理想 。 
口 迭代 之 前 需要 事先 知道 如 何 使 用 数据 结构 。 数 组 中 的 每 一 项 都 只 能 先 通过 引用 取得 数组 对 象 ， 
然后 再 通过 [] 操作 符 取 得 特定 索引 位 置 上 的 项 。 这 种 情况 并 不 适用 于 所 有 数据 结构 。 

口 遍历 顺序 并 不 是 数据 结构 固有 的 。 通 过 递增 索引 来 访问 数据 是 特定 于 数组 类 型 的 方式 ， 并 不 适 
用 于 其 他 具有 隐 式 顺序 的 数据 结构 。 
ES5 新 增 了 Array .prototype.forEach() 方 法 , 向 通用 迭代 需求 迈进 了 一 步 (但 仍然 不 够 理想 ): 


lebt CoOllectiom es [tooO™ har, "baz Tl; 


































































































collection.forEach((item) => console.log(item)); 





这 个 方法 解决 了 单独 记录 索引 和 通过 数组 对 象 取得 值 的 问题 。 不 过 ， 没 有 办 法 标识 迭代 何 时 终止 。 
因此 这 个 方法 只 适用 于 数组 ， 而 且 回 调 结构 也 比较 笨拙 。 

在 ECMAScript 较 早 的 版 本 中 ， 执 行 迭 代 必须 使 用 循环 或 其 他 辅助 结构 。 随 着 代码 量 增加 ， 代 码 会 
变 得 越发 混乱 。 很 多 语言 都 通过 原生 语言 结构 解决 了 这 个 问题 , 开发 者 无 须 事 先知 道 如 何 迭 代 就 能 实现 
迭代 操作 。 这 个 解决 方案 就 是 迭代 器 模式 。Python、Java、C++， 还 有 其 他 很 多 语言 都 对 这 个 模式 提供 
了 完备 的 支持 。JavaScript 在 ECMAScript 6 以 后 也 支持 了 壕 代 咒 模式 。 
7.2 ”迭代 器 模式 

迭代 器 模式 〈 特别 是 在 ECMAScript 这 个 语 境 下 ) 描述 了 一 个 方案 ， 即 可 以 把 有 些 结构 称 为 “可 和 迭 
代 对 象 ”(iterable )， 因 为 它们 实现 了 正式 的 Iteraple 接口 ， 而 且 可 以 通过 迭代 右 Iterator 消费 。 

可 迭代 对 象 是 一 种 抽象 的 说 法 。 基 本 上 , 可 以 把 可 迭代 对 象 理解 成 数组 或 集合 这 样 的 集合 类 型 的 对 
象 。 它 们 包含 的 元 素 都 是 有 限 的 ， 而 且 都 具有 无 歧义 的 遍历 顺序 : 

// 数组 的 元 素 是 有 限 的 


// 递增 索引 可 以 按 序 访 问 每 个 元 素 
let arr = [3, 1, 4]; 
















































































// 集合 的 元 素 是 有 限 的 

// 可 以 按 插 入 顺序 访问 每 个 元 素 

let set = new Set().add(3).add(1) .add(4); 

不 过 ,可 迭代 对 象 不 一 定 是 集合 对 象 ,， 也 可 以 是 仅仅 具有 类 似 数组 行为 的 其 他 数据 结构 ， 比 如 本 章 
开头 提 到 的 计数 循环 。 该 循环 中 生成 的 值 是 暂时 性 的 , 但 循环 本 身 是 在 执行 近代 。 计 数 循环 和 数组 都 具 
有 可 迭代 对 象 的 行为 。 
































注意 临时 性 可 迭代 对 象 可 以 实现 为 生成 器 ， 本 章 后 面 会 讨论 。 








任何 实现 Iterable 接口 的 数据 结构 都 可 以 被 实现 Iterator 接口 的 结构 “消费 ”( consume )。 和 迭 
代 器 (iterator ) 是 按 需 创建 的 一 次 性 对 象 。 每 个 迭代 器 都 会 关联 一 个 可 迭代 对 象 ， 而 迭代 器 会 暴露 迭代 
其 关联 可 迭代 对 象 的 API。 和 迭代 器 无 须 了 解 与 其 关联 的 可 迭代 对 象 的 结构 ， 只 需要 知道 如 何 取得 连续 的 
值 。 这 种 概念 上 的 分 离 正 是 Iterable 和 Iterato 的 强大 之 处 。 


7.2.1 可 迭代 协议 


实现 Iterable 接口 (可 迭代 协议 ) 要 求 同 时 具备 两 种 能 力 : 支持 迭代 的 自我 识别 能 力 和 创建 实现 
Iterator 接口 的 对 象 的 能 力 。 在 ECMAScript 中 ,这 意味 着 必须 暴露 一 个 属性 作为 “默认 迭代 器 ”， 而 
且 这 个 属性 必须 使 用 特殊 的 sympbol .iterator 作为 键 。 这 个 默认 迭代 器 属性 必须 引用 一 个 迭代 器 工厂 
函数 ， 调 用 这 个 工厂 函数 必须 返回 一 个 新 迭代 器 。 
很 多 内 置 类 型 都 实现 了 Iterable 接口 : 
口 字符 串 
口 数组 
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口 映射 

口 集合 

口 arguments 对 象 

口 NodeList 等 DOM 集合 类 型 

检查 是 否 存在 默认 迭代 器 属性 可 以 暴露 这 个 工厂 函数 : 


1 
让 


























let num 
let obj 


// 这 两 种 类 型 没有 实现 选 代 器 工厂 函数 


console.1og(num[Symbol.iterator]); // undefined 
console.log(obj[Symbol.iterator]); // undefined 

let str = 'abc'; 

letarr = | ta, “B'S Wes]? 

let map = new Map().set('a', 1).set('b', 2).set('c', 3); 

let set = new Set().add('a').add('b').add('c'); 

let els = document .gquerySelectorAll('div'); 

// 这 些 类 型 都 实现 了 选 代 器 工厂 函数 

console.log(str[Symbol.iterator]); // f values() { [native code] } 
console.log(arr[Symbol.iterator]); // f values() { [native codel] } 
console.log(map[Symbol.iterator]); // f values() { [native codel] } 
console.log(set[Symbol.iterator]); // f values() { [native codel] } 
console.log(els[Symbol.iterator]); // f values() { [native codel] } 





// 调用 这 个 工厂 函数 会 生成 一 个 选 代 器 























console.log(str[Symbol.iterator] ()); // StringIterator {} 
console.log(arr[Symbol.iterator] ()); // ArrayILerator {} 
console.log(map[Symbol.iterator] ()); // MapIterator {} 
console.log(set[Symbol.iterator] ()); // SetIterator {} 
console.log(els[Symbol.iterator] ()); // ArrayILerator {} 








实际 写 代 码 过 程 中 , 不 需要 显 式 调 用 这 个 工厂 函数 来 生成 迭代 器 。 实 现 可 迷 代 协议 的 所 有 类 型 都 会 
自动 兼容 接收 可 迭代 对 象 的 任何 语言 特性 。 接 收 可 迭代 对 象 的 原生 语言 特性 包括 ; 
口 for-of 循环 
口 数组 解构 
口 扩展 操作 符 


DQ Array .from() 

口 创建 集合 

口 创建 映射 

口 Promise.all() 接 收 由 期 约 组 成 的 可 迭代 对 象 

口 Promise.trace() 接 收 由 期 约 组 成 的 可 迭代 对 象 

口 yieldqx 操 作 符 ， 在 生成 器 中 使 用 

这 些 原生 语言 结构 会 在 后 台 调 用 提供 的 可 迭代 对 象 的 这 个 工厂 函数 ， 从 而 创建 一 个 迁 代 器 : 


Let QL: [toO0%;. DarY. har 1]: 
































// for-of 循环 
for (let el of arr) { 
console.log(el); 


} 
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// foo 
// bar 
// baz 


// 数组 解构 
lab [a Di Gl rr 
console.log(a, b, c); // foo, bar, baz 


// 扩展 操作 符 
a eed 
console.log(arr2); // ['foo', 'bar', 'baz'] 


// Array .from() 
let arr3 = Array.froml(arr); 
console.log(arr3); // ['foo', 'bar', 'baz'] 





// Set 构造 溃 数 
let set = new Set (arr); 
console.log(set); // Set(3) {'foo', 'bar', 'baz'} 


// Map 构造 函数 

Let Palks: Ss arr.mnapC(x; 1) SS [X77 1) 

console Log (Baire)s ‘A Fl:foo 0], [bar™., Ll, [Baz 21.] 
let map = new Map (pairs); 

console.log(map); // Map(3) { 'foo'=>0, 'bar'=>1, 'baz'=>2 } 


如 果 对 象 原型 链 上 的 父 类 实现 了 Iterable 接口 ， 那 这 个 对 象 也 就 实现 了 这 个 接口 : 


class FooArray extends Array {} 
let fooArr = new FooArray('foo', 'bar', 'baz'); 











for (let el of fooArr) { 
console.logl(el); 

;} 

// foo 

A Dar 

// baz 


7.2.2 ”迭代 器 协议 


迭代 器 是 一 种 一 次 性 使 用 的 对 象 ， 用 于 迭代 与 其 关联 的 可 迭代 对 象 。 和 迭代 器 API 使 用 next () 方 法 
在 可 迭代 对 象 中 遍历 数据 。 每 次 成 功 调用 next () ,都 会 返回 一 个 TteratorResult 对 象 , 其 中 包含 迭 
代 右 返回 的 下 一 个 值 。 若 不 调用 next () ， 则 无 法 知道 欠 代 器 的 当前 位 置 。 

next () 方 法 返回 的 迭代 器 对 象 TteratorResult 包含 两 个 属性 : done 和 value。done 是 一 个 布 
尔 值 ， 表 示 是 否 还 可 以 再 次 调用 next () 取得 下 一 个 值 ; value 包含 可 迭代 对 象 的 下 一 个 值 ( done 为 
false ), 或 者 undefined ( done 为 true )。dqone: true 状态 称 为 “ 耗 尽 ”"。 可 以 通过 以 下 简单 的 数 
组 来 演示 : 


// 可 选 代 对 象 
let 局 站 臣下 GO 

































































// 选 代 器 工厂 函数 
console.log(arr[Symbol.iterator]); // f values() { [native code] } 


// 从 代 器 


7.2 ”和 迭代 器 模式 187 





let iter = arr[Symbol.iterator] (); 
console.log(iter); // ArrayILerator {} 


// 执行 选 代 

console.log(iter.next()); // { done: false, value: 'foo' } 
console.log(iter.next()); // { done: false, value: 'bar' } 
console.log(iter.next()); // { done: true, value: undefined } 


这 里 通过 创建 迭代 器 并 调用 next () 方 法 按 顺序 迭代 了 数组 ， 直 至 不 再 产生 新 值 。 壕 代 器 并 不 知道 
怎么 从 可 迭代 对 象 中 取得 下 一 个 值 ， 也 不 知道 可 迭代 对 象 有 多 大 。 只 要 迭代 需 到 达 done: true 状态 ， 
后 续 调用 next ( ) 就 一 直 返 回 同样 的 值 了 : 


let arr = ['foo']; 

let iter = arr[Symbol.iterator] (); 

console.log(iter.next()); // { done: false, value: 'foo' } 
console.log(iter.next()); // { done: true, value: undefined } 
console.log(iter.next()); // { done: true, value: undefined } 
console.log(iter.next()); // { done: true, value: undefined } 


每 个 和 迭 代 器 都 表示 对 可 迭代 对 象 的 一 次 性 有 序 遍 历 。 不 同 迭 代 器 的 实例 相互 之 间 没有 联系 ， 只 会 独 
立地 遍历 可 迭代 对 象 : 














Tet der -= [tO0", "Dar nl 
let iterl = arr[Symbol.iterator] (); 
let iter2 = arr[Symbol.iterator] (); 


console.log(iterl.next()); // { done: false, value: 'foo' } 
console.log(iter2.next()); // { done: false, value: 'foo' } 
console. TDg (Tter2.next:());» /Ft done: false; value: "bar™.} 
console. log (iterlinext());» /7 { done: false; value;: "Dar" } 


迭代 器 并 不 与 可 迭代 对 象 革 个 时 刻 的 快照 绑 定 ， 而 仅仅 是 使 用 游标 来 记录 遍历 可 迭代 对 象 的 历程 。 
如 果 可 迭代 对 象 在 迭代 期 间 被 修改 了 ,那么 迭代 器 也 会 反映 相应 的 变化 : 


let arr = ['foo', 'baz']; 
let iter = arr[Symbol.iterator] (); 











console.log(iter.next()); // { done: false, value: 'foo' } 


// 在 数组 中 间 村 入 值 


arr.splice(1, 0, 'bar'); 


console.log(iter.next()); // { done: false, value: 'bar' } 
console.log(iter.next()); // { done: false, value: "baz' } 
console.log(iter:next()})* // { done: cue value: undefined } 


注意 ”和 迭代 器 维护 着 一 个 指向 可 和 迭代 对 象 的 引用 ,因此 和 迭代 器 会 阻止 垃圾 回收 程序 回收 可 


和 迭代 对 象 。 








迭代 器 ”的 概念 有 时 候 容 易 模 糊 ， 因 为 它 可 以 指 通 用 的 迭代 ， 也 可 以 指 接口 ， 还 可 以 指正 式 的 迭 
代 右 类 型 。 下 面 的 例子 比较 了 一 个 显 式 的 迭代 器 实现 和 一 个 原生 的 迭代 器 实现 。 
// 这 个 类 实现 了 可 迭代 接口 (Iterable) 
// 调用 默认 的 选 代 器 工厂 函数 会 返回 
// 一 个 实现 选 代 器 接口 (IEerator) 的 选 代 器 对 象 


class Foo { 
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[Symbol.iterator] () { 
return { 
next() { 
return { done: false, value: 'foo' }; 
} 
} 
} 
} 


Jet f = new Foo(); 


// 打印 出 实现 了 迭代 器 接口 的 对 象 
console.log(f[Symbol.iterator] ()); // { next: f() {} } 


// Array 类 型 实现 了 可 选 代 接 口 (Iterable) 
// 调用 Array 类 型 的 默认 迭代 器 工厂 函数 

// 会 创建 一 个 ArrayIterator 的 实例 

let a = new Array(); 


// 打印 出 ArrayIterator 的 实例 
console.log(alSymbol.iterator] ()); // Array Iterator {} 


7.2.3 自 定 义 迭 代 器 
与 Iterable 接口 类 似 , 任何 实现 Iterator 接口 的 对 象 都 可 以 作为 迭代 器 使 用 。 下面 这 个 例子 




















的 counter 类 只 能 被 迭代 一 定 的 次 数 : 
class Counter { 
// Counter 的 实例 应 该 迭代 1limit 次 
constructor (limit) { 
thisscount: =" 1 
thisslimit.s Limits 


} 


next() { 
if (this.count <= this.limit) { 
return { done: false, value: this.count++ }; 
} else { 
return { done: true, value: undefined }; 
} 
} 
[Symbol .iterator]() { 
return this; 
} 
于 


let counter = new Counter (3) ， 
oF “(Let Lo0f COuMmEer)” { 


console.log(i); 


} 





Vi Rl 

YL 

Z 办 3 

这 个 类 实现 了 Iterator 接口 ， 但 不 理想 。 这 是 因为 它 的 每 个 实例 只 能 被 迭代 一 次 : 
for (let i of counter) { console.log(i); } 


/于 
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for (let i of counter) { console.log(i); } 
// (nothing logged) 


为 了 让 一 个 可 迭代 对 象 能 够 创建 多 个 迭代 器 ， 必 须 每 创建 一 个 迭代 器 就 对 应 一 个 新 计数 器 。 为 此 ， 
可 以 把 计数 器 变量 放 到 闭 包 里 ， 然 后 通过 闭 包 返回 迭代 器 : 


Class Counter { 
constructor (limit) { 
thie.. Limit ‘se: Tmikt; 


} 





[Symbol.iterator] () { 
let count = 1, 
limit = this.limit; 
return { 
next() { 
if (count <= limit) { 
return { done: false, value: Count++ }; 
} else { 
return { done: true, value: undefined }; 
} 
} 
}; 
} 
} 





let counter = new Counter (3); 


for (let i of counter) { console.log(i); } 

7 十 

人 

A A 

for (let i of counter) { console.log(i); } 

// 1 

// 2 

/3 

每 个 以 这 种 方式 创建 的 迭代 器 也 实现 了 Iterable 接口 。symbol.iterator 属性 引用 的 工厂 函数 
会 返回 相同 的 迭代 器 : 

let arr = ['foo', 'bar', 'baz']; 


let iterl = arr[Symbol.iterator] (); 
console.log(iterl[Symbol.iterator]); // f values() { [native code] } 
let iter2 = iterl[Symbol.iterator] (); 


console.log(iterl1 === iter2); // true 


因为 每 个 迭代 器 也 实现 了 Iterable 接口 ， 所 以 它们 可 以 用 在 任何 期 待 可 迭代 对 象 的 地 方 ， 比 如 
for-of 循环 : 


Let: Er ;3 LE] 
let iter = arr[Symbol.iterator] (); 
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for (let item of arr ) { console.log(item); } 
/A 3 
Vl 
// 4 


for (let item of iter ) { console.log(item); } 
/3 
全 
A 


7.2.4 提前 终止 闪 代 器 


可 选 的 return () 方 法 用 于 指定 在 友 代 器 提前 关闭 时 执行 的 逻辑 。 执 行 和 迭代 的 结构 在 想 让 迭代 器 知 
道 它 不 想 遍历 到 可 迭代 对 象 耗 尺 时， 就 可 以 “关闭 ”迭代 器 。 可 能 的 情况 包括 : 
口 for-of 循 环 通 过 break、continue、treturn 马 或 throw 提前 退 出 ; 
口 解构 操作 并 未 消费 所 有 值 。 

return() 方 法 必须 返回 一 个 有 效 的 IteratorResult 对 象 。 简单 情况 下 , 可 以 只 返回 { done: true }。 
因为 这 个 返回 值 只 会 用 在 生成 器 的 上 下 文中 ， 

如 下 面 的 代码 所 示 ， 内 置 语 言 结构 在 发 现 还 有 更 多 值 可 以 迭代 ,但 不 会 消费 这 些 值 时 , 会 自动 调用 
return() 方 法 。 


class Counter { 
constructor (limit) { 
上 和 1 二 "和 Th 生 蕊 3 


} 








































































































[Symbol.iterator] () { 
let count = 1, 
JT 
return { 
next() { 
TF (Gout Sa 计 
return { done: false, value: count++ }; 
} else { 
return { done: true }; 
} 
2 
return() { 
console.log('Exiting early'); 
return { done: true }; 
} 
地 


let counterl = new Counter (5) 


for (let i of counter1) { 
if (i > 2) { 
break; 
} 
console.1log(i); 
} 
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//1 
// 2 
// Exiting early 


let counter2 = new Counter(5); 


try { 
for (let i of counter2) { 
让 
throw 'err'; 
;} 
console.1log(i); 
} 
} catch(e) {} 
A 
A 这 
// Exiting early 


let counter3 = new Counter(5); 


let [a, b] = counter3; 
// Exiting early 


如 果 和 迭代 器 没有 关闭 ,， 则 还 可 以 继续 从 上 次 离开 的 地 方 继续 途 代 。 比 如 ,数组 的 迭代 器 就 是 不 能 关 
闭 的 : 


let: Eb Zr BF. dr 5 
let iter = al[lSymbol.iterator] (); 





for (let i of iter) { 
console.1log(i); 
下 

break 

} 

} 

// 1 

人 这 

LX 


For (let i ‘GF. Tter) 二 
console.1log(i); 

} 

// 4 

2 


因为 return() 方 法 是 可 选 的 , 所 以 并 非 所 有 迭代 器 都 是 可 关闭 的 。 要 知道 某 个 迭代 器 是 否 可 关闭 ， 
可 以 测试 这 个 迭代 央 实 例 的 return 属性 是 不 是 函数 对 象 。 不 过 ,仅仅 给 一 个 不 可 关闭 的 迭代 器 增加 这 
个 方法 并 不 能 让 它 变 成 可 关闭 的 。 这 是 因为 调用 *eturn () 不 会 强制 迭代 器 进入 关闭 状态 。 即 便 如 此 ， 
return() 方 法 还 是 会 被 调用 。 


let B= [ly 27 3 4 Sl 
let iter = a[lSymbol.iterator] (); 









































iter.return = function() { 
console.log('Exiting early'); 
return { done: true }; 








fOr -Let ref te ,4 
console.log(i); 
th 2 
break 
} 
} 
XY 
ZA 2 
A 党 
// 提前 退出 


for (let i of iter) { 
console.log(i); 


7.3 生成 器 


生成 需 是 ECMAScript 6 新 增 的 一 个 极为 灵活 的 结构 ， 拥 
能 力 。 这 种 新 能 力 具 有 深远 的 影响 ， 比 如 ， 使 用 4 























7.3.1 生成 器 基础 


























个 函数 块 内 暂停 和 恢复 代码 执行 的 


E 成 右 可 以 自 定义 迭代 器 和 实现 协 程 。 


生成 能 的 形式 是 一 个 函数 ， 函 数 名 称 前 面 加 一 个 星 号 ( * ) 表示 它 是 一 个 生成 器 。 只 要 是 可 以 定义 


函数 的 地 方 ， 就 可 以 定义 生成 器 。 
// 生成 器 函 数 声明 


function* generatorFn() {} 


// 生成 器 水 数 表 达 式 


let generatorFn = function* 


// 作为 对 象 字 面 量 方法 的 生成 器 函数 


let foo = { 
* generatorFn() {} 


} 


// 作为 类 实例 方法 的 生成 器 函数 
class Foo { 
* generatorFn() {} 


} 


// 作为 类 静态 方法 的 生成 器 函数 
class Bar { 
static * generatorFn() 





标识 生成 右 函 数 的 星 号 不 受 两 侧 空 格 的 











// 等 价 的 生成 器 函数 : 

function* generatorFnA() {} 
function *generatorFnB() {} 
function * generatorFnC() {} 


// 等 价 的 生成 器 方法 : 

class Foo { 
*generatorFnD() {} 
* generatorFnE() {} 


} 
调 




















迭代 器 相似 ， 生 成 器 对 象 也 实现 了 Iteratot 接口 ， 因 此 具有 next () 


F 始 或 恢复 执行 。 


function* generatorFn() {} 


const g = generatorrn(); 


console.1log(g); // generatorFn {<suspended>} 
console.log(g.next); // f next() { [native code] } 


next () 方 法 的 返 回 值 类 似 于 迭 失 代 需 ， 有 一 个 aone 属性 
函数 中 间 不 会 停留 ， 调 用 一 次 next ( ) 就 会 让 生成 器 到 达 done: 


function* generatorFn() {} 








let generatorObject = generatorFn(); 
console.log(generatorObject);} 


console.log(generatorObject.next()); // { done: 





value 属性 是 生成 器 函数 的 返回 值 ， 默 认 值 为 undefined， 可 以 通过 





function* generatorFn() { 
return 'foo'; 


} 


let generatorObject = generatorFn(); 
console.log(generatorObject); 


console.log(generatorObject.next()); // { done: 


用 生成 名 函数 会 产生 一 个 生成 器 对 象 。 生 成 带 对 象 一 开始 处 于 和 暂停 执行 


和 一 个 value 属性 。 
true 状态 。 








生成 颖 函数 只 会 在 初次 调用 next () 方 法 后 开 


function* generatorFn() { 
console.log('foobar'); 


} 





// 初次 调用 生成 器 函数 并 不 会 打印 日 志 
let generatorObject = Ce 


generatorObject.next(); // foobar 


( suspended ) 的 状态 。 与 
方法 。 调 用 这 个 方法 会 让 生成 需 


函数 体 为 空 的 生成 器 





// generatorFn {<suspended>} 
true, val 


ue: undefined } 


寸 生 成 大 函数 的 返 














回 值 指定 











// generatorFn {<suspended>} 
true, 


value: 'foo' } 


始 执 行 ， 如 下 所 示 : 











生成 器 对 象 实现 了 Iterable 接口 ， 它 们 默认 的 迭代 器 是 自 引 


function* generatorFn() {} 


console.log(generatorFn); 
// f* generatorFn() {} 
console.log(generatorFn() [Symbol.iterator]); 








的 : 
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// £f [Symbol.iterator]() {native code} 
console.log(generatorFn()); 

// generatorFn {<suspended>} 
console.log(generatorFn() [Symbol.iterator] ()); 
// generatorFn {<suspended>} 


const g = generatorrFn(); 


console.log(g === g[Symbol.iterator] ()); 
// true 


7.3.2 ”通过 yield 中 断 执行 








yield 关键 字 可 以 让 生成 需 停 止 和 开始 执行 , 也 是 生成 豆 最 有 用 的 地 方 。 生 成 带 函 数 在 遇 到 yiela 
关键 字 之 前 会 正常 执行 。 遇 到 这 个 关键 字 后 ， 执 行 会 停止 ， 函 数 作用 域 的 状态 会 被 保留 。 停 止 执行 的 生 











成 器 函数 只 能 通过 在 生成 器 对 象 上 调用 next () 方 法 来 恢复 执行 


function* generatorFn() { 
yield; 
} 




















let generatorObject = generatorFn(); 


console.log(generatorObject .next()); // { done: false, value: undefined } 
console.log(generatorObject.next()); // { done: true, value: undefined } 





此 时 的 yield 关 键 字 有 点 像 孔 数 的 中 间 返 回 语 句 ， 它 生成 的 值 会 出 现在 next ( ) 方 法 返回 的 对 象 里 。 
通过 yield 关键 字 退 出 的 生成 器 函数 会 处 在 done: false 状态 ; 通过 return 关键 字 退 出 的 生成 虽 也 


数 会 处 于 done : true 状态 。 


function* generatorFn() { 
yield 'foo'; 
Yield 'bar'; 
return 'baz'; 


} 
let generatorObject = generatorFn(); 


console.log(generatorObject.next()); // { done: false, value: 'foo' } 
console.log(generatorObject.next()); // { done: false, value: 'bar' } 
console.log(generatorObject.next()); // { done: true, value: 'baz' } 

















生成 器 函数 内 部 的 执行 流程 会 针对 每 个 生成 器 对 象 区 分 作用 域 。 在 一 个 生成 器 对 象 上 调用 next () 








不 会 影响 其 他 生成 器 : 


function* generatorFn() { 
vield EGG 
yield 'bar'; 


return 'baz'; 


} 
let generatorObjectl1 = generatorFn(); 


let generatorObject2 = generatorFn(); 


console.log(generatorObjectl.next()); // { done: false, value: 'foo' } 
console.log(generatorObject2.next()); // { done: false, value: 'foo' } 
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console.log(generatorObject2.next()); // { done: false, value: 'bar' } 
console.log (generatorObjectl .next()); // { done: false, value: 'bar' } 


yielg 关键 字 只 能 在 生成 器 函数 内 部 使 用 , 用 在 其 他 地 方 会 抛 出 错误 。 类似 函 数 的 return 关键 字 ， 
yielg 关键 字 必须 直接 位 于 生成 右 函 数 定 义 中 ， 出 现在 般 套 的 非 生 成 右 函 数 中 会 抛 出 语法 错误 : 
// 有 效 


function* validGeneratorFn() { 
yield; 





























} 


// 无 效 
function* invalidGeneratorFnA() { 
function a() { 
yield; 
} 


// 无 效 
function* invalidGeneratorFnB() { 
const p = () => { 
yield; 
} 
} 


// 无 效 
function* invalidGeneratorFnC() { 
(() => { 
yield; 
je: 
} 


1. 生成 器 对 象 作为 可 迭代 对 象 
在 生成 器 对 象 上 显 式 调 用 next () 方 法 的 用 处 并 不 大 。 其 实 ， 如 果 把 生成 器 对 象 当 成 可 迭代 对 象 ， 
那么 使 用 起 来 会 更 方便 : 
function* generatorFn() { 
yield 1; 
Yield 2; 
yield 3; 




















for (const x of generatorFn()) { 
console.1log (x); 

} 

A 

交办 

芳和 二 


在 需要 自 定义 达 代 对 象 时 , 这 样 使 用 生成 器 对 象 会 特别 有 用 。 比 如 , 我 们 需要 定义 一 个 可 迭代 对 象 ， 
而 它 会 产生 一 个 迭代 器 , 这 个 近 代 器 会 执行 指定 的 次 数 。 使 用 生成 器 , 可 以 通过 一 个 简单 的 循环 来 实现 : 
function* nTimes(n) { 
while(n--) { 
yield; 


} 
} 
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for (let _ of nTimes(3)) { 
console.log('foo'); 
} 
// foo 
// foo 
// foo 


传 给 生成 器 的 函数 可 以 控制 迭代 循环 的 次 数 。 在 n 为 0 时 , while 区 


数 返回 。 
2. 使 用 yiela 实现 输入 和 输出 
除了 可 以 作为 函数 的 
生成 器 函数 暂停 的 viela 关键 字 会 接收 到 传 给 
第 一 次 调用 next () 传人 的 值 不 会 被 使 用 ， 因 为 这 


function* generatorFn(initial) { 
console.log (initial); 
console.log(yield); 
console.log(yield); 























} 


next ( 


条 件 为 假 ,循环 退出 ,生成 器 本 


! 间 返回 语句 使 用 , yiela 关键 字 还 可 以 作为 函数 的 中 间 参 数 使 用 。 上 一 次 让 


和 


) 方 法 的 第 一 个 值 。 这 里 有 个 地 方 不 太 好 理 
一 次 调用 是 为 了 开始 执行 生成 融 函 数 : 


解 一 一 














let generatorObject = generatorFn('foo'); 
generatorObject.next('bar'); // foo 
generatorObject.next ('baz'); // baz 
generatorObject.next ('gux'); // qux 








yield 关键 字 可 以 同时 


function* generatorFn() 
return yield 'foo'; 








{ 


} 


let generatorObject generatorrFn(); 


console.log(generatorObject.next () 
console.log(generatorObject .next ( 


因为 函数 必须 对 整个 表达 式 求 值 才能 
计算 出 要 产生 的 值 : "foo"。 下 一 次 调用 next () 
个 值 被 确定 为 本 次 生成 器 函数 要 返回 的 值 。 
yield 关键 字 并 非 只 能 使 用 
function* generatorFn() 
fOE WTIEE 0;;++i) 
Yield ‘i: 
} 
} 





确定 要 返 















































{ 
{ 


let generatorObject = generatorFn(); 

console.log(generatorObject.next().value); // 0 
console.log(generatorObject.next().value); //1 
console.log(generatorObject.next().value); // 2 
console.log(generatorObject.next().value); // 3 
console.log(generatorObject.next().value); // 4 
console.log(generatorObject.next().value); // 5 


) 
ar) ) 


用 于 输入 和 输出 ， 如 下 例 所 示 : 


"foo' 
"ar" 


} 
; } 


回 的 值 ， 所 以 它 在 遇 到 yiela 关键 字 时 暂停 执行 并 


false, value: 
true, value: 


/4/ {done: 
// { done: 





传人 了 "bar"， 


作为 交 给 同一 个 yiela 的 值 。 然 后 这 


次 。 比 如 ， 以 下 代码 就 定义 了 一 个 无 穷 计数 生成 器 函数 : 
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假设 我 们 想 定 义 一 个 生成 器 函数 ， 它 会 根据 配置 的 值 欠 代 相应 次 数 并 产生 迭代 的 索引 。 初 始 化 一 个 
新 数组 可 以 实现 这 个 需求 ， 但 不 用 数组 也 可 以 实现 同样 的 行为 : 
function* nTimes(n 
OF "Get dT 0 
yield i; 
} 
} 

















2 
1 


for (let x of nTimes(3)) { 
console.1log (x); 

} 

pd 

// 1 

// 2 


另外 ， 使 用 while 循环 也 可 以 ， 而 且 代 码 稍 微 简洁 一 点 : 


function* nTimes(n) { 
Let: i S00; 
while(n--) { 
yield i++; 
} 
} 


for (let x of nTimes(3)) { 
console.1log (x); 

} 

hr 0) 

A 

A 2 


这 样 使 用 生成 器 也 可 以 实现 范围 和 填充 数组 : 


function* range(start, end) { 
while(end > start) { 
yield start++; 
} 
} 




















for (const x of range(4, 7)) { 
console.1log (x); 

} 

// 4 

WS 

A 6 


function* zeroes(n) { 


while(n--) { 
yield 0; 
} 
} 
console.log(Array.from(zeroes(8))); // [0, 0, 0, 0, 0, 0, 0, 0] 


3. 产生 可 和 迭代 对 象 
可 以 使 用 星 号 增强 yiela 的 行为 ， 让 它 能 够 欠 代 一 个 可 迭代 对 象 ， 从 而 一 次 产 出 一 个 值 : 
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// 等 价 的 generatorFn: 
// function* generatorFn() { 
A fo (Goret- oF LS 为 肌 ME| 
// yield x; 
// } 
4 估计 
function* generatorFn() { 
yield* [1, 2, 3]; 
} 


let generatorObject = generatorFn(); 
for (const x of generatorFn()) { 


console.1log (x);} 


} 








Hs 

7 

A: 

与 生成 器 函数 的 星 号 类 似 ，yiela 星 号 两 侧 的 空格 不 影响 其 行为 : 
function* generatorFn() { 


Yield* [1, 2]; 

Yield *[3, 4]; 

Yield * [5, 6]; 
} 


for (const x of generatorFn()) { 
console.1log (x);} 


Se 
ss. 
OUUPRAODP 





因为 yieldx* 实 际 上 只 是 将 一 个 可 迭代 对 象 序列 化 为 一 连 串 可 以 单独 产 出 的 值 ， 所 以 这 跟 把 yiela 
放 到 一 个 循环 里 没什么 不 同 。 下 面 两 个 生成 器 函数 的 行为 是 等 价 的 : 


function* generatorFnA() { 








for (const x of [1, 2, 3]) { 
yield x; 
} 
} 
for (const x of generatorFnA()) { 


console.1log (x); 
} 
4 
// 2 
// 3 


function* generatorFnB() { 
yield* [1, 2, 3]; 
} 


for (const x of generatorFnB()) { 
console.1log (x);} 


} 





Lf 
A 
PA 


yield* 的 值 是 关联 迭代 器 返回 done: true 时 的 value 属性 。 对 于 普通 迭代 器 来 说 ， 这 个 值 是 


undefined: 





function* generatorFn() { 
console.log('iter value:', yield* [1, 2, 3]); 
} 
for (const x of generatorFn()) { 
console.log('value:', x); 


// iter value: undefined 
对 于 生成 器 函数 产生 的 近 代 器 来 说 ， 这 个 值 就 是 生成 器 函数 返回 的 值 : 
function* innerGeneratorFn() { 

yield 'foo'; 

return 'bar'; 


} 


function* outerGeneratorFn(genObj) { 








console.log('iter value:', yield* innerGeneratorFn()); 
} 
for (const x of outerGeneratorFn()) { 
console.log('value:', x); 


} 
// value: foo 
// iter value: bar 


4. 使 用 yiela* 实 现 递 归 算 法 
yield* 最 有 用 的 地 方 是 实现 递归 操作 ， 此 时 生成 器 可 以 产生 自身 。 看 下 面 的 例子 : 


function* nTimes(n) { 
Tf Mn 0 
yield* nTimes(n - 1); 
yield n -1; 
} 
} 




















for (const x of nTimes(3)) { 
console.1log (x); 

} 

六 

yl 

光大 学 


在 这 个 例子 中 , 每 个 生成 器 首先 都 会 从 新 创建 的 生成 器 对 象 产 出 每 个 值 ， 然 后 再 产 出 一 个 整数 。 结 
果 就 是 生成 器 函数 会 递归 地 减少 计数 器 值 ， 并 实例 化 另 一 个 生成 器 对 象 。 从 最 项 层 来 看 ， 这 就 相当 于 创 
建 一 个 可 迭代 对 象 并 返回 递增 的 整数 。 

使 用 递归 生成 器 结构 和 yield* 可 以 优雅 地 表达 递归 算法 。 下 面 是 一 个 图 的 实现 ， 用 于 生成 一 个 随 
机 的 双向 图 : 
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class Node { 

constructor(id) { 
this.id = 414d; 
this.neighbors = new Set(); 

} 

connect (node) { 
if (node !== this) { 


this.neighbors.add (node); 
node.neighbors.add (this); 
} 
} 
} 


class RandomGraph { 
constructor (size) 
this.nodes 


{ 


new Set(); 


// 创建 节点 
fo .Cet dE 


i < size; ++i) 


{ 


this.nodes.add (new Node(i)); 


} 


// 随机 连接 节点 
const threshold 


1 / size; 


for (const x of this.nodes) { 
for (const y of this.nodes) { 
if (Math.random() < threshold) { 
x.connect (y) ; 
} 
} 
} 
} 
// 这 个 方法 仅 用 于 调试 
print() { 
for (const node of this.nodes) { 
const ids = [...node.neighbors] 
.map((n) => n.id) 
eo 人 的 吉 失 局 : 
console.log( $s{node.id}: ${ids}.); 
} 
} 
} 
const g = new RandomGraph (6); 
g.print (); 
// 示例 输出 : 
LO OS 
NA Lr dD 
A 
Lh a OE yd 
和 
// 5: 0,4 


图 数据 结构 非常 适合 递归 遍历 ， 而 递归 





代 对 象 ， 产 出 该 对 象 中 的 每 一 个 值 ， 并 








且 对 


生成 器 恰好 非常 合用 。 为 此 ,各 


3 


E 成 带 函 数 必须 接收 一 个 可 达 














后 


个 值 进行 递归 。 这 个 实现 可 以 用 来 测试 某 个 图 是 否 连通 ， 
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即 是 否 没 有 不 可 到 达 的 节点 。 只 要 从 一 个 节点 开始 ， 然 后 尽力 访问 每 个 节点 就 可 以 了 。 结 果 就 得 到 了 一 
个 非常 简洁 的 深度 优先 遍历 : 
class Node { 
constructor(id) { 








} 


connect (node) { 


} 
} 


class RandomGraph { 
constructor(size) { 


print() { 


isConnected() { 
const visitedNodes = new Set(); 


function* traverse(nodes) { 
for (const node of nodes) { 
if (!visitedNodes.has(node)) { 
yield node; 
Yield* traverse (node.neighbors); 
} 
} 
} 





// 取得 集合 中 的 第 一 个 节点 


const firstNode = this.nodes [Symbol.iterator] () .next() .value; 


// 使 用 递归 生成 器 迭代 每 个 节点 
for (const node of traverse( [firstNode]l)) { 
visitedNodes.add (node); 


} 


return visitedNodes.size === this.nodes.size; 


7.3.3 生成 器 作为 默认 迭 代 器 


因为 生成 器 对 象 实现 了 Iterable 接口 ， 而 且 生成 器 函数 和 默认 迭代 器 被 调用 之 后 都 产生 迭代 器 ， 
所 以 生成 器 格外 适合 作为 默认 迭代 器 。 下 面 是 一 个 简单 的 例子 , 这 个 类 的 默认 迭代 器 可 以 用 一 行 代码 
出 类 的 内 容 : 


class Foo { 
constructor() { 
this.values = 






































[1, 2, 3]; 
} 
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* [Symbol.iterator]() { 
yield* this.values; 
} 
} 


const f = new Foo(); 

fo ‘(GONnst Of o£) 
console.1log (x);} 

} 

Zl 

// 2 

A4 -3 


这 里 ，for-of 循环 调用 了 默认 和 欠 代 器 〈 它 恰好 又 是 一 个 生成 器 函数 ) 并 产生 了 一 个 生成 器 对 象 。 





这 个 生成 器 对 象 是 可 迭代 的 ， 所 以 完全 可 以 在 欠 代 中 使 用 。 


7.3. 





方法 ， 


4 ”提前 终止 生成 器 


与 迭代 器 类 似 ， 生 成 器 也 支持 “可 关闭 ”的 概念 。 一 个 实现 Iterator 接口 的 对 象 一 定 有 next () 
还 有 一 个 可 选 的 return () 方 法 用 于 提前 终止 迁 代 器 。 生 成 器 对 象 除了 有 这 两 个 方法 ， 还 有 第 三 





个 方法 : throw()。 


function* generatorFn() {} 
const g = generatorFn(); 


console.log(g); // generatorFn {<suspended>} 
console.log(g.next); // f£f next() { [native codel] } 
console.log(g.return); // f return() { [native code] } 
console.log(g.throw); // £f throw() { [native code] } 


return() 和 throw() 方 法 都 可 以 用 于 强制 生成 器 进入 关闭 状态 。 


1. return() 


return () 方 法 会 强制 生成 器 进入 关闭 状态 。 提 供给 return () 方 法 的 值 ,就 是 终止 迭代 器 对 象 的 值 : 









































function* generatorFn() { 
for (const x of [1, 2, 3]) { 
yield x; 


} 
} 


const g = generatorFn(); 


console.log(g); // generatorFn {<suspended>} 
console.log(g.return(4)); // { done: true, value: 4 } 
console.l1log(g); // generatorFn {<closed>} 


与 迭代 器 不 同 ， 所 有 生成 器 对 象 都 有 return() 方 法 ， 只 要 通过 它 进入 关闭 状态 ， 就 无 法 恢复 了 。 














后 续 调用 next () 会 显示 done: true 状态 ， 而 提供 的 任何 返回 值 都 不 会 被 存储 或 传播 : 




















function* generatorFn() { 
for (const x of [1, 2, 3]) { 
yield x; 
} 
} 
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const g = generatorrn(); 
console.log(g.next ()); // { done: false, value: 1 } 
console.log(g.return(4)); // { done: true, value: 4 } 
console.log(g.next ()); // { done: true, value: undefined } 
console.log(g.next ()); // { done: true, value: undefined } 
console.log(g.next ()); // { done: true, value: undefined } 
for-of 循环 等 内 置 语言 结构 会 忽略 状态 为 done: true 的 Iteratorobject 内 部 返回 的 值 。 
function* generatorFn() { 

tor eonst x GE [Ts “Za 3]) 4 

yield x; 

} 
} 
const g = generatorrn(); 
for (const x of g) { 


em 
g.return(4); 


} 


console.1log (x); 


jp 
次/ 这 


2. throw() 
throw() 方 法 会 在 暂停 的 时 候 将 





























个 提供 的 错误 注入 到 生成 器 对 象 中 。 如 果 错 误 未 被 处 理 ， 生 成 器 








就 会 关闭 : 
function* generatorFn() { 
for (const x oF [TL 2 3]) 
yield x; 
} 
} 
const g = generatorrn(); 


处 至 


console.1log(g); // generatorFn {<suspended>} 


be 式 
g.throw('foo'); 
} catch (e) { 


console.log(e); // foo 


} 


console.10g(g); 


不 过 ， 假 如 生成 器 函数 内 部 处 理 了 这 个 错误 ,那么 生成 器 就 不 会 关闭 ,而且 还 可 以 恢复 执行 。 错 误 


// generatorFn {<closed>} 








E 会 跳 过 对 应 的 yiel19， 因 此 在 这 个 例子 中 会 跳 过 一 个 值 。 比 如 : 
function* generatorFn() { 
for (constx Of L127 3]) A 
try { 
Yield x; 


} catch(e) {} 
} 


} 
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const g = generatorFn(); 


console.log(lg.next()); // { done: false, value: 1} 
g.throw('foo'); 
console.log(g.next()); // { done: false, value: 3} 


在 这 个 例子 中 ， 生 成 器 在 try/catch 块 中 的 yield 关键 字 处 暂停 执行 。 在 暂停 期 间 ，throw() 方 
法 向 生成 器 对 象 内 部 注入 了 一 个 错误 : 字符 串 "foo"。 这 个 错误 会 被 yielg 关键 字 抛 出 。 因 为 错误 是 在 
生成 器 的 try/catch 块 中 抛 出 的 , 所 以 仍然 在 生成 器 内 部 被 捕获 。 可 是 , 由 于 yield 抛 出 了 那个 错误 ， 
生成 器 就 不 会 再 产 出 值 2。 此 时 , 生成 器 函数 继续 执行 , 在 下 一 次 迭代 再 次 遇 到 yielad 关键 字 时 产 出 了 
值 3。 





























注意 ”如果 生成 器 对 象 还 没有 开始 执行 ,那么 调用 throw() 抛 出 的 错误 不 会 在 函数 内 部 被 


捕获 ， 因 为 这 相当 于 在 函数 块 外 部 抛 出 了 错误 。 





7.4 小 结 


迭代 是 一 种 所 有 编程 语言 中 都 可 以 看 到 的 模式 .ECMAScript 6 正式 支持 迭代 模式 并 引入 了 两 个 新 的 
语言 特性 : 迭代 器 和 生成 髓 。 

迭代 器 是 一 个 可 以 由 任意 对 象 实现 的 接口 ,支持 连续 获取 对 象 产 出 的 每 一 个 值 ,任何 实现 Iterable 
接口 的 对 象 都 有 一 个 Symbol .iterator 属性 ,这 个 属性 引用 默认 迭代 器 。 默 认 人 迭代 器 就 像 一 个 欠 代 器 
工厂 ， 也 就 是 一 个 函数 ， 调 用 之 后 会 产生 一 个 实现 Iterator 接口 的 对 象 。 

迭代 器 必须 通过 连续 调用 next ( ) 方 法 才能 连续 取得 值 ， 这 个 方法 返回 一 个 Tteratorobject。 这 
个 对 象 包含 一 个 done 属性 和 一 个 value 属性 。 前 者 是 一 个 布尔 值 , 表示 是 否 还 有 更 多 值 可 以 访问 ; 后 
者 包含 迭代 器 返回 的 当前 值 。 这 个 接口 可 以 通过 手动 反复 调用 next () 方 法 来 消费 ， 也 可 以 通过 原生 消 
费 者 ， 比 如 for-of 循环 来 自动 消费 。 

生成 器 是 一 种 特殊 的 函数 ， 调 用 之 后 会 返回 一 个 生成 器 对 象 。 生 成 器 对 象 实现 了 Iterable 接口 ， 
因此 可 用 在 任何 消费 可 迭代 对 象 的 地 方 。 生 成 器 的 独特 之 处 在 于 支持 yiela 关键 字 ， 这 个 关键 字 能 
暂停 执行 生成 器 函数 。 使 用 yiela 关键 字 还 可 以 通过 next () 方 法 接收 输入 和 产生 输出 。 在 加 上 星 号 之 
后 ,，yielg 关键 字 可 以 将 跟 在 它 后 面 的 可 迭代 对 象 序列 化 为 一 连 串 值 。 
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ECMA-262 将 对 象 定义 为 一 组 属性 的 无 序 集合 。 严 格 来 说 ， 这 意味 着 对 象 就 是 一 组 没有 特定 顺序 的 
值 。 对 象 的 每 个 属性 或 方法 都 由 一 个 名 称 来 标识 ， 这 个 名 称 映射 到 一 个 值 。 正 因为 如 此 ( 以 及 其 他 还 未 
讨论 的 原因 )， 可 以 把 ECMAScript 的 对 象 想象 成 一 张 散 列表 ， 其 中 的 内 容 就 是 一 组 名 / 值 对 ， 值 可 以 是 


8.1 理解 对 象 


创建 自 定义 对 象 的 通常 方式 是 创建 opject 的 一 个 新 实例 ， 然 后 再 给 它 添加 属性 和 方法 ， 如 下 例 
所 示 : 


let person = new Object (); 

person.name = "Nicholas"; 

person.age = 29:; 

person.job = "Software Engineer"; 

person.sayName = function() { 
console.log(this.name); 


}3 

这 个 例子 创建 了 一 个 名 为 person 的 对 象 ， 而 且 有 三 个 属性 (name、age 和 job ) 和 一 个 方法 
( sayName () )。sayName () 方 法 会 显示 this.name 的 值 ， 这 个 属性 会 解析 为 person .name。 早 期 
JavaScript 开发 者 频繁 使 用 这 种 方式 创建 新 对 象 。 几 年 后 ， 对 象 字面 量变 成 了 更 流行 的 方式 。 前 面 的 例 
子 如 果 使 用 对 象 字面 量 则 可 以 这 样 写 : 


let person = { 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
sayName() { 

console.log(this.name); 

} 

于 了 


这 个 例子 中 的 person 对 象 跟 前 面 例 子 中 的 person 对 象 是 等 价 的 ， 它 们 的 属性 和 方法 都 一 样 。 这 
些 属 性 都 有 自己 的 特征 ， 而 这 些 特征 决定 了 它们 在 JavaScript 中 的 行为 。 
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8.1.1 属性 的 类 型 


ECMA-262 使 用 一 些 内 部 特性 来 描述 属 怕 
的 。 因 此 ， 开 发 者 不 能 在 JavaScript 中 直接 访问 这 些 特性 
两 个 中 括号 把 特性 的 名 称 括 起 来 ， 比 如 





属性 分 两 种 : 数据 属性 和 访问 如 


1. 数据 属性 














屋 ， 
盟 性 。 








的 特征 。 这 些 特性 是 由 为 JavaScript 实现 引擎 的 规范 定义 
E。 为 了 将 某 个 特性 标识 为 内 部 特性 ， 规 范 会 


[Enumerable]]o。 


注 天 














数据 属性 包含 一 个 保存 数据 值 的 位 置 。 值 会 从 这 个 位 置 读 取 ， 也 会 写 和 到 这 个 位 置 。 数 据 属性 有 4 





个 特性 描述 它们 的 行为 。 


口 [[Configurable] 




















口 [[value]l]: 包含 属性 实际 的 值 。 
的 默认 值 为 undefined。 


在 像 前 面 例子 中 那样 将 属性 显 式 添加 到 对 象 之 后 ，[ [configurable]]、 
[ [writable] ] 都 会 被 设置 为 


let person = { 
name: "Nicholas" 


了 





D [[Enumerable]]: 
象 上 的 属性 的 这 个 特性 都 是 true, 
口 [ [writable]]: 表示 属性 的 值 是 否 


这 个 特性 都 是 frue， 如 前 





: 表示 属 公 








的 例子 所 示 。 




















如 前 




































































这 里 , 我 们 创建 了 一 个 名 为 name 的 


特性 会 被 设置 为 "Nicholas" 


















































属性 ， 








并 给 它 赋 予 了 一 个 值 "Nicholas"。 
， 之 后 对 这 个 值 的 任何 修改 都 会 保存 这 个 位 置 。 








LE 


true， 而 [ [Value]] 特 性 会 被 设置 为 指定 的 值 。 比 如 : 





FE 是 否 可 以 通过 aelete 删除 并 重新 定义 ， 是 否 可 以 修改 它 的 特 
性 ， 以 及 是 否 可 以 把 它 改 为 访问 器 属性 。 默 认 情 况 下 ， 所 有 直接 定义 在 对 象 上 的 属性 的 这 个 特 
性 都 是 true， 如 前 面 
表示 属性 是 否 可 以 通过 for-in 循环 返回 。 默认 情况 下 ,所 有 直接 定义 在 对 
和 面 的 例子 所 示 。 
可 以 被 修改 。 
面 的 例子 所 示 。 
这 就 是 前 面 提 到 的 那个 读 取 和 写 人 属性 值 的 位 置 。 这 个 特性 





默认 情况 下 , 所 有 直接 定义 在 对 象 上 的 属性 的 














Enumerable]] 和 


这 意味 着 [ [Value]] 


要 修改 属性 的 默认 特性 ， 就 必须 使 用 Object .defineProperty () 方 法 。 这 个 方法 接收 3 个 参数 : 





要 给 其 添加 属性 的 对 象 、 





歧 


属性 的 名 称 和 一 个 描述 符 对 象 。 最 后 一 个 参数 ， 即 描述 符 对 象 上 的 属性 可 以 包 


含 : configurable、enumerable、writable 和 value， 跟 相关 特性 的 名 称 一 一 对 应 。 根 据 要 修改 
的 特性 ， 可 以 设置 其 中 一 个 或 多 个 值 。 比 如 : 








let person = {}; 


Object .defineProperty (person, 


writable: false, 


value: "Nicholas" 


3) 


console.log(person.name); // 
person.name = "Greg"; 
console.log(person.name); // 


这 个 例子 创建 了 一 个 名 为 name 的 届 











"name", 


{ 


"Nicholas" 


"Nicholas" 











性 间 








F 给 它 赋 予 了 一 个 只 读 的 值 "Nicholas"。 这 个 属性 的 值 就 








不 能 再 修改 了 , 在 非 严格 模式 下 尝试 给 这 个 属性 重庆 








的 值 会 抛 出 错误 。 











类 似 的 规则 也 适用 于 创建 不 可 配置 的 属性 。 比 如 : 


所 赋值 会 被 忽略 。 在 严格 模式 下 ， 


尝试 修改 只 读 属 性 
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let person = {}; 
Object .defineProperty (person, "name", { 
configurable: false, 
value: "Nicholas" 
}); 
console.log(person.name); // "Nicholas" 
delete person.name; 
console.log(person.name); // "Nicholas" 


这 个 例子 把 configurable 设置 为 false， 意 味 着 这 个 属性 不 能 从 对 象 上 删除 。 非 严格 模式 下 对 
这 个 属性 调用 aelete 没有 效果 ,严格 模式 下 会 抛 出 错误 。 此 外 ， 一 个 属性 被 定义 为 不 可 配置 之 后 ， 就 
不 能 再 变 回 可 配置 的 了 。 再 次 调用 object .defineProperty () 并 修改 任何 非 writable 属性 会 导致 
错误 : 
let person = {}; 
Object .defineProperty (person, "name", { 
configurable: false, 


value: "Nicholas" 
小 让 













































































// 抛 出 错误 

Object .defineProperty (person, "name", { 

configurable: true, 
value: "Nicholas" 

}); 

因此 ， 虽然 可 以 对 同一 个 属性 多 次 调用 object .defineProperty() ， 但 在 把 configurable 设 
置 为 false 之 后 就 会 受 限制 了 。 

在 调用 object .defineProperty() 时 , configurable、enumerable 和 writable 的 值 如 果 不 
指定 ， 则 都 默认 为 false。 多 数 情况 下 ， 可 能 都 不 需要 object .defineProperty () 提供 的 这 些 强大 
的 设置 ， 但 要 理解 JavaScript 对 象 ， 就 要 理解 这 些 概 念 。 

2. 访问 器 属性 

访问 需 属 性 不 包含 数据 值 。 相 反 ， 它 们 包含 一 个 获取 ( getter ) 函数 和 一 个 设置 ( setter ) 函数 ， 不 
过 这 两 个 函数 不 是 必需 的 。 在 读 取 访 问 器 属性 时 ， 会 调用 获取 函数 ， 这 个 函数 的 责任 就 是 返回 一 个 有 效 
的 值 。 在 写 和 访问 器 属性 时 ， 会 调用 设置 函数 并 传人 新 值 ， 这 个 函数 必须 决定 对 数据 做 出 什么 修改 。 访 
问 器 属性 有 4 个 特性 描述 它们 的 行为 。 
口 [[configurable]]: 表示 属性 是 否 可 以 通过 aelete 删除 并 重新 定义 ， 是 否 可 以 修改 它 的 特 

性 ， 以 及 是 否 可 以 把 它 改 为 数据 属性 。 默 认 情 况 下 ， 所 有 直接 定义 在 对 象 上 的 属性 的 这 个 特性 
都 是 trueo 
口 [ [Enumerable]]: 表示 属性 是 否 可 以 通过 for-in 循环 返回 。 默认 情况 下 , 所 有 直接 定义 在 对 
ee 性 都 是 true。 
口 [ [Get]]: 获取 函数 ， 在 读 取 属性 时 调用 。 默 认 值 为 undqefineq。 
口 [[Set]]: 设置 函数 ， 在 写 人 属性 时 调用 。 默 认 值 为 undefined。 
访问 器 属性 是 不 能 直接 定义 的 ， 必 须 使 用 object .defineProperty ()。 下 面 是 一 个 例子 : 


// 定义 一 个 对 象 ， 包 含 伪 私 有 成 员 year_ 和 公共 成 员 edition 
let book = { 

year_: 2017， 

edition: 1 
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上 


Object .dqefineProperty (book, "year", { 
get 人) 二 
return this.year_ ; 
je 
set (newValue) { 
if (newValue > 2017) { 
this.year = newValue; 
this.edition += newValue - 2017; 
} 
} 
于 大池 
book .year = 2018; 
console.log(book.edition); // 2 


在 这 个 例子 中 ， 对 象 book 有 两 个 默认 属性 : year_ 和 edition。year_ 中 的 下 划 线 常用 来 表示 该 























盟 性 并 不 希望 在 对 象 方法 的 外 部 被 访问 。 另 一 个 属性 year 被 定义 为 一 个 访问 器 属性 ， 其 中 获取 函数 简 








单 地 返回 year_ 的 值 ， 而 设置 函数 会 做 一 些 计 算 以 决定 正确 的 版 本 (edition )。 因 此 , 把 year 属性 修改 


为 2018 会 导致 year_ 变 成 2018，edition 变 成 2。 这 是 访问 器 属性 的 典型 使 用 场景 ， 即 设置 一 个 属性 
值 会 导致 一 些 其 他 变化 发 生 。 












































获取 函数 和 设置 函数 不 一 定 都 要 定义 。 只 定义 获取 函数 意味 着 属性 是 只 读 的 ,尝试 修改 属性 会 被 忽 


在 严格 模式 下 ， 尝试 写 入 只 定义 了 获取 函数 的 属性 会 抛 出 错误 。 类 似 地 ， 只 有 一 个 设置 函数 的 属性 
不 能 读 取 的 ， 非 严格 模式 下 读 取 会 返回 unaefined， 严 格 模式 下 会 抛 出 错误 。 
在 不 支持 Object .defineProperty () () 的 浏览 器 中 没有 办 法 修改 [ [Configurablel] ] 或 [[Enumerable]]。 












































注意 在 ECMAScript5 以 前 , 开发 者 会 使 用 两 个 非 标准 的 访问 创建 访问 器 属性 : define- 
Getter () 和 defineSetter  ()。 这 两 个 方法 最 早 是 Firefox 引入 的 ， 后 来 Safari、 


Chrome 和 Opera 也 实现 了 。 





8.1.2 ”定义 多 个 属性 


Properties() 














在 一 个 对 象 上 同时 定义 多 个 属性 的 可 能 性 是 非常 大 的 。 为 此 ,ECMAScript 提供 了 object .aefine- 
方法 。 这 个 方法 可 以 通过 多 个 描述 符 一 次 性 定义 多 个 属性 。 它 接收 两 个 参数 ， 要 为 之 添 




















加 或 修改 属性 的 对 象 和 男 一 个 描述 符 对 象 ， 其 属性 与 要 添加 或 修改 的 属性 一 一 对 应 。 比 如 : 


let book = {}; 
Object .defineProperties (book, { 
year_: { 
value: 2017 
} 


edition: { 
value: 1 


}, 


year: { 
get() { 
return this.year_; 


ys 
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Set (newValue) { 
if (newValue > 2017) { 
this.year_ = newValue; 
this.edition += newValue - 2017; 


} 
} 
过 
这 段 代 码 在 book 对 象 上 定义 了 两 个 数据 属性 year_ 和 edition， 还 有 一 个 访问 器 属性 year。 
最 终 的 对 象 跟 上 一 节 示 例 中 的 一 样 。 唯 一 的 区 别 是 所 有 属性 都 是 同时 定义 的 ， 并且 数 据 属性 的 


configurable、enumerable 和 writable 特性 值 都 是 false。 


8.1.3” 读 取 属 性 的 特性 


使 用 object .getownPropertyDescriptor() 方 法 可 以 取得 指定 属性 的 属性 描述 符 。 这 个 方法 接 
收 两 个 参数 : 属性 所 在 的 对 象 和 要 取得 其 描述 符 的 属性 名 。 返 回 值 是 一 个 对 象 ， 对 于 访问 器 属性 包含 
configurable、enumerable、get 和 set 属性， 对 于 数据 属性 包含 configurable、enumerable、 
writable 和 value 属性 。 比 如 : 


let book = {}; 
Object .defineProperties (book, { 
year_: { 
value: 2017 


nl 

































































可 











year: { 
get: function() { 
return this.year_; 


} 


set: function(newValue){ 
if (newValue > 2017) { 
this.year_ = newValue; 
this.edition += newValue - 2017; 


} 


过 


let descriptor = Object .getOownPropertyDescriptor (book， "year_"); 


console.log(descriptor.value); // 2017 
console.log(descriptor.configurable); // false 
console.log(typeof descriptor.get); // "undefined" 

let descriptor = Object .getOwnPropertyDescriptor(book, "year"); 
console.log(descriptor.value); // undefined 
console.log(descriptor.enumerable); // false 
console.log(typeof descriptor.get); // "function" 


对 于 数据 属性 year_，value 等 于 原来 的 值 ，configurable 是 false, get 是 undefined。 对 
于 访问 器 属性 year, value 是 undefined, enumerable 是 false, get 是 一 个 指向 获取 函数 的 指针 。 
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ECMAScript 2017 新 增 了 object .getOwnPropertyDescriptors() 
会 在 每 个 自 有 属性 上 调用 Object .getOwnPropertyDescriptor() 


使 用 这 个 静态 方法 会 返回 如 下 对 象 : 




















前 面 的 例子 ， 
let book = {}; 
Object .defineProperties (book, { 
year_: { 
value: 2017 


}, 


edition: { 


value: 1 
i 
year: { 
ete unetion(y) .ft 


return this.year_; 


}, 


SEs 
if 


this.year_ 


function (newValue){ 
(newValue > 2017) 


{ 


newValue; 


this.edition += newValue - 2017; 


yy 


console.log (Object .getOwnPropertyDescriptors (book)); 


Pt 

edition: { 

// configurable: false, 
// enumerable: false, 
// value: 1, 

V6 writable: false 

WA De 

六 year: { 

// configurable: false, 
// enumerable: false, 
VA et FO) 

// set: f(newValue), 

// J 

// year_: { 

// configurable: false, 
A enumerable: false, 
// value: 2017, 

J writable: false 

A } 

Zt 


8.1.4 合并 对 象 


JavaScript 开发 者 经 常 觉得“ 








本 地 属性 一 起 复制 到 目标 对 象 上 。 有 时 候 这 种 操作 也 被 称 为 “ 混 








源 对 象 的 属性 得 到 了 增强 。 





2 证 


口 


fF”( merge ) 两 个 对 象 很 有 





静态 方法 。 这 个 方法 实际 上 
并 在 一 个 新 对 象 中 返回 它们 。 对 于 











目 。 更 具体 地 说 ， 就 是 把 源 对 象 所 有 的 








入 ”( mixin )， 因 为 目标 对 象 通过 混入 
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ECMAScript 6 专门 为 合并 对 象 提供 了 object .assign() 方 法 。 这 个 方法 接收 一 个 目标 对 象 和 一 个 
或 多 个 源 对 象 作 为 参数 , 然后 将 每 个 源 对 象 中 可 枚 举 (object .propertyIsEnumerable() 返 回 true ) 
和 自 有 (object .hasownProperty () 返 回 true ) 属性 复制 到 目标 对 象 。 以 字符 串 和 符号 为 键 的 属性 
会 被 复制 。 对 每 个 符合 条 件 的 属性 ， 这 个 方法 会 使 用 源 对 象 上 的 [ [cet]] 取 得 属性 的 值 ， 然 后 使 用 目标 
对 象 上 的 [[set]] 设 置 属性 的 值 。 


let dest, src, result; 











本 


上 | 

















/** 
* 简单 复制 
全 从 
dest = {}; 
Sie ;a, 4 Lo SHEer 


result = Object.assign(dest, src); 


// Object.assign 修改 目标 对 象 
// 也 会 返回 修改 后 的 目标 对 象 


console.log(dest === result); // true 
console.log(dest !== src); // true 
console.log(result); // { id: src } 
console.log (dest); AA Ld: src } 
/** 

* 多 个 源 对 象 

4 
dest = {}; 


result = Object.assign(dest, { a: 'foo' }, { b: 'bar' }); 





console.log(result); // { a: foo, b: bar } 


/** 
* 获取 函数 与 设置 函数 
4 

dest = { 


set al(lval) { 
console.log( ` Invoked dest setter with param S${val}.); 
} 
} 
SC 提 
get a() { 
console.log('Invoked src getter'); 
return 'foo'; 
} 
站 


Object.assign(dest, src); 

// 调用 src 的 获取 方法 

// 调用 dest 的 设置 方法 并 传 入 参数 "foo" 

// 因为 这 里 的 设置 函数 不 执行 赋值 操作 

// 所 以 实际 上 并 没有 把 值 转移 过 来 
console.log(dest); // { set al(lval) {...} } 
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object .assign() 实 际 上 对 每 个 源 对 象 执 行 的 是 浅 复制 。 如 与 























本 





多 个 源 对 象 都 有 相同 的 属性 ， 





则 使 


用 最 后 一 个 复制 的 值 。 此 外 ， 从 源 对 象 访问 器 属性 取得 的 值 ， 比 如 获取 函数 ,会 作为 一 个 静态 值 赋 给 目 
标 对 象 。 换 句 话 说 ， 不 能 在 两 个 对 象 间 转 移 获取 函数 和 设置 函数 。 





let dest, src, result; 


/** 

* 徐 盖 属性 

*/ 

dest = { id: 'dest' }; 


result = Object.assign(dest, { id: 'srcl', a: 'f 


// Object.assign 会 履 盖 重复 的 属性 


le 


console.log(result); // { id: Src2，a: foo, b: bar } 


// 可 以 通过 目标 对 象 上 的 设置 函数 观察 到 和 履 盖 的 过 程 : 
dest = { 
set id(x) { 
console.1log (x); 
} 
Fs 


Object.assign(dest, { id: 'first' }, { id: 'seco 
// first 

// second 

LZ CHL 


/** 


* 对 象 引 用 


Object.assign(dest, src); 


// 浅 复 制 意味 着 只 会 复制 对 象 的 引用 
console.log (dest); A 
console.log(dest.a === src.a); // true 


na" "Fe A(T third 


b: 


}); 


"Bar }); 


如 果 赋 值 期 间 出 错 ， 则 操作 会 中 止 并 退出 ， 同 时 抛 出 错误 。Object .assign() 没 有 “ 回 滚 ” 





赋值 的 概念 ， 因 此 它 是 一 个 尽力 而 为 、 可 能 只 会 完成 部 分 复制 的 方法 。 


let dest, src, result; 


/** 
* 错误 处 理 
六 

dest = {}; 

从 GS 让 
ee 
get b() { 


// Object.assign() 在 调用 这 个 获取 函数 时 会 抛 出 错误 
throw new Error(); 


}, 








之 前 
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"Dar 


try { 

Object.assign(dest, src); 
} catch(e) {} 
// Object.assign() 没 办 法 回 滚 已 经 完成 的 修改 
// 因此 在 抛 出 错误 之 前 ， 目 标 对 象 上 已 经 完成 的 修改 会 继续 存在 : 
console.log(dest); // { a: foo } 


’ 


8.1.5 ”对 象 标 识 及 相等 判定 


在 ECMAScript 6 之前， 有些 特殊 情况 即使 是 === 操 作 符 也 无 能 为 力 : 



































// 这 些 是 === 符 合 预 期 的 情况 
console.log(true === 1); // false 
console.log({} === {}); // false 
Consolé.109g9("2"™ === 2)3 // false 
// 这 些 情况 在 不 同 JavaScript 引 掌中 表现 不 同 ， 但 仍 被 认为 相等 
console.log(+0 === -0); // true 
console.log(+0 === 0); // true 
console.1o0og(-0 === 0); // true 
// 要 确定 NaN 的 相等 性 ， 必 须 使 用 极为 讨厌 的 isNaN () 
console.log(NaN === NaN); // false 
console.log(isNaN(NaN)); // true 
为 改善 这 类 情况 ，ECMAScript 6 规范 新 增 了 object .is () ， 这 个 方法 与 === 
到 了 上 述 边界 情形 。 这 个 方法 必须 接收 两 个 参数 : 
console.log(Object.is(true, 1)); // false 
console.log (Object.is({}, {})); // false 
console.log(Object.is("2", 2)); // false 
// 正确 的 0、-0、+0 相等 /不 等 判定 
console.log(Object.is(+0, -0)); // false 
console.log (Object.is(+0, 0)); // true 
console.log(Object.is(-0, 0)); // false 
// 正确 的 NaN 相等 判定 
console.log(Object.is(NaN, NaN)); // true 
要 检查 超过 两 个 值 ， 递 归 地 利用 相等 性 传递 即 可 : 
function recursivelyCheckEqual (x, ..rest) { 


return Object.is(x, rest[0]) && 











很 像 ， 但 同时 也 考虑 汪汪 

















(rest.length < 2 || recursivelyCheckEqual(...rest)); 
} 
8.1.6 ”增强 的 对 象 语法 
ECMAScript 6 为 定义 和 操作 对 象 新 增 了 很 多 极其 有 用 的 语法 糖 特 性 ,这些 特 怕 


的 行为 ， 但 极 大 地 提升 了 处 理 对 象 的 方便 程度 。 
本 节 介 绍 的 所 有 对 象 语法 同样 适用 于 ECMAScript 6 的 类 ， 本 章 后 面 会 讨论 。 








都 没有 改变 现 有 引擎 
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注意 ” 相 比 于 以 往 的 替代 方案 ,本 节 介 绍 的 增强 对 象 语法 可 以 说 是 一 骑 绝 洁 。 因 此 本 章 及 


本 书 会 默认 使 用 这 些 新 语法 特性 。 





1. 属性 值 简写 





在 给 对 象 添加 变量 的 时 候 ， 开 发 者 经 常会 发 现 属性 名 和 变量 名 是 一 样 的 。 例 如 : 





let name = 'Matt'; 

let person = { 
name: name 

} 


console.log(person); // { name: 'Matt' } 


为 此 , 简写 属性 名 语法 出 现 了 。 简 写 属性 名 只 要 使 用 变量 名 ( 














不 用 再 写 冒 号 ) 就 会 自动 被 解释 为 同 


名 的 属性 键 。 如 果 没 有 找到 同名 变量 ， 则 会 抛 出 ReferenceError。 








以 下 代码 和 之 前 的 代码 是 等 价 的 : 
Jet name = 'Matt'; 
let person = { 


}; 


console.log(person); // { name: 'Matt' } 











代码 压缩 程序 会 在 不 同 作用 域 间 保留 属性 名 ， 以 防止 找 不 到 3 


function makePerson(name) { 
return { 
name 
3 
} 


let person = makePerson('Matt'); 


console.log(person.name); // Matt 


| 用 。 以 下 面 的 代码 为 例 : 








在 这 里 ， 即 使 参数 标识 符 只 限定 于 函数 作用 域 ， 编 译 器 也 会 保留 初始 的 name 标识 符 。 如 果 使 用 
Google Closure 编译 器 压缩 ， 那 么 函数 参数 会 被 缩短 ， 而 属性 名 不 变 ; 

















function makePerson (a) { 
return { 
name: a 
}; 
} 


Var person = makePerson("Matt"); 


console.log(person.name); // Matt 


2. 可 计算 属性 








在 引入 可 计算 属性 之 前 ,如果 想 使 用 变量 的 值 作为 属性 ,那么 必须 先 声 明 对 象 , 然后 使 用 中 括号 语 





法 来 添加 属性 。 换 句 话 说 ， 不 能 在 对 象 字 面 量 中 直接 动态 命名 属 诉 


const PameKey = 'name'; 
const :ageKey = "d&ge 














E。 比 如 : 
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const jobKey = 'job'; 


let person = {}; 


person[lnameKey] = 'Matt'; 
Derson [ageKey] = 27; 
person[jobKey] = 'Software engineer'; 


console.log(person); // { name: 'Matt', age: 27, job: 'Software engineer' } 
有 了 可 计算 属性 , 就 可 以 在 对 象 字面 量 中 完成 动态 属性 赋值 。 中 括号 包围 的 对 象 属性 键 告诉 运行 时 
将 其 作为 JavaScript 表达 式 而 不 是 字符 串 来 求 值 : 


const nameKey = 'name'; 

















const ageKey = 'age'; 
const jobKey = 'job'; 
let person = { 
[nameKey]: 'Matt', 
[ageKey]: 27, 
[jobKey]: 'Software engineer' 


}; 


console.log(person); // { name: 'Matt', age: 27, job: 'Software engineer' } 


因为 被 当 作 JavaScript 表达 式 求 值 , 所 以 可 计算 属性 本 身 可 以 是 复杂 的 表达 式 , 在 实例 化 时 再 求 值 : 

















const PameKey = 'name'; 
const ageKey = 'age'; 
const jobKey = 'job'; 


let uniqueToken = 0; 


function getUniqueKey (key) { 
return ‘S$S{key}_${uniqueToken++}.，; 





} 





let person = { 





[getUnidueKey (nameKey)]: 'Matt', 
[getUniqueKey (ageKey)]: 27, 
[getUniqueKey (jobKey)]: 'Software engineer' 
} 
console.log(person); // { name_0: 'Matt', age_1: 27, job 2: 'Software engineer' } 


注意 ”可 计算 属性 表达 式 中 抛 出 任何 错误 都 会 中 断 对 象 创建 。 如 果 计 算 属 性 的 表达 式 有 副 


作用 ， 那 就 要 小 心 了 ， 因 为 如 果 表 达 式 抛 出 错误 ， 那 么 之 前 完成 的 计算 是 不 能 回 滚 的 。 





3. 简写 方法 名 
在 给 对 象 定义 方法 时 , 通常 都 要 写 一 个 方法 名 、 冒号, 然后 再 引用 一 个 匿名 函数 表达 式 , 如 下 所 示 : 


let person = { 
sayName: function(name) { 
console.log( ‘My name is S${name}.); 
} 
}; 








person.sayName ('Matt'); // My name is Matt 
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新 的 简写 方法 的 语法 遵循 同样 的 模式 , 但 开发 者 要 放弃 给 函数 








命名 通常 没什么 用 )。 相 应 地 ， 这 样 也 可 以 明显 缩短 方法 声明 。 
以 下 代码 和 之 前 的 代码 在 行为 上 是 等 价 的 : 
let person = { 


sayName (name) { 
console.log( ‘My name is S${name} 、) 























} 
过 
person.sayName('Matt'); // My name is Matt 
简写 方法 名 对 获取 函数 和 设置 函数 也 是 适用 的 : 











let person = { 
name_: '', 
get name() { 
return this.name ; 


} 


set name (name) { 


this.name = name; 


} 


sayName() { 


console.log( ‘My name is S${this.name }.); 


} 
二 


person.name = 'Matt' 
person.sayName(); // My name is Matt 








简写 方法 名 


与 可 计算 属性 键 相互 兼容 : 








const methodqKey = 'sayName'; 


let person = { 
[methodKey] (name) { 
console.log( ‘My name is S${name}.); 


} 
} 


person.sayName('Matt'); // My name is Matt 





表达 式 命名 ( 不 过 给 作为 方法 的 函数 


注意 简写 方法 名 对 于 本 章 后 面 介绍 的 ECMAScript 6 的 类 更 有 用 。 





8.1.7 “对象 解构 


ECMAScript 6 新 增 了 对 象 解构 语法 , 可 以 在 一 条 语句 中 使 用 藤 套 数据 实现 一 个 或 多 个 赋值 操作 。 简 
单 地 说 ， 对 象 解构 就 是 使 用 与 对 象 匹配 的 结构 来 实现 对 象 属性 赋值 。 





下 面 的 例子 








展示 了 两 段 等 价 的 代码 ， 首 先是 不 使 用 对 象 解构 的 : 


// 不 使 用 对 象 解构 


let person 


= { 


name: 'Matt', 


age: 27 
于 
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let personName person.name, 


personAge = person.age; 
console.log(personName); // Matt 
console.log(personAge); // 27 


然后 ， 是 使 用 对 象 解构 的 : 
// 使 用 对 象 解构 


let person { 
name: 'Matt '， 
age: 27 




















let { name: personName, age: personAge } = person; 
console.log(personName); // Matt 
console.log (personAge); 2 
使 用 解构 ， 可 以 在 一 个 类 似 对 象 字面 量 的 结构 中 ,声明 多 个 变量 ， 同 时 执行 多 个 赋值 操作 。 如 果 想 
让 变量 直接 使 用 属性 的 名 称 ， 那 么 可 以 使 用 简写 语法 ， 比 如 : 
let person = { 
name: 'Matt', 
age: 27 


于 


let { name, age } = person; 
console.log(name); // Matt 
console.log(age); 大 过 7 








解构 赋值 不 一 定 与 对 象 的 属性 匹配 。 赋 值 的 时 候 可 以 忽 








该 变量 的 值 就 是 undefined: 


let person . 
name: 'Matt '， 
age: 27 

) 


let { name, job } person; 


// Matt 
// undefined 


console.log (name); 
console.1log(job); 





略 某 些 属性 ， 而 如 果 引 用 的 属性 不 存在 ,， 则 Ee 



































的 属性 不 存在 于 源 对 象 中 的 


再 


EE 


i 刚 提 到 的 引 














也 可 以 在 解构 赋值 的 同时 定义 默认 值 ， 这 适用 于 前 本 
情况 : 
let person = { 
name: "Matt '， 
age: 27 
站 
let { name, job='Software engineer' } = person; 


// Matt 
// Software engineer 


console.log (name); 
console.1log(job); 
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解构 在 内 部 使 用 函数 Toobject () (不 能 在 运行 时 环境 中 直接 访问 ) 把 源 数据 结构 转换 为 对 象 。 这 








意味 着 在 对 象 解构 的 上 下 文中 ， 原 始 值 会 被 当成 对 象 。 这 也 意味 着 ( 根据 Toobject () 的 定义 )，nul1 
和 ungdefined 不 能 被 解构 ， 否 则 会 抛 出 错误 。 

let { length } = 'foobar'; 

console.log(length); XK 治 

let. { construauctory 和 及 = 4 

console.log(c === Number); // true 

Tet Ey, SLL // TypeError 

let { _ } = undefined; // TypeError 











解构 并 不 要 求 变 量 必须 在 解构 表达 式 中 声明 。 不过， 如 果 是 给 事先 声明 的 变量 赋值 ， 则 赋值 表达 式 
必须 包含 在 一 对 括号 中 : 


let personName, personAge; 


let person = { 
name: 'Matt', 
age: 27 

Fs 


({name: personName, age: personAge} = person); 


console.log(personName, personAge); // Matt, 27 


1. 幅 套 解构 
解构 对 于 引用 嵌 套 的 属性 或 赋值 目标 没有 限制 。 为 此 ， 可 以 通过 解构 来 复制 对 象 属性 : 


let person = { 
name: 'Matt', 
age: 27, 
OB 
title: 'Software engineer' 


} 














T 


六 
let personCopy = {}; 


({ 
name: personCopy .name, 
age: personCopy.age, 
job: personCopy .job 

} = person); 


// 因为 一 个 对 象 的 引用 被 赋值 给 PersonCopy， 所 以 修改 
// person.job 对 象 的 属性 也 会 影响 personCopy 
Person .job.title = 'Hacker' 


console.log (person);} 
// { name: 'Matt', age: 27, job: { title: 'Hacker' } } 


console.log(personCopy); 
// { name: 'Matt', age: 27, job: { title: 'Hacker' } } 


解构 赋值 可 以 使 用 咀 套 结构 ， 以 匹配 垦 套 的 属性 : 




















山 
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let person = { 
name: 'Matt', 
age: 27， 
job: { 
title: 'Software engineer' 
} 
}; 


// 声明 title 变量 并 将 person.job.title 的 值 赋 给 它 
let { job: { title } } = person; 


console.log(title); // Software engineer 
在 外 层 属性 没有 定义 的 情况 下 不 能 使 用 山 套 解构 。 无 论 源 对 象 还 是 目标 对 象 都 一 样 : 


let person = { 
job: { 
title: 'Software engineer' 
} 
地 
let personCopy = {}; 














// foo 在 源 对 象 上 是 undefined 
(x 
fe 4 
bar: personCopy .bar 


-= Dersorn}s 
// TypeError: Cannot destructure property 'bar' of 'undefined' or 'null'. 


// job 在 目标 对 象 上 是 undefined 


({ 
job: { 
title: personCopy.job.title 


} = person); 
// TypeError: Cannot set property 'title' of undefined 


2. 部 分 解构 
需要 注意 的 是 , 涉及 多 个 属性 的 解构 赋值 是 一 个 输出 无 关 的 顺序 化 操作 。 如 果 一 个 解构 表达 式 涉及 
多 个 赋值 ， 开 始 的 赋值 成 功 而 后 面 的 赋值 出 错 ， 则 整个 解构 赋值 只 会 完成 一 部 分 : 
let person = { 
name: 'Matt', 


age: 27 




















let personName, personBar, personAge; 


try { 

// person.foo 是 undefined， 因 此 会 抛 出 错误 

({name: personName, foo: { bar: personBar }, age: personAge} = person); 
ycateh(e) ty 


console.log(personName, personBar, personAge); 
// Matt, undefined, undefined 


3. 参数 上 下 文 匹配 
在 函数 参数 列表 中 也 可 以 进行 解构 赋值 。 对 参数 的 解构 赋值 不 会 影响 arguments 对 象 ， 但 可 以 在 
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函数 签名 中 声明 在 函数 体内 使 用 局 部 变量 : 


let person = { 
name: 'Matt', 
age: 27 

过 





function printPerson(foo, {name, age}, bar) { 
console.log(arguments); 
console.log(name, age); 


} 


function printPerson2 (foo, {name: personName, age: personAge}, bar) { 
console.log(arguments); 
console.log(personName, personAge); 


} 


printPerson('lst', person, '2nd'); 
du bet 4 ame TMatt” ager 2 1 2nd 
六 Mat 27 


printPerson2('1lst', person, '2nd'); 
// ['lst', { name: 'Matt', age: 27 }, '2nd'] 
人 MattY 2 


8.2 创建 对 象 


虽然 使 用 object 构造 函数 或 对 象 字 面 量 可 以 方便 地 创建 对 象 , 但 这 些 方式 也 有 明显 不 足 : 创建 具 
有 同样 接口 的 多 个 对 象 需要 重复 编写 很 多 代码 。 


8.2.1 概述 


综观 ECMAScript 规范 的 历次 发 布 ， 每 个 版 本 的 特性 似乎 都 出 人 意料 。ECMAScript 5.1 并 没有 正式 
支持 面向 对 象 的 结构 ， 比 如 类 或 继承 。 但是， 正如 接 下 来 儿 节 会 介绍 的 ,巧妙 地 运用 原型 式 继承 可 以 成 
功 地 模拟 同样 的 行为 。 

ECMAScript 6 开始 正式 支持 类 和 继承 。ES6 的 类 旨 在 完全 涵盖 之 前 规范 设计 的 基于 原型 的 继承 模 
式 。 不 过 ， 无 论 从 哪 方面 看 ，ES6 的 类 都 仅仅 是 封装 了 ES5.1 构造 函数 加 原型 继承 的 语法 糖 而 已 。 
































注意 不 要 误会 : 采用 面向 对 象 编程 模式 的 JavaScript 代码 还 是 应 该 使 用 ECMAScript 6 的 
类 。, 但 不 管 怎么 说 , 理解 ES6 类 出 现 之 前 的 惯例 总 是 有 盖 无 害 的 。 特别 是 ES6 的 类 定义 本 


身 就 相当 于 对 原 有 结构 的 封装 。 因 此 ,在 介绍 ES6 的 类 之 前 ， 本 书 会 循序 渐进 地 介绍 被 类 
取代 的 那些 底层 概念 。 





8.2.2 工厂 模式 

工厂 模式 是 一 种 众所周知 的 设计 模式 ， 广 泛 应 用 于 软件 工程 领域 ， 用 于 抽象 创建 特定 对 象 的 过 程 。 
( 本 书后 面 还 会 讨论 其 他 设计 模式 及 其 在 JavaScript 中 的 实现 。) 下 面 的 例子 展示 了 一 种 按照 特定 接口 创 
建 对 象 的 方式 : 












































8.2 ”创建 对 象 221 





function createPerson(name, age, job) { 
let o = new Object (); 
o.name = name; 


OQ oO 
en 

O 〇 

LS 

1 

UU 

O 〇 

局， 


.SayName = function() { 
console.log(this.name); 


return o; 


} 


createPerson("Nicholas", 29, "Software Engineer"); 
createPerson("Greg", 27, "Doctor"); 


let personl 
let person2 


这 里 ,函数 createPerson() 接 收 3 个 参数 ,根据 这 儿 个 参数 构建 了 一 个 包含 Person 信息 的 对 象 。 
可 以 用 不 同 的 参数 多 次 调用 这 个 函数 ， 每 次 都 会 返回 包含 3 个 属性 和 1 个 方法 的 对 象 。 这 种 工厂 模式 虽 
然 可 以 解决 创建 多 个 类 似 对 象 的 问题 ， 但 没有 解决 对 象 标识 问题 ( 即 新 创建 的 对 象 是 什么 类 型 )。 


8.2.3 ”构造 函数 模式 


前 面 几 章 提 到 过 , ECMAScript 中 的 构造 函数 是 用 于 创建 特定 类 型 对 象 的 。 像 object 和 Array 这 
样 的 原生 构造 函数 ,运行 时 可 以 直接 在 执行 环境 中 使 用 。 当 然 也 可 以 自 定义 构造 函数 ,以 函数 的 形式 为 
自己 的 对 象 类 型 定义 属性 和 方法 。 
比如 ， 前 面 的 例子 使 用 构造 函数 模式 可 以 这 样 写 : 


function Person(name, age, job)t{ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function() { 
console.log(this.name); 
js 
} 

































































new Person("Nicholas", 29, "Software Engineer"); 
new Person("Greg", 27, "Doctor"); 


let personl 
let person2 


personl.sayName(); // Nicholas 
person2.sayName(); // Greg 


在 这 个 例子 中 ，Person () 构造 函数 代 赫 了 createPerson () 工 厂 图 数 。 实 际 上 ，Person () 内 部 
的 代码 跟 createPerson () 基本 是 一 样 的 ， 只 是 有 如 下 区 别 。 
口 没有 显 式 地 创建 对 象 。 
口 属性 和 方法 直接 赋值 给 了 this。 
口 没有 zeturn。 
另外 ， 要 注意 函数 名 Person 的 首 字 母 大 写 了 。 按 照 惯 例 ， 构 造 函 数 名 称 的 首 字母 都 是 要 大 写 的 ， 
非 构 造 函 数 则 以 小 写字 母 开 头 。 这 是 从 面向 对 象 编程 语言 那里 借鉴 的 ， 有 助 于 在 ECMAScript 中 区 分 构 
造 函数 和 普通 函数 。 毕 竟 ECMAScript 的 构造 函数 就 是 能 创建 对 象 的 函数 。 
要 创建 Person 的 实例 ， 应 使 用 new 操作 符 。 以 这 种 方式 调用 构造 函数 会 执行 如 下 操作 。 
(1) 在 内 存 中 创建 一 个 新 对 象 。 
(2) 这 个 新 对 象 内 部 的 [ [Prototype] ] 特性 被 赋值 为 构造 函数 的 prototype 属性 。 
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(3) 构造 咀 数 内 部 的 this 被 赋值 为 这 个 新 对 象 ( 即 this 指向 新 对 象 )。 

(4) 执行 构造 函数 内 部 的 代码 ( 给 新 对 象 添加 属性 )。 

(5) 如 果 构 造 函 数 返 回 非 空 对 象 ， 则 返回 该 对 象 ， 否则 ， 返 回 刚 创建 的 新 对 象 。 

上 一 个 例子 的 最 后 ，person1l 和 person2 分 别 保存 着 Person 的 不 同 实例 。 这 两 个 对 象 都 有 一 个 
constructor 属性 指 问 Person， 如 下 所 示 : 


console.log(personl.constructor == Person); // true 
console.log(person2.constructor == Person); // true 


constructor 本 来 是 用 于 标识 对 象 类 型 的 。 不 过 ， 一般 认 为 instanceof 操作 符 是 确定 对 象 类 型 
更 可 靠 的 方式 。 前 面 例子 中 的 每 个 对 象 都 是 object 的 实例 ， 同 时 也 是 Person 的 实例 ， 如 下 面 调用 
instanceof 操作 符 的 结果 所 示 





A 

































































console.log(personl instanceof Object); // true 
console.log(personl instanceof Person); // true 
console.log(person2 instanceof Object); // true 
console.log(person2 instanceof Person); // true 
定义 自 定义 构造 函数 可 以 确保 实例 被 标识 为 特定 类 型 相 比 于 工厂 模式 ,这 是 一 个 很 大 的 好 处 。 在 














这 个 例子 中 ，person1 和 person2 之 所 以 也 被 认为 是 object 的 实例 ， 是 因为 所 有 自 定义 对 象 都 继承 
自 object (后 面 再 详细 讨论 这 一 点 )。 
构造 函数 不 一 定 要 写成 函数 声明 的 形式 。 冉 值 给 变量 的 函数 表达 式 也 可 以 表示 构造 也 数 : 


let Person = function(name, age, job) { 
this.name = name; 
this.age = age; 
th OD. JObD: 
this.sayName = function() { 
console.log(this.name); 
> 
} 

















new Person("Nicholas", 29, "Software Engineer"); 
new Person("Greg", 27, "Doctor"); 


let personl 
let person2 


personl.sayName(); // Nicholas 
person2.sayName(); // Greg 

console.log(personl instanceof Object); // true 
console.log(personl instanceof Person); // true 
console.log(person2 instanceof Object); // true 
console.log(person2 instanceof Person); // true 




















在 实例 化 时 ,如 果 不 想 传 参数 ,那么 构造 函数 后 面 的 括号 可 加 可 不 加 。 只 要 有 new 操作 符 , 就 可 以 
调用 相应 的 构造 函数 : 


function Person() { 
this.name = "Jake"; 
this.sayName = function() { 
console.log(this.name); 
} 
} 

















new Person(); 
new Person; 


let personl 
let person2 
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personl.sayName(); // Jake 
person2.sayName(); // Jake 
console.log(personl instanceof Object); // true 
console.log(personl instanceof Person); // true 
console.log(person2 instanceof Object); // true 
console.log(person2 instanceof Person); // true 


1. 构造 函数 也 是 函数 

构造 函数 与 普通 函数 唯一 的 区 别 就 是 调用 方式 不 同 。 除 此 之 外 , 构造 函数 也 是 函数 。 并 没有 把 某 个 
函数 定义 为 构造 函数 的 特殊 语法 。 任 何 函数 只 要 使 用 new 操作 符 调用 就 是 构造 函数 ， 而 不 使 用 new 操 
作 符 调用 的 函数 就 是 普通 函数 。 比 如 ， 前 面 的 例子 中 定义 的 Person () 可 以 像 下 面 这 样 调用 : 

// 作为 构造 函数 


let person = new Person("Nicholas", 29, "Software Engineer"); 




























































































person.sayName (); // "Nicholas" 
// 作为 函数 调用 
Person("Greg 27 DBGEGE 9 // 添加 到 window 对 象 


window.sayName () ; // "Greg" 


// 在 另 一 个 对 象 的 作用 域 中 调用 

let o = new Object (); 

Person.call(o, "Kristen", 25, "Nurse"); 
o.SayName (); // Rristenm" 


这 个 例子 一 开始 展示 了 典型 的 构造 函数 调用 方式 , 即使 用 new 操作 符 创建 一 个 新 对 象 。 然后 是 普 i 
函数 的 调用 方式 ， 这 时 候 没 有 使 用 new 操作 符 调 用 Person (), 结果 会 将 属性 和 方法 添加 到 wingdow 对 
象 。 这 里 要 记 住 ， 在 调用 一 个 函数 而 没有 明确 设置 this 值 的 情况 下 ( 即 没 有 作为 对 象 的 方法 调用 ,或 
者 没有 使 用 cal1 (apply 0) 调用 )，chis 始终 指向 clopal 对 旬 (在 浏览 只 中 就 是 wincow 对 条 ) 
因此 在 上 面 的 调用 之 后 ，wingdow 对 象 上 就 有 了 一 个 sayName () 方 法 ， 调 用 它 会 返回 "Greg"。 最 后 展 
示 的 调用 方式 是 通过 call () (或 apply () ) 调用 函数 ,同时 将 特定 对 象 指定 为 作用 域 。 这 里 的 调用 将 
对 象 o 指定 为 Person() 内 部 的 this 值 , 因此 执行 完 函 数 代码 后 , 所 有 属性 和 sayName () 方 法 都 会 添 
加 到 对 象 。 上 面 。 

2. 构造 函数 的 问题 

构造 函数 虽然 有 用 , 但 也 不 是 没有 问题 。 构 造 函 数 的 主要 问题 在 于 ， 其 定义 的 方法 会 在 每 个 实例 上 
都 创建 一 遍 。 因 此 对 前 面 的 例子 而 言 ，personl 和 person2 都 有 名 为 sayName () 的 方法 , 但 这 两 个 方 
法 不 是 同一 个 Function 实例 。 我 们 知道 ， ECMAScript 中 的 函数 是 对 象 ， 因 此 每 次 定义 函数 时 ， 都 会 
初始 化 一 个 对 象 。 逮 辑 上 讲 ， 这 个 构造 函数 实际 上 是 这 样 的 : 


function Person(name, age, job){ 

this.name = name; 

this.age = age; 

thls joOD’ Ee: TON 

this.sayName = new Function("console.log(this.name)"); // 逻辑 等 价 
} 


这 样 理解 这 个 构造 函数 可 以 更 清楚 地 知道 , 每 个 Person 实例 都 会 有 自己 的 Function 实例 用 于 显 
示 name 属性 。 当然 了 , 以 这 种 方式 创建 函数 会 带 来 不 同 的 作用 域 链 和 标识 符 解 析 。 但 创建 新 Function 
实例 的 机 制 是 一 样 的 。 因 此 不 同 实例 上 的 函数 虽然 同名 却 不 相等 ， 如 下 所 示 : 


console.log(personl.sayName == person2 .SayName); // false 





























































































































224 第 8 章 对 象 、 类 与 面向 对 象 编程 








因为 都 是 做 一 样 的 事 ， 所 以 没 必要 定义 两 个 不 同 的 Function 实例 。 况 且 ，this 对 象 可 以 把 函数 
与 对 象 的 绑 定 推迟 到 运行 时 。 
要 解决 这 个 问题 ， 可 以 把 函数 定义 转移 到 构造 函数 外 部 : 


function Person(name, age, job)t 
this.name = name; 
this.age = age; 
this.job ‘= job; 
this.sayName = sayName; 


} 





function sayName() { 
console.log(this.name); 
} 


new Person("Nicholas", 29, "Software Engineer"); 
new Person("Greg", 27, "Doctor"); 


let personl 
let person2 


personl.sayName(); // Nicholas 
person2.sayName(); // Greg 


在 这 里 , sayName () 被 定义 在 了 构造 函数 外 部 。 在 构造 函数 内 部 ,sayName 属性 等 于 全 局 sayName () 
数 。 因 为 这 一 次 sayName 属性 Re 4 是 一 个 指向 外 部 函数 的 指针 ， 所 以 person1 和 person2 
享 了 定义 在 全 局 作用 域 上 的 sayName () 函数 。 这 样 虽 然 解决 了 相同 逻辑 的 函数 重复 定义 的 问题 ， 但 
局 作用 域 也 因此 被 搞 乱 了 ， 为 于 个 和 实际 上 内 能 在 一 个 对 象 上 油 用 .如果 这 个 对 估 震 要 多 个 方法， 
了 么 就 要 在 全 局 作用 域 中 定义 多 个 函数 。 这 会 导致 自 定义 类 型 引用 的 代码 不 能 很 好 地 聚集 一 起 。 这 个 新 
问题 可 以 通过 原型 模式 来 解决 。 


8.2.4 原型 模式 


每 个 函数 都 会 创建 一 个 prototype 属性 ， 这 个 属性 是 一 个 对 象 ， 包 含 应 该 由 特定 引用 类 型 的 实例 
共享 的 属性 和 方法 。 实 际 上 ， 这 个 对 象 就 是 通过 调用 构造 函数 创建 的 对 象 的 原型 。 使 用 原型 对 象 的 好 处 
是 , 在 它 上 面 定义 的 属性 和 方法 可 以 被 对 象 实例 共享 。 原 来 在 构造 函数 中 直接 赋 给 对 象 实例 的 值 ， 可 以 
直接 赋值 给 它们 的 原型 ， 如 下 所 示 : 


function Person() {} 
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Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 


Person.prototype.sayName = function() { 
console.log(this.name); 


学 


let personl = new Person(); 
personl.sayName(); // "Nicholas" 


let person2 = new Person(); 
person2.sayName(); // "Nicholas" 


console.log(personl.sayName == person2.sayName); // true 


使 用 函数 表达 式 也 可 以 : 
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let Person = function() {}; 


Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 


Person.prototype.sayName = function() { 
console.log(this.name); 


js 


let personl = new Person(); 
personl .sayName (); // "Nicholas" 


let person2 = new Person(); 
person2.sayName (); // "Nicholas" 


console.log(personl.sayName == person2.sayName); // true 


这 里 ， 所 有 属性 和 sayName () 方 法 都 直接 添加 到 了 Person 的 prototype 属性 上 , 构造 函数 体 中 
什么 也 没有 。 但 这 样 定义 之 后 ,调用 构造 函数 创建 的 新 对 象 仍 然 拥 有 相应 的 属性 和 方法 。 与 构造 函数 模 
式 不 同 , 使 用 这 种 原型 模式 定义 的 属性 和 方法 是 由 所 有 实例 共享 的 。 因 此 person1l 和 person2 访问 的 
都 是 相同 的 属性 和 相同 的 sayName ( ) 函数 。 要 理解 这 个 过 程 ， 就 必须 理解 ECMAScript 中 原型 的 本 质 。 


1. 理解 原型 

无 论 何 时 ， 只 要 创建 一 个 函数 ， 就 会 按照 特定 的 规则 为 这 个 函数 创建 一 个 prototype 属性 (指向 
原型 对 象 )。 默 认 情 况 下 ， 所 有 原型 对 象 自 动 获得 一 个 名 为 constructor 的 属性 ， 指 回 与 之 关联 的 构 
造 函 数 。 对 前 面 的 例子 而 言 ，Person .prototype.constructor 指向 Pearson。 然 后 ， 因 构造 函数 而 
异 ， 可 能 会 给 原型 对 象 添 加 其 他 属性 和 方法 。 

在 自 定义 构造 函数 时 ， 原 型 对 象 默 认 只 会 获得 constructor 属性 ， 其 他 的 所 有 方法 都 继承 自 
Object。 每 次 调用 构造 函数 创建 一 个 新 实例 ， 这 个 实例 的 内 部 [ [Prototypel1 指 针 就 会 被 赋值 为 构 
造 函 数 的 原型 对 象 , 脚 本 中 没有 访问 这 个 [ [Prototype]] 特 性 的 标准 方式 ,但 Firefox、Safari 和 Chrome 
会 在 每 个 对 象 上 暴露 proto_ “属性 ， 通 过 这 个 属性 可 以 访问 对 象 的 原型 。 在 其 他 实现 中 ， 这 个 特性 
完全 被 隐藏 了 。 关 键 在 于 理解 这 一 点 : 实例 与 构造 函数 原型 之 间 有 直接 的 联系 ， 但 实例 与 构造 函数 之 
间 没 有 。 

这 种 关系 不 好 可 视 化 ， 但 可 以 通过 下 面 的 代码 来 理解 原型 的 行为 : 


/** 
* 构造 函数 可 以 是 函数 表达 式 
* 也 可 以 是 函数 声明 ， 因 此 以 下 两 种 形式 都 可 以 ; 



























































































































































类 function Person() {} 

let Person = function() {} 
Wa 

function Person() {} 

/** 


* 声明 之 后 ,构造 函数 就 有 了 一 个 
* 与 之 关联 的 原型 对 象 : 
水 兴 
console.log(typeof Person.prototype); 
console.log(Person.prototype); 
ZA 
// constructor: f Person(), 
// Proto :Objeck 
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/** 

* 如 前 所 述 ， 构 造 溃 数 有 一 个 Drototype 属性 

* 引用 其 原型 对 象 ， 而 这 个 原型 对 象 也 有 一 个 

* constructor 属性 ， 引 用 这 个 构造 函数 

* 换 身 话说 ， 两 者 循环 引用 : 

A 

console.log(Person.prototype.constructor === Person); // true 


/** 


* 正常 的 原型 链 都 会 终止 于 Object 的 原型 对 象 
* Object 原型 的 原型 是 null 


yA 
console.log(Person.prototype._ proto === Object.prototype); // true 
console.log(Person.prototype.__proto_ .constructor === Object); // true 
console.log(Person.prototype.__ proto_ .proto Se // true 











console.log(Person.prototype.. proto_  ); 


// constructor: f Object(), 
44 toString: 

// hasOwnProperty: 

// isPrototypeof: 


let personl = new Person(), 
person2 = new Person();} 


关 灶 类 

* 构造 函数 、 原 型 对 象 和 实例 
* 是 3 个 完全 不 同 的 对 象 ; 
Ah 


console.log(personl !== Person); // true 
console.log(personl !== Person.prototype); // true 
console.log(Person.prototype !== Person); // true 


* 实例 通过 __proto_ 链接 到 原型 对 象 ， 
* 它 实际 上 指向 隐藏 特性 [ [Prototype]] 


* 构造 函数 通过 Prototype 属性 链接 到 原型 对 象 
* 实例 与 构造 函数 没有 直接 联系 ， 与 原型 对 象 有 直接 联系 


t 
console.log(personl. proto_ === Person.prototype); // true 
conosle.log(personl._ proto_ .constructor === Person); // true 
/** 


* 同一 个 构造 函数 创建 的 两 个 实例 
* 共享 同一 个 原型 对 象 : 
8h 


console.log(personl._ proto_ === person2.__proto_  ); // true 





/** 


* ijnstanceof 检查 实例 的 原型 链 中 
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* 是 否 包含 指定 构造 函数 的 原型 : 


本 人 
console.log(personl instanceof Person); // true 
console.log(personl instanceof Object); // true 
console.log(Person.prototype instanceof Object); // true 


对 于 前 面 例子 中 的 Person 构造 函数 和 Person.prototype, 可 以 通过 图 8-1 看 出 各 个 对 象 之 间 的 
关系 。 


















Person Person Prototype 








prototype Constructor 








name "Nicholas" 





2 


age 
"Software Engineer" 









图 8-1 


8-1 展示 了 Person 构造 子 数 、Person 的 原型 对 象 和 Person 现 有 两 个 实例 之 间 的 关系 。 注 意 ， 
Person.prototype 指向 原型 对 象 , 而 Person.prototype.contructor 指 回 Person 构造 函数 。 原 
型 对 象 包 含 constructor 属性 和 其 他 后 来 添加 的 属性 。Person 的 两 个 实例 person1 和 person2 都 只 
有 一 个 内 部 属性 指 回 Person.prototype, 而 且 两 者 都 与 构造 函数 没有 直接 联系 。 男 外 要 注意 , 虽然 这 两 
个 实例 都 没有 属性 和 方法 , 但 person1 .sayName () 可 以 正常 调用 。 这 是 由 于 对 象 属性 查找 机 制 的 原因 。 
虽然 不 是 所 有 实现 都 对 外 暴露 了 [[Prototypel] ,但 可 以 使 用 isPrototypeof () 方 法 确定 两 个 对 
象 之 间 的 这 种 关系 。 本 质 上 ，isPrototypeof () 会 在 传人 参数 的 [[Prototype]] 指 向 调用 它 的 对 象 时 
返回 true， 如 下 所 示 : 


console.log(Person.prototype.isPrototypeOf (Person1)); // true 
console.log(Person.prototype.isPrototypeOf (person2)); // true 


这 里 通过 原型 对 象 调用 isPrototypeof () 方 法 检查 了 personl 和 person2。 因 为 这 两 个 例子 内 
部 都 有 链接 指向 Person .prototype， 所 以 结果 都 返回 true。 











| 





































































































ECMAScript 的 object 类 型 有 一 个 方法 叫 object .getPrototypeof () ， 返 回 参数 的 内 部 特性 
[ [Prototype] ] 的 值 。 例 如 ; 

console.log (Object.getPrototypeOf (person1) == Person.prototype); // true 

console.log (Object .getPrototypeOf (personl1) .name); // "Nicholas" 














第 一 行 代码 简单 确认 了 object .getPrototypeof () 返 回 的 对 象 就 是 传人 对 象 的 原型 对 象 。 第 二 
行 代码 则 取得 了 原型 对 象 上 name 属性 的 值 ， 即 "Nicholas'"。 使 用 object .getPrototypeof () 可 以 
a 得 一 个 对 象 的 原型 这 在 通过 原型 实现 继承 时 显得 尤为 重要 ( 本 章 后 面 会 介绍 )。 
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Object 类 型 还 有 一 个 setPrototypeof () 方 法 ， 可 以 向 实例 的 私有 特性 [[Prototype]l] 写 人 一 


个 新 值 。 这 样 就 可 以 重 写 一 个 对 象 的 原型 继承 关系 : 


let biped = { 
numLegs: 2 

上 

let person = { 
name: 'Matt' 


} 


Object .setPrototypeof (person, 


console.1log(Pperson.name) : 


console.log(person.numLegs); 
console.log (Object .getPrototypeOf (person) 


警告 Object .setPrototypeof () 


严重 影响 代码 性 能 。Mozilla 文档 说 得 很 清楚 : 


“在 所 有 浏览 器 和 JavaScript 引擎 中 , 修改 继承 关系 的 影响 都 是 微妙 且 深 远 的 。 这 种 影响 并 


不 仅 是 执行 Object .setPrototype0Of () 语 名 那么 简单 ， 而 是 会 涉及 所 有 访问 了 那些 修 


改过 [[Prototype]] 的 对 象 的 代码 。 





为 避免 使 用 object .setPrototypeof () 可 能 造成 的 改 











建 一 个 新 对 象 ， 同 时 为 其 指定 原型 : 


let biped = { 
numLegs: 2 


2 





let person = Object.create (biped); 


person.name = 'Matt'; 


console.log(person.name);} 


console.log(person.numLegs); 
console.log (Object .getPrototypeOf (person) 


2. 原型 层级 





在 通过 对 象 访问 属性 时 ,会 按照 这 个 属性 的 名 称 开始 搜索 。 搜 索 开始 于 对 象 实例 本 身 。 如 曙 
实例 上 发 现 了 给 定 的 名 称 ,， 则 返回 该 名 称 对 应 的 值 。 如 明 











, 可 以 通过 object .create() 来 创 






































型 对 象 ， 然 后 在 原型 对 象 上 找到 属 怕 


FE 后， 再 返回 对 应 的 值 。 因 此 ， 在 调用 person1 .sayName 








发 生 两 步 搜索 。 首 先 ，JavaScript 引擎 会 问 : 
继续 搜索 并 问 :“personl 的 原型 有 sayName 
个 函数 。 在 调用 person2 .sayName () 时 ,会 发 生 同 样 的 搜索 过 程 ， 而 且 也 会 返回 相同 的 结 曙 
原型 用 于 在 多 个 对 象 实例 间 共 享 属性 和 方法 的 原理 。 


























在 这 个 


没有 找到 这 个 属性 ， 则 搜索 会 沿 着 指针 进入 原 





) 时 , 会 


“person1 实例 有 sayName 属性 吗 ? ”答案 是 没有 。 然 后 ， 


属性 吗 ? ”答案 是 有 。 于 是 就 返回 了 保存 在 原型 上 的 这 











R。 这 就 是 


注意 ”前面 提 到 的 constructor 属性 只 存在 于 原型 对 象 ， 因 此 通过 实例 对 象 也 是 可 以 访 


问 到 的 。 














虽然 可 以 通过 实例 读 取 原 型 对 象 上 的 值 , 但 不 可 能 通过 实例 重 写 这 些 值 。 如 果 在 实例 上 添加 了 一 个 




















与 原型 对 象 中 同名 的 属性 ， 那 就 会 在 实例 上 创建 这 个 属 1 


三 修 例 于 























主 原型 对 象 上 的 





性 。 下 面 看 
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function Person() {} 

Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 


Person.prototype.sayName = function() { 
console.log(this.name); 
上 


new Person(); 
new Person(); 


let personl 
let person2 


personl.name = "Greg"; 
console.log(personl.name); // "Greg", 来 自 实例 
console.log(person2.name); // "Nicholas", 来 自 原型 


在 这 个 例子 中 ，personl 的 name 属性 遮蔽 了 原型 对 象 上 的 同名 属性 。 虽 然 person1.name 和 
person2 .name 都 返回 了 值 ， 但 前 者 返回 的 是 "Greg" (来 自 实例 )， 后 者 返回 的 是 "Nicholas" (来 自 
原型 )。 当 console.1og() 访 问 person1 .name 时 ， 会 先 在 实例 上 搜索 个 属性 。 因 为 这 个 属性 在 实例 
上 存在 ， 所 以 就 不 会 再 搜索 原型 对 象 了 。 而 在 访问 person2 .name 时 ， 并 没有 在 实例 上 找到 这 个 属性 ， 
所 以 会 继续 搜索 原型 对 象 并 使 用 定义 在 原型 上 的 属性 。 

只 要 给 对 象 实例 添加 一 个 属性 ， 这 个 属性 就 会 遮蔽 (shadow ) 原型 对 象 上 的 同名 属性 ， 也 就 是 虽然 
不 会 修改 它 ， 但 会 屏蔽 对 它 的 访问 。 即 使 在 实例 上 把 这 个 属性 设置 为 nul1I， 也 不 会 恢复 它 和 原型 的 联 
系 。 不 过 , 使 用 aelete 操作 符 可 以 完全 删除 实例 上 的 这 个 属性 ， 从 而 让 标识 符 解析 过 程 能 够 继续 搜索 
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原型 对 象 。 
function Person() {} 
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 


Person.prototype.sayName = function() { 
console.log(this.name); 
过 


new Person(); 
new Person(); 


let personl 
let person2 


personl.name = "Greg"; 
console.log(personl.name); // "Greg"， 来 自 实 侦 
console.log(person2.name); // "Nicholas"， 来 自 原型 


delete personl .name; 
console.log(personl.name); // "Nicholas"，,， 来 自 原型 


这 个 修改 后 的 例子 中 使 用 aelete 删除 了 person1 .name， 这 个 属性 之 前 以 "Greg "遮蔽 了 原型 上 
的 同名 属性 。 然 后 原型 上 name 属性 的 联系 就 恢复 了 , 因此 再 访问 person1 .name 时 , 就 会 返回 原型 对 
象 上 这 个 属性 的 值 。 

hasownProperty () 方 法 用 于 确定 某 个 属性 是 在 实例 上 还 是 在 原型 对 象 上 。 这 个 方法 是 继承 自 object 
的 ， 会 在 属性 存在 于 调用 它 的 对 象 实例 上 时 返回 true， 如 下 面 的 例子 所 示 : 


function Person() {} 






























































Weal 





Person.prototype.name = "Nicholas"; 
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调用 person1.hasownProperty("name" ) 只 在 村 
明 此 时 name 是 一 个 实例 属性 , 不 是 原型 属 牧 


音 


Person.prototype.age 29; 
Person.prototype.job 
Person.prototype.sayName 

console.log(this.name); 


于 


{ 


function() 


let personl 
let person2 


new Person(); 
new Person(); 


console.log(personl.hasOwnProperty ("name")); 


personl.name = "Greg"; 


console.log(personl.name); // 


console.log(person2.name); // "Nicholas", 


console.log(person2.hasOwnProperty ("name")); 


delete personl .name; 


console.log(personl.name); // "Nicholas", 


console.log(personl.hasOwnProperty ("name")); 











在 这 个 例子 中 ， 通 过 调 上 





j hasOwnProperty () 

















E。 图 8-2 
































"Software Engineer"; 


会 


能 够 清楚 地 看 到 访 


ES person1 上 nam 


] 
7 


// false 


"Greg"， 来 自 实例 
console.log(personl.hasOwnProperty ("name")); 


// true 
来 自 原型 
// false 


来 自 原型 
// false 











问 的 是 实例 属性 还 是 原型 属性 。 
e 属性 的 情况 下 才 返 回 true, 表 
形象 地 展示 了 上 面 例子 中 各 个 步 又 的 状态 。( 为 简 






































/以 \ 汪 <- 洲 
起 见 ， 图 中 省 略 了 Person 构造 函数 。) 
一 开始 
Personl Person Prototype 
LPrototypel | constructor ® 
name "Nicholas" 
person2 2 2 
LPrototypel | job Software Engineer 
sayName (function) 


personl .name 


"Greg" 








personl 





[[Prototypell 













name "Greg" 





person2 


delete personl .name 













person2 

















Person Prototype 











constructor [J 

name "Nicholas" 

age 

job "Software Engineer" 
sayName (function)} 













Person Prototype 
constructor 


"Nicholas" 





29 





"Software Engineer" 





(function) 





sayName 


8-2 
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注意 ECMAScript 的 Object .getownPropertyDescriptor() 方 法 只 对 实例 属性 有 
效 。 要 取得 原型 属性 的 描述 符 , 就 必须 直接 在 原型 对 象 上 调用 Object .getOwnProperty- 


Desermneor ee 





3. 原型 和 in 操作 符 
有 两 种 方式 使 用 in 操作 符 : 单独 使 用 和 在 for-in 循环 中 使 用 。 在 单独 使 用 时 ，in 操作 符 会 在 可 
以 通过 对 象 访问 指定 属性 时 返回 true， 无 论 该 属性 是 在 实例 上 还 是 在 原型 上 。 来 看 下 面 的 例子 : 





























三 


function Person() {} 

Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 


Person.prototype.sayName = function() { 
console.log(this.name); 
于 


let personl = new Person(); 
let person2 = new Person(); 


console.log(personl.hasOwnProperty ("name")); // false 
console.log("name" in personl1l); // true 


personl.name = "Greg"; 
console.log(personl.name); // "Greg"， 来 自 实 侦 
console.log(personl.hasOwnProperty ("name")); // true 


console.log("name" in personl1l); // true 


console.log(person2.name); // "Nicholas"，, 来 自 原型 
console.log(person2.hasOwnProperty ("name")); // false 
console.log("name" in person2); // true 





delete personl .name; 

console.log(personl.name); // "Nicholas", 来 自 原型 
console.log(personl.hasOwnProperty ("name")); // false 
console.log("name" in personl1l); // true 


在 上 面 整个 例子 中 , name 随时 可 以 通过 实例 或 通过 原型 访问 到 。 因 此 , 调用 "name" in persoon1 
时 始终 返回 true， 无 论 这 个 属性 是 否 在 实例 上 。 如 果 要 确定 某 个 属性 是 否 存 在 于 原型 上 ， 则 可 以 像 下 
面 这 样 同时 使 用 hasownProperty () 和 in 操作 符 : 


function hasPrototypeProperty (object, name)t{ 
return !object.hasOwnProperty (name) && (name in object); 


} 

只 要 通过 对 象 可 以 访问 ，in 操作 符 就 返回 true, 而 hasOownProperty () 只 有 属性 存在 于 实例 上 
时 才 返 回 true。 因 此 ， 只 要 in 操作 符 返 回 true 日 nasOownProperty () 返 回 false， 就 说 明 该 属性 
是 一 个 原型 属性 。 来 看 下 面 的 例子 : 


function Person() {} 




























































































Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29; 
Person.prototype.job = "Software Engineer"; 
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Person .prototype.sayName = 
console.log(this.name); 


2 


function() { 


let person new Person(); 
console.log(hasPrototypeProperty (person, 


person.name = "Greg"; 
console.log(hasPrototypeProperty (person, 


在 这 里 ，name 属性 首先 只 存在 于 原型 
上 重 写 这 个 属性 后 ， 
原型 对 象 还 有 name 














实例 上 也 有 了 这 个 属性 


尚 





， 因 出 





ll 

































































I 上， 所 以 nasPrototypeProperty () 
LC hasPrototypePropertyl( 


性 ,但 因为 实例 上 的 属性 谈 荐 了 它 ， 所 以 不 会 用 到 。 


"name")); // true 


"name")); // false 


() 返 回 true。 而 在 实例 
() 返 回 false。 即 便 此 时 







































































在 for-in 循环 中 使 用 in 操作 符 时 ， 可 以 通过 对 象 访问 且 可 以 被 枚 举 的 属性 都 会 返回 ， 包 括 实例 
属性 和 原型 属性 。 遗 蔽 原型 中 不 可 枚 举 ( [ [Enumerable] ] 特性 被 设置 为 false ) 属性 的 实例 属性 也 会 
在 for-in 循环 中 返回 ， 因 为 默认 情况 下 开发 者 定义 的 属性 都 是 可 枚 举 的 。 

要 获得 对 象 上 所 有 可 枚 举 的 实例 属性 ， 可 以 使 用 object .keys () 方 法 。 这 个 方法 接收 一 个 对 象 作 
为 参数 ， 返 回 包含 该 对 象 所 有 可 枚 举 属性 名 称 的 字符 串 数组 。 比 如 : 

function Person() {} 

Person.prototype.name = "Nicholas"; 

Person.prototype.age = 29; 


Person.prototype.job = 
Person.prototype.sayName 

console.log(this.name); 
地 


function() { 


"Software Engineer"; 


let keys = Object.keys (Person.prototype); 
console.log(keys); // "name,age,job,sayName" 
let pl = new Person(); 

pl.name = "Rob"; 

pl.age = 31; 

let plkeys = Object.keys (pl1); 


console.log(plkeys); // "[name,age]" 
这 里 ，keys 变量 保存 的 数组 
回 的 顺序 。 
"age" 两 个 属性 。 
如 果 想 列 出 所 有 实例 


let keys Object 
console.log (keys); 














1 包含 "name" 、 





for-in 返 








属性 ， 无 论 是 否 可 以 枚 举 ， 




















getOwnPropertyNames () 在 适当 的 时 候 都 可 用 








"agen" 


而 在 Person 的 实例 上 调用 时 ，object .keys () 











"job" 和 "sayName"。 这 是 正常 情况 下 通过 


返回 的 数组 中 只 包含 "name" 和 

















都 可 以 使 











有 obj ect . getOwnPropertyNames (): 


.getOwnPropertyNames (Person.prototype); 
// "[constructor,name,age,job,sayName]" 


注意 ,返回 的 结果 中 包含 了 一 个 不 可 枚 举 的 属 1 


性 constructor。Object.keys() 和 Object. 


来 代替 for-in 循环 。 











在 ECMAScript 6 新 增 符号 类 型 之 后 ， 相 应 ] 
的 兄弟 方法 的 需求 ， 因 为 以 符号 为 键 的 


屋 


[ES 





| 








Symbols () 方 法 就 出 现 了 ， 这 个 方法 与 obj 
let kl = Symbol('k1'), 
k2 = SymbolL( kK2"}s 


ject.getOwnPropertyNames ( 


弛 出 现 了 增加 一 个 Object .getOwnPropertyNames () 


性 没有 名 称 的 概念 。 因 此 ，object .ge 


tOwnProperty- 


) 类似 ， 只 是 针对 符号 而 已 : 
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let Oo = { 
[KL] "kL 
[KR212, “kK27 


console.log (Object .getOwnPropertySymbols (o) ) ; 
// [Symbol (k1), Symbol (k2)] 


4. 属性 枚 举 顺 序 


for-in 循环 、object .keys() 、oObject .getownPropertyNames () 、Object.getOwnProperty- 
Symbols () 以 及 object.assign() 在 属性 枚 举 顺序 方面 有 很 大 区 别 .for-in 循环 和 Object .keys () 
的 枚 举 顺 序 是 不 确定 的 ， 取 决 于 JavaScript 引擎 ， 可 能 因 浏 览 器 而 异 。 

Object .getOwnPropertyNames () 、Object.getOownPropertySymbols () 和 Object.assign() 
的 枚 举 顺 序 是 确定 性 的 。 先 以 升序 枚 举 数值 键 ， 然 后 以 插 人 顺序 枚 举 字符 串 和 符号 键 。 在 对 象 字 面 量 中 
定义 的 键 以 它们 逗号 分 隔 的 顺序 插入 。 
































let Kk1 = Symbol('k1'), 
k2 = Symbol('k2') 
let o = { 
Lvl 
En Et 
[kl1]: 'sym2', 
second: 'second', 
gs 从 
) 
OK2] (3 SY 
[号 站 区 这 
Os ChiFd. ss "third 
国人 一天 


console.log (Object .getOwnPropertyNames (Oo) ) ; 
£7 ms Wh 0 3 EE "second", "third"] 


console.log (Object .getOwnPropertySymbols (o) ) ; 
// [Symbol (k1), Symbol (k2)] 





8.2.5 ”对 象 迭 代 


在 JavaScript 有 史 以 来 的 大 部 分 时 间 内 ， 和 迭代 对 象 属性 都 是 一 个 难题 。ECMAScript 2017 新 增 了 两 
个 静态 方法 ， 用 于 将 对 象 内 容 转 换 为 序列 化 的 一 一 更 重要 的 是 可 迭代 的 一 一 格式 。 这 两 个 静态 方法 
Object.values () 和 Object.entries() 接 收 一 个 对 象 ， 返 回 它 们 内 容 的 数组 。object .values () 
返回 对 象 值 的 数组 ，object .entries() 返 回 键 / 值 对 的 数组 。 
下 面 的 示例 展示 了 这 两 个 方法 : 
让 GE 过 
too "hbar. 
bazs 13 
qux: {} 
上 





























console.log (Object .values(o) ) ; 
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yA | 


console.log (Object .entries((o))); 
ti oo Ba [Ba da [GD l 光 永 ] 


注意 ， 非 字符 串 属性 会 被 转换 为 字符 串 输 出 。 男 外 ， 这 两 个 方法 执行 对 象 的 浅 复制 : 


CoNst, Ge 











qux: {} 
于 
console.log(Object.values(o) [0] === oOo.gqux); 
// true 
console.log(Object.entries(o) [0] [1] === oOo.qux); 
// true 
符号 属性 会 被 忽略 : 
const sym = Symbol(); 
const o = { 
[syml: fob’ 


上 


console.log(Object.values (0o));} 
0 用 


console.log(Object.entries((o0o))); 
(BN 


1. 其 他 原型 语法 

有 读者 可 能 注意 到 了 ， 在 前 面 的 例子 中 ， 每 次 定义 一 个 属性 或 方法 都 会 把 Person.prototype 重 
写 一 遍 。 为 了 减少 代码 元 余 ， 也 为 了 从 视觉 上 更 好 地 封装 原型 功能 ,直接 通过 一 个 包含 所 有 属性 和 方法 
的 对 象 字 面 量 来 重 写 原 型 成 为 了 一 种 常见 的 做 法 ， 如 下 面 的 例子 所 示 : 


function Person() {} 



































Person.prototype = { 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
sayName() { 
console.log(this.name); 
} 
}; 
在 这 个 例子 中 ，Person.prototype 被 设置 为 等 于 一 个 通过 对 象 字 面 量 创建 的 新 对 象 。 最 终结 果 
是 一 样 的 ， 只 有 一 个 问题 : 这 样 重 写 之 后 ， Person.prototype 的 Gonstructor 属性 就 不 指向 Person 
了 。 在 创建 阴 数 时 ， 也 会 创建 它 的 prototype 对 象 ， 同 时 会 自动 给 这 个 原型 的 constructor 属性 赋 
值 。 而 上 面 的 写法 完全 重 写 了 默认 的 prototype 对 象 ， 因 此 其 constructor 属性 也 指向 了 完全 不 同 
的 新 对 象 (Object 构造 函数 )， 不 再 指向 原来 的 构造 函数 。 虽 然 instanceof 操作 符 还 能 可 靠 地 返回 
值 ， 但 我 们 不 能 再 依靠 constructor 属性 来 识别 类 型 了 ， 如 下 面 的 例子 所 示 : 


let friend = new Person () 



























































console.log(friend instanceof Object) ; // true 
console.log(friend instanceof Person); // true 


8.2 创建 对 象 235 





console.log(friend.constructor == Person); // false 
console.log(friend.constructor == Object); // true 





这 里 ,instanceof 仍然 对 Object 和 Person 都 返回 true。 但 constructotr 属性 现在 等 于 object 
而 不 是 Person 了。 如果 constructor 的 值 很 重要 ， 则 可 以 像 下 面 这 样 在 重 写 原型 对 象 时 专门 设置 一 
下 它 的 值 : 


function Person() { 


} 




















Person.prototype = { 
constructor: Person, 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
sayName() { 

console.log(this.name); 
} 
过 





这 次 的 代码 中 特意 包含 了 constructor 属性 ， 并 将 它 设置 为 person, 保证 了 这 个 属性 仍然 包含 
恰当 的 值 。 

但 要 注意 ， 以 这 种 方式 恢复 constructor 属性 会 创建 一 个 [ [Enumerable] ] 为 true 的 属性 。 而 
原生 constructor 属性 默认 是 不 可 枚 举 的 。 因 此 , 如 果 你 使 用 的 是 兼容 ECMAScript 的 JavaScript 引擎 ， 
那 可 能 会 改 为 使 用 object .defineProperty () 方 法 来 定义 constructor 属性 : 


function Person() {} 





















































Person.prototype = { 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
SayName() { 

console.log(this.name); 

} 

}; 


// 恢复 constructor 属性 

Object .defineProperty (Person.prototype, "constructor", { 
enumerable: false, 
value: Person 

}); 


2. 原型 的 动态 性 
因为 从 原型 上 搜索 值 的 过 程 是 动态 的 , 所 以 即使 实例 在 修改 原型 之 前 已 经 存在 , 任何 时 候 对 原型 对 
象 所 做 的 修改 也 会 在 实例 上 反映 出 来 。 下 面 是 一 个 例子 : 


let friend = new Person(); 














Person.prototype.sayHi = function() { 
console.log("hi"); 
站 
friend.sayHi (); // "hi"， 没 问题 | 
以 上 代码 先 创建 一 个 Person 实例 并 保存 在 friend 中 。 然 后 一 条 语句 在 Person .prototype 上 
添加 了 一 个 名 为 sayHi () 的 方法 。 虽然 frieng 实例 是 在 添加 方法 之 前 创建 的 , 但 它 仍 然 可 以 访问 这 个 
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方法 。 之 所 以 会 这 样 ， 主 要 原因 是 实例 与 原型 之 间 松 散 的 联系 。 在 调用 friend.sayHi () 时 , 首先 会 从 
这 个 实例 中 搜索 名 为 sayHi 的 属性 。 在 没有 找到 的 情况 下 ， 运 行 时 会 继续 搜索 原型 对 象 。 因 为 实例 和 
原型 之 间 的 链接 就 是 简单 的 指针 ， 而 不 是 保存 的 副本 ， 所 以 会 在 原型 上 找到 sayHi 属性 并 返回 这 个 属 
性 保存 的 函数 。 
虽然 随时 能 给 原型 添加 属性 和 方法 ,并 能 够 立即 反映 在 所 有 对 象 实例 上 , 但 这 跟 重 写 整个 原型 是 两 
回 事 。 实 例 的 [[Prototype]] 指 针 是 在 调用 构造 函数 时 自动 赋值 的 ， 这 个 指针 即使 把 原型 修改 为 不 同 
的 对 象 也 不 会 变 。 重 写 整个 原型 会 切断 最 初 原型 与 构造 函数 的 联系 ,但 实例 引用 的 仍然 是 最 初 的 原型 。 
记 住 ,实例 只 有 指向 原型 的 指针 ,没有 指向 构造 函数 的 指针 。 来 看 下 面 的 例子 : 


function Person() {} 






































上 

















由 






























































let friend = new Person () 

Person.prototype = { 
constructor: Person, 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
SayName() { 

console.log(this.name); 

} 

3 


friend.sayName(); // 错误 


在 这 个 例子 中 ，Person 的 新 实例 是 在 重 写 原 型 对 象 之 前 创建 的 。 在 调用 friend.sayName () 的 时 
候 , 会 导致 错误 。 这 是 因为 fireng 指向 的 原型 还 是 最 初 的 原型 ， 而 这 个 原型 上 并 没有 sayName 属性 。 
图 8-3 展示 了 这 里 面 的 原因 。 


重 写 原型 前 


























2 












































Person Ferson Prototype 


Constructor 














friend 


[[Prototypel] 






















































重 写 原型 后 
| Person | New Person Prototype 
| Lprororypel] constructor 
name "Nicholas" 
We 
| friend | SS 2 
| (Prororypel) job "Software Engineer" 
sayName {Elet Lony 








Parsorn Probotype 





constructor 


图 8-3 
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重 写 构造 函数 上 的 原型 之 后 再 创建 的 实例 才 会 引用 新 的 原型 。 而 在 此 之 前 创建 的 实例 仍然 会 引用 最 
初 的 原型 。 

3. 原生 对 象 原型 

原型 模式 之 所 以 重要 , 不仅 体现 在 自 定义 类 型 上 , 而 且 还 因为 它 也 是 实现 所 有 原生 引用 类 型 的 模式 。 
所 有 原生 引用 类 型 的 构造 函数 (包括 object、aArray、String 等 ) 都 在 原型 上 定义 了 实例 方法 。 比 如 ， 
数组 实例 的 sort () 方 法 就 是 Array .prototype 上 定义 的 ,而 字符 串 包装 对 象 的 supstring () 方 法 也 
是 在 String.prototype 上 定义 的 ， 如 下 所 示 : 


console.log(typeof Array.prototype.sort); funet rion 
console.log(typeof String.prototype.substring); // "function" 


通过 原生 对 象 的 原型 可 以 取得 所 有 默认 方法 的 引用 , 也 可 以 给 原生 类 型 的 实例 定义 新 的 方法 。 可 以 
像 修改 自 定义 对 象 原型 一 样 修改 原生 对 象 原型 , 因此 随时 可 以 添加 方法 。 比 如, 下 面 的 代码 就 给 string 
原始 值 包装 类 型 的 实例 添加 了 一 个 startswitn() 方 法 : 


String.prototype.startsWith = function (text) { 
return this.indexOf (text) === 


上 





hdl 


















































let msg = "Hello world!"; 
console.log(msg.startsWith("Hello")); // true 


如 果 给 定 字符 串 的 开头 出 现 了 调用 startswith() 方 法 的 文本 ， 那 么 该 方法 会 返回 true。 因 为 这 
个 方法 是 被 定义 在 string .prototype 上 ， 所 以 当前 环境 下 所 有 的 字符 串 都 可 以 使 用 这 个 方法 。msg 
是 个 字符 串 ,在 读 取 它 的 属性 时 , 后 台 会 自动 创建 string 的 包装 实例 , 从 而 找到 并 调用 startsWith () 
方法 。 

















注意 ”尽管 可 以 这 么 做 , 但 并 不 推荐 在 产品 环境 中 修改 原生 对 象 原型 。 这样 做 很 可 能 造成 
误会 ， 而 且 可 能 引发 命名 冲突 ( 比如 一 个 名 称 在 某 个 浏览 器 实现 中 不 存在 ， 在 另 一 个 实现 


中 却 存在 )。 另 外 还 有 可 能 意外 重 写 原生 的 方法 。 推 荐 的 做 法 是 创建 一 个 自 定义 的 类 ， 继 





4. 原型 的 问题 

原型 模式 也 不 是 没有 问题 。 首 先 , 它 弱 化 了 向 构造 函数 传递 初始 化 参数 的 能 力 , 会 导致 所 有 实例 默 
认 都 取得 相同 的 属性 值 。 虽然 这 会 带 来 不 便 , 但 还 不 是 原型 的 最 大 问题 。 原 型 的 最 主要 问题 源 自 它 的 共 
享 特性 。 

我 们 知道 ,原型 上 的 所 有 属性 是 在 实例 间 共 享 的 ， 这 对 函数 来 说 比较 合适 。 男 外 包含 原始 值 的 属性 
也 还 好 ， 如 前 面 例子 中 所 示 ， 可 以 通过 在 实例 上 添加 同名 属性 来 简单 地 遮蔽 原型 上 的 属性 。 真 正 的 问题 
来 自 包 含 引 用 值 的 属性 。 来 看 下 面 的 例子 : 


function Person() {} 



















































































Person.prototype = { 
constructor: Person, 
name: "Nicholas", 
age: 29, 
job: "Software Engineer", 
friends: ["Shelby", "Court"], 
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sayName() { 
console.log(this.name); 
} 
3 


let personl = new Person(); 
let person2 = new Person(); 


personl.friends.push("Van"); 


console.log(personl.friends); // "Shelby,Court,Van" 
console.log(person2.friends); // "Shelby,Court,Van" 


console.log(personl.friends === person2.friends); // true 


这 里 ，Person.prototype 有 一 个 名 为 friends 的 属性 ， 它 包含 一 个 字符 串 数组 。 然 后 这 里 创建 
了 两 个 Person 的 实例 。person1.friends 通过 push 方法 向 数组 中 添加 了 一 个 字符 串 。 由 于 这 个 





上 


friends 属性 存在 于 Pearson .prototype 而 非 person1 上 ， 新 加 的 
数组 的 ) person2.friends 上 反映 出 来 。 如 果 这 是 有 意 在 多 个 实例 间 























这 个 字符 串 也 会 在 〈 指向 同一 个 
共享 数组 ， 那 没什么 问题 。 但 一 





























般 来 说 ， 不 同 的 实例 应 该 有 属于 自己 的 属性 副本 。 这 就 是 实际 开发 中 通常 不 单独 使 用 原型 模式 的 原因 。 





























8.3 继承 

















继承 是 面向 对 象 编程 中 讨论 最 多 的 话题 。 很 多 面向 对 象 语言 都 支持 两 种 继承 : 接口 继承 和 实现 继承 。 














前 者 只 继承 方法 签名 ， 后 者 继承 实际 的 方法 。 接 口 继承 在 ECMAScript 
名 。 实 现 继承 是 ECMAScript 唯一 支持 的 继承 方式 ， 而 这 主要 是 通过 原 


8.3.1 原型 链 

ECMA-262 把 原型 链 定义 为 ECMAScript 的 主要 继承 方式 。 其 基本 
类 型 的 属性 和 方法 。 重 温 一 下 构造 函数 、 原 型 和 实例 的 关系 : 每 个 构造 
一 个 属性 指 回 构造 函数 ， 而 实例 有 一 个 内 部 指针 指向 原型 。 如 果 原 型 是 




















并 






































! 是 不 可 能 的 ， 因 为 函数 没有 签 
型 链 实现 的 。 























思想 就 是 通过 原型 继承 多 个 引用 
函数 都 有 一 个 原型 对 象 ， 原 型 有 
另 一 个 类 型 的 实例 呢 ? 那 就 意味 











着 这 个 原型 本 身 有 一 个 内 部 指针 指向 另 一 个 原型 ， 相 应 地 另 一 个 原型 也 有 一 个 指针 指向 另 一 个 构造 函 
数 。 这 样 就 在 实例 和 原型 之 间 构 造 了 一 条 原型 链 。 这 就 是 原型 链 的 基本 构想 。 











实现 原型 链 涉及 如 下 代码 模式 : 


function SuperType() { 
this.property = true; 


} 


SuperType.prototype.getSuperValue = function() { 
return this.property; 


he 


function SubType() { 
this.subproperty = false; 


} 


// 继承 SuperType 
SubType .Prototype = new SuperType () 


SubType.prototype.getSubValue = function () { 
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return this.subproperty; 


let instance = new SubType(); 
console.log(instance.getSuperValue()); // true 


以 上 代码 定义 了 两 个 类 型 : superType 和 subType。 这 两 个 类 型 分 别 定义 了 一 个 属性 和 一 个 方法 。 
这 两 个 类 型 的 主要 区 别 是 subType 通过 创建 SuperType 的 实例 并 将 其 赋值 给 自己 的 原型 subTtype. 
prototype 实现 了 对 superType 的 继承 。 这 个 赋值 重 写 了 subType 最 初 的 原型 ， 将 其 替换 为 
SuperType 的 实例 。 这 意味 着 superType 实例 可 以 访问 的 所 有 属性 和 方法 也 会 存在 于 subType. 
prototype。 这 样 实现 继承 之 后 ， 代 码 紧 接着 又 给 SubType .prototype， 也 就 是 这 个 superType 的 
实例 添加 了 一 个 新 方法 。 最 后 又 创建 了 subType 的 实例 并 调用 了 它 继承 的 get supervValue () 方 法 。 
图 8-4 展示 了 子 类 的 实例 与 两 个 构造 函数 及 其 对 应 的 原型 之 间 的 关系 。 
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Constructor 
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(function) 


SubType Prototype 


[[Prototypel]l] 
property 
get SubVvalue 


















{function) 








图 8-4 


这 个 例子 中 实现 继承 的 关键 , 是 supType 没有 使 用 默认 原型 ， 而 是 将 其 蔚 换 成 了 一 个 新 的 对 象 。 这 个 
新 的 对 象 恰 好 是 superType 的 实例 。 这 样 一 来 ，subType 的 实例 不 仅 能 从 superType 的 实例 中 继承 属性 
和 方法 ， 而 且 还 与 SuperType 的 原型 挂 上 了 钧 。 于 是 instance (通过 内 部 的 [[Prototype]] ) 指向 
SubType.prototype， 而 SubType.prototype (作为 SuperType 的 实例 又 通过 内 部 的 [[Prototypel]] ) 
指向 superType.prototype。 注 意 ，get SuperValue() 方 法 还 在 SuperType.prototype 对 象 上 ， 
而 property 属性 则 在 supType.prototype 上 。 这 是 因为 getsuperValue () 是 一 个 原型 方法 ， 而 
property 是 一 个 实例 属性 。subType.prototype 现在 是 SuperType 的 一 个 实例 ， 因 此 property 
才 会 存储 在 它 上 面 。 还 要 注意 ， 由 于 SupbType.prototype 的 constructor 属性 被 重 写 为 指向 
SuperType, 所 以 instance.constructor 也 指向 SuperTypeo 

原型 链 扩 展 了 前 面 描述 的 原型 搜索 机 制 。 我 们 知道 ,在读 取 实例 上 的 属性 时 ， 首 先 会 在 实例 上 搜索 
这 个 属性 。 如 果 没 找到 , 则 会 继承 搜索 实例 的 原型 。 在 通过 原型 链 实现 继承 之 后 , 搜索 就 可 以 继承 向 上 ， 
搜索 原型 的 原型 。 对 前 面 的 例子 而 言 ,调用 instance.getSuperValue () 经 过 了 3 步 搜索 : instance、 
SubType.prototype 和 SuperType.prototype, 最 后 一 步 才 找到 这 个 方法 。 对 属性 和 方法 的 搜索 会 
直 持 续 到 原型 链 的 末端 。 
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1. 默认 原型 

实际 上 ， 原 型 链 中 还 有 一 环 。 默 认 情 况 下 ， 所 有 引用 类 型 都 继承 自 object ， 这 也 是 通过 原型 链 实 
现 的 。 任 何 函 数 的 默认 原型 都 是 一 个 object 的 实例 ， 这 意味 着 这 个 实例 有 一 个 内 部 指针 指向 
Object .prototype。 这 也 是 为 什么 自 定义 类 型 能 够 继承 包括 tostring ()、valueof () 在 内 的 所 有 默 
认 方 法 的 原因 。 因 此 前 面 的 例子 还 有 额外 一 层 继 承 关系 。 图 8-5 展示 了 完整 的 原型 链 。 
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SubType SubType Prototype 
prototype [[Prototypel]] 
property true 
getSubVvalue (function) 
instance 
[[Prototype]] 
subproperty false 
图 8-5 


SubType 继承 SuperType， 而 SuperType 继承 object。 在 调用 instance.toString() 时 , 实 
际 上 调用 的 是 保存 在 object .prototype 上 的 方法 。 

2. 原型 与 继承 关系 

原型 与 实例 的 关系 可 以 通过 两 种 方式 来 确定 。 第 一 种 方式 是 使 用 instanceof 操作 符 , 如 果 一 个 实 
例 的 原型 链 中 出 现 过 相应 的 构造 函数 ， 则 instanceof 返回 true。 如 下 例 所 示 : 















































console.log(instance instanceof Object); // true 
console.log(instance instanceof SuperType); // true 
console.log(instance instanceof SubType); // true 





从 技术 上 讲 ，instance 是 Object、SuperType 和 SubType 的 实例 ， 因 为 instance 的 原型 链 
PP 包含 这 些 构造 函数 的 原型 。 结 果 就 是 instanceof 对 所 有 这 些 构造 孙 数 都 返回 true。 


T+ 
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确定 这 种 关系 的 第 二 种 方式 是 使 用 isPrototypeof () 方 法 。 原 型 链 中 的 每 个 原型 都 可 以 调用 
方法 ， 如 下 例 所 示 ， 只 要 原型 链 中 包含 这 个 原型 ， 这 个 方法 就 返回 true: 











console.log (Object .prototype.isPrototypeOf (instance)); // true 
console.log(SuperType.prototype.isPrototypeOf (instance)); // true 
console.log(SubType.prototype.isPrototypeOof (instance)); // true 
3. 关于 方法 


子 类 有 时 候 需要 履 盖 父 类 的 方法 ,或 者 增加 父 类 没有 的 方法 。 为 此 ,这 些 方法 必须 在 原型 赋值 之 后 
再 添加 到 原型 上 。 来 看 下 面 的 例子 : 


function SuperType() { 
this.property = true; 
} 














SuperType.prototype.getSuperValue = function() { 
return this.property; 
ss 


function SubType() { 
this.subproperty = false; 


} 


// 继承 SuperType 
SubType.prototype = new SuperType(); 


// 新 方法 

SubType .prototype .getSubValue = function () { 
return this.subproperty; 

}; 


SubType .prototype .getSuperValue = function () { 





return false; 
}; 


let instance = new SubType(); 
console.log(instance.getSuperValue()); // false 


在 上 面 的 代码 中 ， 加 粗 的 部 分 涉及 两 个 方法 。 第 一 个 方法 get Subvalue () 是 SubType 的 新 方法 ， 
而 第 二 个 方法 get superValue() 是 原型 链 上 已 经 存在 但 在 这 里 被 遮蔽 的 方法 。 后 面 在 subType 实例 
上 调用 getsuperValue () 时 调用 的 是 这 个 方法 。 而 superType 的 实例 仍然 会 调用 最 初 的 方法 。 重 点 
在 于 上 述 两 个 方法 都 是 在 把 原型 赋值 为 superType 的 实例 之 后 定义 的 。 

另 一 个 要 理解 的 重点 是 ， 以 对 象 字面 量 方式 创建 原型 方法 会 破坏 之 前 的 原型 链 ， 因 为 这 相当 于 重 写 
了 原型 链 。 下 面 是 一 个 例子 : 


function SuperType() { 
this.property = true; 
} 
































i 





SuperType.prototype.getSuperValue = function() { 
return this.property; 
es 


function SubType() { 
this.subproperty = 
} 


false; 
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// 继承 SuperType 
SubType .Prototype = new SuperType () 


// 通过 对 象 字面 量 添加 新 方法 ， 这 会 导致 上 一 行 无 效 
SubType .prototype = { 
getSubValue() { 
return this.subproperty; 
}, 


someOtherMethod() { 
return false; 
} 
}; 


let instance = new SubType(); 
console.log(instance.getSuperValue()); // 出 错 | 


在 这 段 代 码 中 ， 子 类 的 原型 在 被 赋值 为 superType 的 实例 后 ， 叉 被 一 个 对 象 字 面 量 覆 盖 了 。 禾 盖 
后 的 原型 是 一 个 object 的 实例 ， 而 不 再 是 superType 的 实例 。 因 此 之 前 的 原型 链 就 断 了 。subType 
和 superType 之 间 也 没有 关系 了 。 

4. 原型 链 的 问题 

原型 链 虽 然 是 实现 继承 的 强大 工具 , 但 它 也 有 问题 。 主 要 问题 出 现在 原型 中 包含 引用 值 的 时 候 。 前 
面 在 谈 到 原型 的 问题 时 也 提 到 过 ， 原 型 中 包含 的 引用 值 会 在 所 有 实例 间 共 享 ， 这 也 是 为 什么 属性 通常 会 
在 构造 函数 中 定义 而 不 会 定义 在 原型 上 的 原因 。 在 使 用 原型 实现 继承 时 ， 原 型 实际 上 变 成 了 另 一 个 类 型 
的 实例 。 这 意味 着 原先 的 实例 属性 摇身一变 成 为 了 原型 属性 。 下 面 的 例子 揭示 了 这 个 问题 : 


function SuperType() { 
this coLlors = ["red™, "blue, "green™l:s 


} 




























































































| 





function SubType() {} 


// 继承 SuperType 
SubType.prototype = new SuperType(); 


let instancel = new SubType(); 
instancel.colors.push("black"); 
console.log(instancel.colors); // "red,blue,green,black" 


let instance2 = new SubType(); 
console.log(instance2.colors); // "red,blue,green,black" 


在 这 个 例子 中 ，superType 构造 函数 定义 了 一 个 colors 属性 ， 其 中 包含 一 个 数组 (引用 值 )。 每 
个 superType 的 实例 都 会 有 自己 的 colors 属性 , 包含 自己 的 数组 但 是 ， 当 subType 通过 原型 继承 
SuperType 后 ，SubType.prototype 变 成 了 SuperType 的 一 个 实例 ， 因 而 也 获得 了 自己 的 colors 
属性 。 这 类 似 于 创建 了 SubType.prototype.colors 届 性 。 最 终结 果 是 ， SubTyp 的 所 有 实例 都 会 
共享 这 个 colors 属性 。 这 一 点 通过 instancel.colors 上 的 修改 也 能 反映 到 instance2 .colors 
上 就 可 以 看 出 来 。 

原型 链 的 第 二 个 问题 是 ,， 子 类 型 在 实例 化 时 不 能 给 父 类 型 的 构造 函数 传 参 。 事 实 上 ,我 们 无 法 在 不 
影响 所 有 对 象 实例 的 情况 下 把 参数 传 进 父 类 的 构造 函数 。 再 加 上 之 前 提 到 的 原型 中 包含 引用 值 的 问题 ， 
就 导致 原型 链 基本 不 会 被 单独 使 用 。 
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8.3.2 ”盗用 构造 函数 


为 了 解决 原型 包含 引用 值 导致 的 继承 问题 ， 一 种 叫 作 “次 用 构造 函数 ”( constructor stealing ) 的 技 
术 在 开发 社区 流行 起 来 ( 这 种 技术 有 时 也 称 作 “对 象 伪装 ”或 “经 典 继承 ”)。 基 本 思路 很 简单 : 在 子 类 
构造 函数 中 调用 父 类 构造 函数 。 因 为 毕 竞 函数 就 是 在 特定 上 下 文中 执行 代码 的 简单 对 象 ， 所 以 可 以 使 月 
apply () 和 call() 方 法 以 新 创建 的 对 象 为 上 下 文 执行 构造 函数 。 来 看 下 面 的 例子 : 


function SuperType() { 
this.colors = ["red", "blue", "green"]; 


} 





























一 








function SubType() { 
// 继承 SuperType 
SuperType.call (this); 
} 


let instancel = new SubType(); 
instancel.colors.push("black"); 
console.log(instancel.colors); // "red,blue,green,black" 


let instance2 = new SubType(); 
console.log(instance2.colors); // "red,blue,green" 


示例 中 加 粗 的 代码 展示 了 盗用 构造 函数 的 调用 ,通过 使 用 call() (或 apply () ) 方 法 , SuperType 
构造 函数 在 为 SubType 的 实例 创建 的 新 对 象 的 上 下 文中 执行 了 。 这 相当 于 新 的 SubType 对 象 上 运行 了 
superType() 函数 中 的 所 有 初始 化 代码 。 结 果 就 是 每 个 实例 都 会 有 自己 的 colors 属性 。 
























































1 传递 参数 
相 比 于 使 用 原型 链 ， 盗用 构造 函数 的 一 个 优点 就 是 可 以 在 子 类 构造 函数 中 向 父 类 构造 函数 传 参 。 来 [| 





看 下 面 的 例子 : 


function SuperType (name) { 
this.name = name; 


} 


function SubType() { 
// 继承 SuperType 并 传 参 
SuperType.call (this, "Nicholas"); 


// 实例 属性 
this.age = 29; 
} 


let instance = new SubType(); 
console.log(instance.name); // "Nicholas"; 
console.log(instance.age); // 29 


在 这 个 例子 中 ，SuperType 构造 函数 接收 一 个 参数 name, 然后 将 它 赋 值 给 一 个 属性 。 在 SubType 
构造 函数 中 调用 superType 构造 函数 时 传人 这 个 参数 ,实际 上 会 在 SubType 的 实例 上 定义 name 属性 。 
为 确保 SuperType 构造 函数 不 会 覆盖 SubType 定义 的 属性 , 可 以 在 调用 父 类 构造 函数 之 后 再 给 子 类 实 
例 添加 额外 的 属性 。 


2. 盗用 构造 函数 的 问题 
盗用 构造 函数 的 主要 缺点 , 也 是 使 用 构造 函数 模式 自 定义 类 型 的 问题 : 必须 在 构造 函数 中 定义 方法 ， 
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因此 函数 不 能 重用 。 此 外 , 子 类 也 不 能 访问 父 类 原型 上 定义 的 方法 ， 因 此 所 有 类 型 只 能 使 用 构造 函数 模 
式 。 由 于 存在 这 些 问 题 ， 盗 用 构造 函数 基本 上 也 不 能 单独 使 用 。 

















8.3.3 组 合 继承 


组 合 继 承 (有 时 候 也 叫 伪 经 典 继承 ) 综合 了 原型 链 和 盗用 构造 函数 ,将 两 者 的 优点 集中 了 起 来 。 基 
本 的 思路 是 使 用 原型 链 继 承 原型 上 的 属性 和 方法 ,而 通过 盗用 构造 函数 继承 实例 属性 。 这 样 既 可 以 把 方 
法 定义 在 原型 上 以 实现 重用 ， 又 可 以 让 每 个 实例 都 有 自己 的 属性 。 来 看 下 面 的 例子 : 


function SuperType (name) { 
this.name = name; 
thrs colors = "red™; "blLUue™", "oreen'ls 







































































} 


SuperType.prototype.sayName = function() { 
console.log(this.name); 


有 


function SubType (name, age){ 
// 继承 属性 
SuperType.call (this, name); 


this.age = age; 


} 


// 继承 方法 
SubType.prototype = new SuperType(); 


SubType.prototype.sayAge = function() { 
console.log(this.age); 


于 


let instancel = new SubType("Nicholas"，29) 
instancel.colors.push("black"); 


console.log(instancel.colors); // "red,blue,green,black" 
instancel .sayName ();} /7/ "Nieholas™; 
instancel .sayAge ();} X29 


let instance2 = new SubType ("Greg", 27); 


console.log(instance2.colors); // "red,blue,green" 
instance2.sayName ();} // "Greg"; 
instance2.sayAge (); // 27 


在 这 个 例子 中 ，superType 构造 函数 定义 了 两 个 属性 ，name 和 colors， 而 它 的 原型 上 也 定义 了 
一 个 方法 叫 sayName () 。SubType 构造 函数 调用 了 superType 构造 函数 , 传人 了 name 参数 ,然后 又 
定义 了 自己 的 属性 age。 此 外 ，sSubType .prototype 也 被 赋值 为 superType 的 实例 。 原 型 赋值 之 后 ， 
又 在 这 个 原型 上 添加 了 新 方法 sayAge () 。 这 样 ， 就 可 以 创建 两 个 subpType 实例 ， 让 这 两 个 实例 都 有 
自己 的 属性 ， 包 括 colors， 同 时 还 共享 相同 的 方法 。 

组 合 继承 弥补 了 原型 链 和 盗用 构造 函数 的 不 足 ， 是 JavaScript 中 使 用 最 多 的 继承 模式 。 而 且 组 合 继 
承 也 保留 了 instanceof 操作 符 和 isPrototypeof () 方 法 识别 合成 对 象 的 能 
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8.3.4 ”原型 式 继承 


2006 年 , Douglas Crockford 写 了 一 篇 文章 :《JavaScript 中 的 原型 式 继承 》(“Prototypal Inheritance in 
JavaScript”)。 这 篇 文章 介绍 了 一 种 不 涉及 严格 意义 上 构造 函数 的 继承 方法 。 他 的 出 发 点 是 即使 不 自 定 义 
类 型 也 可 以 通过 原型 实现 对 象 之 间 的 信息 共享 。 文 章 最 终 给 出 了 一 个 函数 : 


function object(o) { 
function F() {} 
F.prototype = o; 
return new F(); 


} 

这 个 object () 函数 会 创建 一 个 临时 构造 函数 ， 将 传人 的 对 象 赋值 给 这 个 构造 函数 的 原型 ， 然 后 返 
这 个 临时 类 型 的 一 个 实例 。 本 质 上 ，object () 是 对 传 入 的 对 象 执行 了 一 次 浅 复制 。 来 看 下 面 的 例子 : 
let person = { 


name: "Nicholas", 
friends: ["Shelby", "Court", "Van"] 









































过 


let _ anotherPerson = object (person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push ("Rob"); 


let yetAnotherPerson = object (person); 
yetAnotherPerson.name = "Linda"; 
yetAnotherPerson.friends.push("Barbie"); 


console.log(person.friends); // "Shelby,Court,Van,Rob,Barbie" 

Crockford 推荐 的 原型 式 继承 适 SR 你 有 一 个 对 象 ， 想 在 它 的 基础 上 再 创建 一 个 新 对 象 。 
你 需要 把 这 个 对 象 先 传 给 object () ， 然 后 再 对 返回 的 对 象 进行 适当 修改 。 在 这 个 例子 中 ，person 对 
各 定 义务 一 个 和 也 记 法 共 训 的 信 和 把 它 传 给 object () 之 后 会 返回 一 个 新 对 象 。 这 个 新 对 象 的 原型 

是 person， 意味 着 它 的 原型 上 既 有 原始 值 属 性 又 有 引用 值 属性 。 这 也 意味 着 person .friends 不 仅 是 
person 的 属性 , 也 会 跟 anotherPerson 和 yetAnotherP a 

ECMAScript 5 通过 增加 object .create() 方 法 将 原型 式 继承 的 概念 规范 化 了 。 这 个 方法 接收 两 个 
参数 : 作为 新 对 象 原型 的 对 象 ， 以 及 给 新 对 象 定 义 额 外 属性 的 对 象 (第 二 个 可 选 )。 pr et 
Object .create() 与 这 里 的 object () 方 法 效果 相同 : 


let person = { 

name: "Nicholas", 

friends: ["Shelby", "Court", "Van"] 
}3 

































































可 















































let anotherPerson = Object.create(person); 
anotherPerson.name = "Greg"; 
anotherPerson.friends.push ("Rob"); 


let yetAnotherPerson = Object.create(person); 
yetAnotherPerson.name = "Linda"; 


yetAnotherPerson.friends.push("Barbie"); 


console.log(person.friends); // "Shelby,Court,Van,Rob,Barbie" 
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object .create() 的 第 二 个 参数 与 object .defineProperties() 的 第 二 个 参数 一 样 : 每 个 新 增 
































属性 都 通过 各 自 的 描述 符 来 描述 。 以 这 种 方式 添加 的 属性 会 遮蔽 原型 对 象 上 的 同名 属性 。 比 如 : 


let person = { 

name: "Nicholas", 

friends: ["Shelby", "Court", "Van"] 
2 


let anotherPerson = Object.create(person, { 
name: { 
Value: "Greg" 
} 
}); 
console.log(anotherPerson.name); // "Greg" 


原型 式 继承 非常 适合 不 需要 单独 创建 构造 函数 ， 但 仍然 需要 在 对 象 间 共享 信息 的 场合 。 但 要 记 住 

















属性 中 包含 的 引用 值 始终 会 在 相关 对 象 间 共 享 ， 原型 模式 是 一 样 的 。 


8.3.5 ”寄生 式 继承 


与 原型 式 继承 比较 接近 的 一 种 继承 方式 是 寄生 式 继承 ( parasitic inheritance ), 也 是 Crockford 首倡 的 


一 种 模式 。 寄 生 式 继承 背后 的 思路 类 似 于 寄生 构造 函数 和 工厂 模式 : 创建 一 个 实现 继承 的 函数 ， 以 某 种 
方式 增强 对 象 ， 然 后 返回 这 个 对 象 。 基 本 的 寄生 继承 模式 如 下 : 





function createAnother (original)t 
let clone = object (original); // 通过 调用 函数 创建 一 个 新 对 象 
clone.sayHi = function() { // 以 某 种 方式 增强 这 个 对 象 
console.log("hi"); 
pe 
return clone; // 返回 这 个 对 象 
} 


在 这 段 代 码 中 ,createAnother () 函数 接收 一 个 参数 ,就 是 新 对 象 的 基准 对 象 . 这 个 对 象 original 











2 object () 函数 ， es clone。 接 着 给 clone 对 象 添加 一 个 新 方法 
sayHi ()。 最 后 返回 这 个 对 象 。 可 以 像 下 面 这 样 使 用 createanother () 函数 : 




















let person = { 

name: "Nicholas", 

friends: ["Shelby", "Court", "Van" 
地 





let _ anotherPerson = createAnother (person); 
anotherPerson.sayHi(); // "hi" 


这 个 例子 基于 person 对 象 返回 了 一 个 新 对 象 。 新 返回 的 anotherPerson 对 象 具 有 person 的 所 


























有 属性 和 方法 ， 还 有 一 个 新 方法 叫 sayHi () 。 











寄生 式 继承 同样 适合 主要 关注 对 象 ， 而 不 在 乎 类 型 和 构造 函数 的 场景 。object () 函数 不 是 寄生 式 











继承 所 必需 的 ， 任 何 返回 新 对 象 的 函数 都 可 以 在 这 里 使 用 。 


通过 寄生 式 继承 给 对 象 添加 函数 会 导致 函数 难以 重用 ， 与 构造 函数 模式 类 似 。 





8.3 


继承 
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8.3.6 ”寄生 式 组 合 继承 


组 合 继承 其 实 也 存在 效率 问题 。 最 




















ee 一 次 在 是 


创建 子 类 原型 时 调用 , 男 一 次 是 在 子 类 构造 函数 中 调用 。 本 质 上 ,， 子 类 原型 最 终 是 要 包含 超 类 对 象 的 所 
有 实例 属性 ， 子 类 构造 函数 只 要 在 执行 时 重 写 自 己 的 原型 就 行 了 。 再 来 看 一 看 这 个 组 合 继承 的 例子 : 


function SuperType (name) { 
this.name = name; 
this.colors = ["red", "blue", "green"]; 








} 























SuperType.prototype.sayName = function() { 
console.log(this.name); 


3 


function SubType (name, age){ 
SuperType.call(this, name); // 第 二 次 调用 SuperType() 


this.age 


} 


= age; 


SubType.prototype = new SuperType(); // 第 一 次 调用 SuperType() 
SubType .Prototype .constructor = SubType; 
SubType.prototype.sayAge = function() { 

console.log(this.age); 


上 





代码 中 加 粗 的 部 分 是 调用 superType 构造 函数 的 地 方 。 在 上 面 
上 会 有 两 个 属性 : 
属性 。 在 调用 subType 构造 函数 时 ， 也 会 调用 superType 构造 函数 ， 这 一 次 会 在 新 对 象 上 创建 实例 











蝇 








的 代码 执行 后 ,， SubType.prototype 


name 和 colors。 它们 都 是 superType 的 实例 属性 , 但 现在 成 为 了 subType 的 原型 
































性 name 和 colors。 这 两 个 实例 属性 会 遮蔽 原型 上 同名 的 属性 。 图 8-6 展示 了 这 个 过 程 。 


| 





一 开始 


SubType 













SubType Prototype 
Er = 





SubType .prototype = new SuperType () 




















SuperType Prototype 


SuperType 
EE 









oe | 


SubType 






图 8-6 
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上 册 


FE 
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var instance = new SubType ("Nicholas", 29) 


SuperType Prototype 
EE 






















SuperType 









[ee = 
) 


SubType 




























(array 
instance 
[[Prototype]] 
name "Nicholas" 
colors (array) 
age 之 





图 8-6( 续 ) 


如 图 8-6 所 示 ， 有 两 组 name 和 colors 属性 : 一 组 在 实例 上 ,， 另 一 组 在 subType 的 原型 上 。 这 是 
调用 两 次 superType 构造 函数 的 结果 。 好 在 有 办 法 解决 这 个 问题 。 
寄生 式 组 合 继承 通过 盗用 构造 函数 继承 属性 , 但 使 用 混合 式 原 型 链 继承 方法 。 基 本 思路 是 不 通过 调 
用 父 类 构造 函数 给 子 类 原型 赋值 ， 而 是 取得 父 类 原型 的 一 个 副本 。 说 到 底 就 是 使 用 寄生 式 继 承 来 继承 父 
类 原型 ， 然 后 将 返回 的 新 对 象 赋值 给 子 类 原型 。 寄 生 式 组 合 继承 的 基本 模式 如 下 所 示 : 


function inheritPrototype(subType, superType) { 


























































































































let prototype = object (superType.prototype); // 创建 对 象 
prototype.constructor = subType; // 增强 对 象 
subType.prototype = prototype; // 赋值 对 象 


} 

这 个 inheritPrototype() 函数 实现 了 寄生 式 组 合 继承 的 核心 逻辑 。 这 个 函数 接收 两 个 参数 ， 子 
类 构造 函数 和 父 类 构造 函数 。 在 这 个 函数 内 部 ， 第 一 步 是 创建 父 类 原型 的 一 个 副本 。 然 后 ， 给 返回 的 
prototype 对 象 设置 constructor 属性 ,解决 由 于 重 写 原型 导致 默认 constructor 丢失 的 问题 。 最 
后 将 新 创建 的 对 象 赋值 给 子 类 型 的 原型 。 如 下 例 所 示 ， 调 用 inheritPrototype() 就 可 以 实现 前 面 例 
子 中 的 子 类 型 原型 赋值 : 


function SuperType (name) { 
this.name = name; 
this. .GOLOrFSy = EL"red™, "bLuE oreenl: 


} 















































SuperType.prototype.sayName = function() { 
console.log(this.name); 
二 


function SubType (name，age) { 
SuperType.call (this, name); 
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this.age = age; 


} 
inheritPrototype(SubType, SuperType); 


SubType.prototype.sayAge = function() { 
console.log(this.age); 


} 3 

这 里 只 调用 了 一 次 superType 构造 隐 数 ,避免 了 subType.prototype 上 不 必要 也 用 不 到 的 属性 ， 
因此 可 以 说 这 个 例子 的 效率 更 高 。 而 且 ， 原型 链 仍 然 保持 不 变 ， 因 此 instanceof 操作 符 和 
isPrototypeof () 方 法 正常 有 效 。 寄 生 式 组 合 继承 可 以 算是 引用 类 型 继承 的 最 佳 模式 。 


8.4 类 


前 几 节 深入 讲解 了 如 何 只 使 用 ECMAScript 5 的 特性 来 模拟 类 似 于 类 ( class-like ) 的 行为 。 不 难看 出 ， 
各 种 策略 都 有 自己 的 问题 ， 也 有 相应 的 妥协 。 正 因为 如 此 ， 实 现 继承 的 代码 也 显得 非常 元 长 和 混乱 。 

为 解决 这 些 问题 ，ECMAScript 6 新 引入 的 class 关键 字 具 有 正式 定义 类 的 能 力 。 类 (class ) 是 
ECMAScript 中 新 的 基础 性 语法 糖 结构 ， 因 此 刚 开 始 接触 时 可 能 会 不 太 习 惯 。 虽 然 ECMAScript 6 类 表面 
上 看 起 来 可 以 支持 正式 的 面向 对 象 编程 ， 但 实际 上 它 背 后 使 用 的 仍然 是 原型 和 构造 函数 的 概念 。 


8.4.1 类 定义 
与 函数 类 型 相似 ， 定 义 类 也 有 两 种 主要 方式 : 类 声明 和 类 表达 式 。 这 两 种 方式 都 使 用 class 关键 


字 加 大 括号 : 


class Person {} 










































































// 类 表达 式 


const Animal = class {}; 
与 图 数 表达 式 类 似 ， 类 表达 式 在 它们 被 求 值 前 也 不 能 引用 。 不 过 ,与 函数 定义 不 同 的 是 ， 虽 然 函 数 
声明 可 以 提升 ， 但 类 定义 不 能 : 








console.log(FunctionExpression); // undefined 

var FunctionExpression = function() {}; 

console.log (FunctionExpression); // function() {} 
console.log(FunctionDeclaration); // FunctionDeclaration() {} 
function FunctionDeclaration() {} 
console.log(FunctionDeclaration); // FunctionDeclaration() {} 
console.log(ClassExpression); // undefined 

Var ClassExpression = class {}; 

console.log(ClassExpression); // class {} 

console.log (ClassDeclaration); // ReferenceError: ClassDeclaration is not defined 
class ClassDeclaration {} 

console.log(ClassDeclaration); // class ClassDeclaration {} 











男 一 个 跟 函 数 声明 不 同 的 地 方 是 ， 函 数 受 函数 作用 域 限制 ， 而 类 受 块 作用 域 限制 : 
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{ 
function FunctionDeclaration() 
class ClassDeclaration {} 


} 


console.log(FunctionDeclaration); 


console.log(ClassDeclaration); 


类 的 构成 
类 可 以 包含 构造 函数 方法 、 实 例 方法 、 





空 的 类 定义 照样 有 效 。 默 认 情 况 下 ， 类 定义 中 的 代码 都 在 严格 模式 下 执行 。 
与 函数 构造 函数 一 样 ， 多 数 编程 风格 都 建议 类 名 的 首 字母 要 大 写 


通过 class Foo {} 创 建 实例 foo ): 
// 空 类 定义 ， 有效 


class Foo {} 


如 ， 


// 有 构造 函数 的 类 ， 有 效 
class Bar { 
constructor() 


} 


{} 


// 有 获取 函数 的 类 ， 有 效 
Class Bas 二 

get myBaz () 
} 


{} 


// 有 静态 方法 的 类 ， 有 效 
class Qux { 

static myQux() 
} 


{} 








类 表达 式 的 名 称 是 可 选 的 。 在 把 类 表达 式 赋值 给 变量 后 ， 可 以 通过 


{} 


// FunctionDeclaration() {} 
// ReferenceError: ClassDeclaration is not defined 


获取 函数 、 设 置 函数 和 静态 类 方法 ,但 这 些 都 不 是 必需 的 。 














， 以 区 别 于 通过 它 创 建 的 实例 ( 比 








name 属性 取得 类 表达 式 的 名 称 








字符 串 。 但 不 能 在 类 表 ; 


Jet Person = class PersonName { 
identify() { 
console.log(Person.name, 
} 
} 





let p = new Person() 
p.identify(); 


console.log(Person.name); 
console.log(PersonName); 


8.4.2 ”类 构造 函数 


达 式 作用 域外 部 访问 这 


文 个 标识 符 。 


PerSsonName .name); 


// PersonName PersonName 


// PersonName 
// ReferenceError: 


PersonName is not defined 





constructor 关键 字 用 于 在 类 定义 块 内 部 创建 类 
新 实例 时 , 应 该 调用 这 个 





在 使 用 new 操作 符 创 建 类 的 3 
数 相当 于 将 构造 函数 定义 为 空 函数 。 











的 构造 函数 ,方法 名 constructor 会 告诉 解释 央 
函数 。 构造 函 数 的 定义 不 是 必需 的 , 不 定义 构造 函 
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1. 实例 化 

使 用 new 操作 符 实例 化 Person 的 操作 等 于 使 用 new 调用 其 构造 函数 。 唯 一 可 感知 的 不 同 之 处 就 
是 ，JavaScript 解释 器 知道 使 用 new 和 类 意味 着 应 该 使 用 constructor 函数 进行 实例 化 。 

使 用 nevw 调用 类 的 构造 函数 会 执行 如 下 操作 。 

(1) 在 内 存 中 创建 一 个 新 对 象 。 

(2) 这 个 新 对 象 内 部 的 [[Prototype]1 指 针 被 赋值 为 构造 函数 的 prototype 属性 。 

(3) 构造 函数 内 部 的 this 被 赋值 为 这 个 新 对 象 ( 即 this 指向 新 对 象 )。 

(4) 执行 构造 函数 内 部 的 代码 ( 给 新 对 象 添加 属性 )。 

(5) 如 果 构 造 函 数 返 回 非 空 对 象 ， 则 返回 该 对 象 ; 否则 ， 返 回 刚 创 建 的 新 对 象 。 

来 看 下 面 的 例子 : 


class Animal {} 
















































































class Person { 
constructor() { 
console.log('person ctor'); 
} 
} 


class Vegetable { 
constructor() { 
this.color = 'orange'; 
} 
} 


let a = new Animal (); 





let p = new Person(); // person ctor 


let V = new Vegetable(); 
console.log(v.color); // orange 


类 实例 化 时 传 入 的 参数 会 用 作 构 造 函 数 的 参数 。 如 果 不 需要 参数 ， 则 类 名 后 面 的 括号 也 是 可 选 的 : 


class Person { 
constructor (name) { 
console.1og(arguments .length) ， 











this.name = name || null; 

; 
} 
let pl = new Person; OU 
console.log(pl.name); // null 
let p2 = new Person(); A 
console.log(p2.name); // null 
let p3 = new Person('Jake'); // 1 
console.log(p3.name); // Jake 
默认 情况 下 ， 类 构造 函数 会 在 执行 之 后 返回 this 对 象 。 构 造 函 数 返 回 的 对 象 会 被 用 作 实 例 化 的 对 



































象 ， 如 果 没 有 什么 引用 新 创建 的 this 对象， 那么 这 个 对 象 会 被 销毁 。 不 过 ， 如 果 返 回 的 不 是 this 对 
象 , 而 是 其 他 对 象 , 那么 这 个 对 象 不 会 通过 instanceof 操作 符 检 测 出 跟 类 有 关联 ,因为 这 个 对 象 的 原 
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型 指针 并 没有 被 修改 。 


class Person { 
constructor(override) { 
thie foor ee TfOOT: 
if (override) { 
return { 
sa "Dar 
二 





} 
} 
} 


let pl 
p2 


new Person(), 
new Person(true); 


console.1log(p1); 


console.log(pl instanceof Person); // true 
console.log(p2); lA lars haar: 
console.log(p2 instanceof Person); // false 


类 构造 函数 与 构造 函数 的 主要 区 别 是 , 调用 类 构造 函数 必须 使 用 new 操作 符 。 而 普通 构造 函数 如 果 








// Person{ foo: 


Were 


} 








不 使 用 new 调用 ， 那 么 就 会 以 全 局 的 this (通常 是 window ) 作为 内 部 对 象 。 调 用 类 构造 函数 时 如 果 


忘 了 使 用 new 则 会 抛 出 错误 : 


function Person() {} 
class Animal {} 


// 把 window 作为 this 来 构建 实例 


let p = Person(); 


let a = Animal (); 
// TypeError: 





Class constructor Animal cannot be invoked without 'new'’' 





类 构造 函数 没有 什么 特殊 之 处 ,实例 化 之 后 ， 它 会 成 为 普通 的 实例 方法 ( 但 作为 类 构造 函数 ,仍然 











要 使 用 new 调用 )。 因 此 ， 实 例 化 之 后 可 以 在 实例 上 引用 它 : 


class Person {} 

















// 使 用 类 创建 一 个 新 实例 


let pl = new Person(); 


pl conmnstructor()y 
// TypeError: 


// 使 用 对 类 构造 通 数 的 引用 创建 一 个 新 实例 


let p2 = new pl.constructor(); 


2. 把 类 当成 特殊 函数 


Class constructor Person cannot be invoked without 'new' 





ECMAScript 中 没有 正式 的 类 这 个 类 型 。 从 各 方面 来 看 ，ECMAScript 类 就 是 一 种 特殊 函数 。 声 明 一 
个 类 之 后 ， 通 过 typeof 操作 符 检 测 类 标识 符 ， 表 明 它 是 一 个 函数 : 


class Person {} 


// class Person {} 
// function 


console.log (Person);} 
console.log(typeof Person) : 





类 标识 符 有 prototype 属性 ， 而 这 个 原型 也 有 一 个 constructor 属性 指向 类 自身 : 


class Persont{} 





console.log(Person.prototype); A Constroactdry tt 
console.log(Person === Person.prototype.constructor); // true 


与 普通 构造 函数 一 样 ,可 以 使 用 instanceof 操作 符 检 查 构 造 函 数 原型 是 否 存在 于 实例 的 原型 链 中 : 


class Person {} 



































let p = new Person(); 


console.log(p instanceof Person); // true 

由 此 可 知 , 可 以 使 用 instanceof 操作 符 检查 一 个 对 象 与 类 构造 函数 , 以 确定 这 个 对 象 是 不 是 类 的 
实例 。 只 不 过 此 时 的 类 构造 函数 要 使 用 类 标识 符 ， 比 如 ， 在 前 面 的 例子 中 要 检查 p 和 Person。 

如 前 所 述 , 类 本 身 具有 与 普通 构造 函数 一 样 的 行为 。 在 类 的 上 下 文中 , 类 本 身 在 使 用 new 调用 时 就 
会 被 当成 构造 函数 。 重 点 在 于 ， 类 中 定义 的 constructor 方法 不 会 被 当成 构造 函数 ， 在 对 它 使 用 
instanceof 操作 符 时 会 返回 false。 但 是 , 如 果 在 创建 实例 时 直接 将 类 构造 函数 当成 普通 构造 函数 来 
使 用 ,那么 instanceof 操作 符 的 返回 值 会 反 转 : 


class Person {} 














let pl = new Person(); 

console.log(pl.constructor === Person); // true 
console.log(pl instanceof Person); // true 
console.log(pl instanceof Person.constructor); // false 


let p2 = new Person.constructor(); 











console.log(p2.constructor === Person); // false 
console.log(p2 instanceof Person); // false 
console.log(p2 instanceof Person.constructor); // true 














类 是 JavaScript 的 一 等 公民 ， 因 此 可 以 像 其 他 对 象 或 函数 引用 一 样 把 类 作为 参数 传递 : 
// 类 可 以 像 函 数 一 样 在 任何 地 方 定义 ， 比 如 在 数组 中 


let classList = [ 
class { 
constructor(id) { 
Eis Ed := Ly 
console.log( instance s${this.id }.); 
} 
} 
J] 





function createInstance(classDefinition, id) { 
return new classDefinition(id); 


} 


let foo = createInstance(classList[0], 3141); // instance 3141 
与 立即 调用 函数 表达 式 相 似 ， 类 也 可 以 立即 实例 化 : 
// 因为 是 一 个 类 表达 式 ， 所 以 类 名 是 可 选 的 


let p = new class Foo { 
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constructor(x) { 
console.log (x); 


} 
(oa)yy // bar 


console.log(p); // Foo {} 


8.4.3 实例 、 原 型 和 类 成 员 


类 的 语法 可 以 非常 方便 地 定义 应 该 存在 于 实例 上 的 成 员 、 应 该 存在 于 原型 上 的 成 员 , 以 及 应 该 存在 


于 类 本 身 的 成 员 。 
1. 实例 成 员 

















每 次 通过 new 调 用 类 标识 符 时 ,都 会 执行 类 构造 函数 ,在 这 个 函数 内 部 ,可 以 为 新 创建 的 实例 ( this ) 




















添加 “ 自 有 ”属性 。 至 于 添加 什么 样 的 属性 ， 则 没有 限制 。 另外， 在 构造 函数 执行 完 
实例 继续 添加 新 成 员 。 
每 个 实例 都 对 应 一 个 唯一 的 成 员 对 象 ， 这 意味 着 所 有 成 员 都 不 会 在 原型 上 共享 : 
class Person { 
constructor() { 
// 这 个 例子 先 使 用 对 象 包 装 类 型 定义 一 个 字符 囊 
// 为 的 是 在 下 面 测试 两 个 对 象 的 相等 性 


this.name = new String('Jack'); 





rl 


| 


























this.sayName = () => console.log(this.name); 


this.nicknames = ['Jake', 'J-Dog'] 


let pl 
2 


new Person(), 
new Person(); 


ll 


// Jack 
// Jack 


pl.sayName ();} 
p2.sayName ();} 
console.log(pl.name === p2.name); // false 
console.log(pl.sayName === p2.sayName); // false 
console.log(pl.nicknames === p2.nicknames); // false 


pl.name 
p2 .name 


= pl.nicknames{[0]; 
= p2.nicknames[1]; 
pl.sayName(); // Jake 
p2.sayName(); // J-Dog 


2. 原型 方法 与 访问 器 
为 了 在 实例 间 共 享 方法 ， 类 定义 语法 把 在 类 块 中 定义 的 方法 作为 原型 方法 。 
class Person { 

constructor() { 


// 添加 到 this 的 所 有 内 容 都 会 存在 于 不 同 的 实例 上 


this.locate = () => console.log('instance');} 

















毕 后 ,仍然 可 以 给 
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// 在 类 块 中 定义 的 所 有 内 容 痢 会 定义 在 类 的 原型 上 
locate() { 
console.log('prototype'); 
} 
} 


let p = new Person () ; 


p.locate(); // instance 
Person.prototype.locate(); // prototype 


可 以 把 方法 定义 在 类 构造 函数 中 或 者 类 块 中 ,但 不 能 在 类 块 中 给 原型 添加 原始 值 或 对 象 作 为 成 员 数据 : 


class Person { 
name: 'Jake' 


} 
// Uncaught SyntaxError: Unexpected token 


类 方法 等 同 于 对 象 属性 ， 因 此 可 以 使 用 字符 串 、 符 号 或 计算 的 值 作为 键 : 


Const symbolKey = Symbol('symbolKey'); 
































class Person { 


stringKey() { 
console.log('invoked stringKey'); 

} 
[symbolKey]() { 
console.log('invoked symbolKey'); 

} 
['computed' + 'Key']() { 
console.log('invoked computedKey'); 

} 

} 





let p = new Person(); 


// invoked stringKey 
3 // invoked symbolKey 
); // invoked computedKey 


p.stringKkey (); 
plsymbolKey] () 
p.computedKey( 


类 定义 也 支持 获取 和 设置 访问 器 。 语 法 与 行为 跟 普 通 对 象 一 样 : 
class Person { 
set name (newName) { 


this.name = newName; 


} 





get name() { 
return this.name ; 
} 


let p = new Person(); 
p.name = 'Jake'; 
console.log(p.name); // Jake 


3. 静态 类 方法 
可 以 在 类 上 定义 静态 方法 。 这 些 方 法 通常 用 于 执行 不 特定 于 实例 的 操作 ， 也 不 要 求 存在 类 的 实例 。 
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与 原型 成 员 类 似 ， 静 态 成 员 每 个 类 上 只 能 有 一 个 。 
静态 类 成 员 在 类 定义 中 使 用 static 关键 字 作为 前 级 。 在 静态 成 员 中 ，this 引用 类 自身 。 其 他 所 
有 约定 跟 原 型 成 员 一 样 : 


class Person { 





























constructor() { 
// 添加 到 this 的 所 有 内 容 都 会 存在 于 不 同 的 实例 上 
this.locate = () => console.log('instance', this); 


} 


// 定义 在 类 的 原型 对 象 上 

locate() { 
console.log('prototype', this); 

} 


// 定义 在 类 本 身上 
static locate() { 
console.log('class', this); 
} 
} 


let p = new Person() 


p.locate(); // instance, Person {} 
Person.prototype.locate(); // prototype, {constructor: ... } 
Person.locate(); // class, class Person {} 


静态 类 方法 非常 适合 作为 实例 工厂 : 
class Person { 
constructor(age) { 
this.age_ = age; 


. 


sayAge() { 
console.log(this.age ); 


} 


static create() { 
// 使 用 随机 年 龄 创建 并 返回 一 个 Person 实例 
return new Person(Math.floor(Math.random()*100)); 
} 
} 


console.log(Person.create()); // Person { age_: ... } 


4. 非 函 数 原型 和 类 成 员 
虽然 类 定义 并 不 显 式 支持 在 原型 或 类 上 添加 成 员 数 据 ， 但 在 类 定义 外 部 ， 可 以 手动 添加 : 


class Person { 
sayName() { 
console.log(‘s$s{Person.greeting} S${this.name}.); 
} 
} 





// 在 类 上 定义 数据 成 员 


Person.greeting = 'My name is'; 
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// 在 原型 上 定义 数据 成 员 


Person.prototype.name = 'Jake'; 


let p = new Person(); 
p.sayName(); // My name is Jake 


注意 ”类 定义 中 之 所 以 没有 显 式 支持 添加 数据 成 员 ， 是 因为 在 共享 目标 (原型 和 类 ) 上 添 
加 可 变 〈 可 修改 ) 数据 成 员 是 一 种 反 模式 。 一 般 来 说 ， 对 象 实例 应 该 独自 拥有 通过 this 


引用 的 数据 。 





5. 迭代 器 与 生成 器 方法 
类 定义 语法 支持 在 原型 和 类 本 身上 定义 生成 器 方法 : 
class Person { 
// 在 原型 上 定义 生成 器 方法 
*createNicknameIterator() { 
yield 'Jack'; 
yield 'Jake'; 
yield 'J-Dog'; 
} 





// 在 类 上 定义 生成 器 方法 
static *createJobIterator() { 
yield 'Butcher'; 
yield 'Baker'; 
yield 'Candlestick maker'; 
} 
} 


let jobIter = Person.createJobIterator(); 


console.log(jobIter.next().value); // Butcher 
console.log(jobIter.next().value); // Baker 
console.log(jobIter.next().value); // Candlestick maker 


let p = new Person(); 
let nicknamelIter = p.createNicknameIterator(); 








console.log(nicknameIter.next() .value); // Jack 
console.log(nicknameIter.next() .value); // Jake 
console.log (nicknameIter.next() .value); // J-Dog 


因为 支持 生成 带 方 法 ， 所 以 可 以 通过 添加 一 个 默认 的 迭代 器 ， 把 类 实例 变 成 可 夫 代 对 象 : 


class Person { 
constructor() { 
this.nicknames = ['Jack', 'Jake', 'J-Dog']; 


} 


* [Symbol .iterator] () { 
yield *this.nicknames.entries(); 
} 
} 


let p = new Person(); 
for (let [idx, nickname] of p) { 
console.log(nickname); 


} 
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// Jack 
// Jake 
/A'SDog 


也 可 以 只 返回 迭代 咒 实 例 ; 


class Person { 
constructor() { 
this.nicknames = ['Jack', 'Jake', 'J-Dog']; 


} 





[Symbol.iterator]() { 
return this.nicknames.entries(); 
} 
3 


let p = new Person();} 

for (let [idx, nickname] of p) { 
console.log (nickname); 

// Jack 

// Jake 

// J-Dog 


8.4.4 继承 

本 章 前 面 花 了 大 量 篇 幅 讨 论 如 何 使 用 ES5 的 机 制 实 现 继承 。ECMAScript 6 新 增 特性 中 最 出 色 的 一 
个 就 是 原生 支持 了 类 继承 机 制 。 虽然 类 继承 使 用 的 是 新 语法 ,但 背后 依旧 使 用 的 是 原型 链 。 

1. 继承 基础 

ES6 类 支持 单 继 承 。 使 用 extengs 关键 字 ， 就 可 以 继承 任何 拥有 [ [construct]] 和 原型 的 对 象 。 
很 大 程度 上 ， 这 意味 着 不 仅 可 以 继承 一 个 类 ， 也 可 以 继承 普通 的 构造 函数 ( 保持 向 后 兼容 ): 


class Vehicle {} 






























































// 继承 类 


class Bus extends Vehicle {} 


let b = new Bus(); 


console.log(b instanceof Bus); // true 
console.log(b instanceof Vehicle); // true 
function Person() {} 


// 继承 普通 构造 函数 
class Engineer extends Person {} 


let e = new Engineer(); 
console.log(e instanceof Engineer); // true 
console.log(e instanceof Person); // true 


派生 类 都 会 通过 原型 链 访 问 到 类 和 原型 上 定义 的 方法 。this 的 值 会 反映 调用 相应 方法 的 实例 或 者 类 : 


class Vehicle { 
identifyPrototype(id) { 
console.log(id, this); 



































} 
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static identifyClass(id) { 
console.log(id, this); 
} 
} 


class Bus extends Vehicle {} 


let V = new Vehicle(); 
let b = new Bus(); 


b.identifyPrototype('bus'); 
Vv.identifyPrototype('vehicle'); 


Bus.identifyClass('bus'); 
Vehicle.identifyClass('vehicle'); 


RA 
壮 忌 


是 有 效 的 语法 。 


2. 构造 咀 数 、HomeObject 和 super() 





派生 类 的 方法 可 以 通过 super 关键 字 引 月 

















// bus, Bus {} 
// vehicle, Vehicle {} 


// bus, class Bus {} 
// vehicle, class Vehicle {} 


extends 关键 字 也 可 以 在 类 表达 式 中 使 用 ， 因 此 let Bar = class extends Foo {} 














它们 的 原型 。 这 个 关键 字 只 能 在 派生 类 中 使 用 ， 而 且 仅 


限于 类 构造 函数 、 实 例 方法 和 静态 方法 内 部 。 在 类 构造 函数 中 使 用 super 可 以 调用 父 类 构造 函数 。 


class Vehicle { 
constructor() { 
this.hasEngine = true; 
} 
} 


class Bus extends Vehicle { 
constructor() { 


// 不 要 在 调用 super() 之 前 引用 this， 否则 会 抛 出 ReferenceError 


super (); 


console.log(this instanceof Vehicle); 


console.log(this); 
} 
} 


new Bus(); 


// 相当 于 super.constructor() 


// true 


// Bus { hasEngine: true } 














在 静态 方法 中 可 以 通过 super 调用 继承 的 类 上 定义 的 静态 方法 : 


class Vehicle { 
static identify() { 
console.log('vehicle'); 
} 
} 


class Bus extends Vehicle { 
static identify() { 
super.identify(); 
} 
} 


Bus.identify(); // vehicle 
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注意 ES6 给 类 构造 函数 和 静 态 方 法 添加 了 内 部 特性 [ [HomeObject]]， 这 个 特性 是 一 个 
指针 ， 指 向 定义 该 方法 的 对 象 。 这 个 指针 是 自动 赋值 的 ， 而 且 只 能 在 JavaScript 引擎 内 部 


访问 。super 始终 会 定义 为 [[HomeObject]] 的 原型 。 





在 使 用 super 时 要 注意 几 个 问题 。 
口 super 只 能 在 派生 类 构造 函数 和 静态 方法 中 使 用 。 
class Vehicle { 

constructor() { 


super (); 
// SyntaxError: 'super' keyword unexpected 








} 
} 


口 不 能 单独 引用 super 关键 字 ， 要么 用 它 调 用 构造 函数 ， 要 人 么 用 它 引 用 静态 方法 。 


class Vehicle {} 





























class Bus extends Vehicle { 
constructor() { 
console.log(super); 
// SyntaxError: 'super' keyword unexpected here 
} 
} 


口 调用 super () 会 调用 父 类 构造 函数 ， 并 将 返回 的 实例 赋值 给 this。 


class Vehicle {} 








闭 














class Bus extends Vehicle { 
constructor() { 
super (); 


console.log(this instanceof Vehicle); 
} 
} 


new Bug 人) 7// true 


口 super () 的 行为 如 同调 用 构造 函数 ， 如 果 需 要 给 父 类 构造 函数 传 参 ， 则 需要 手动 传人 。 


class Vehicle { 
constructor(licensepPlate) { 
this.licensePlate = licensePlate; 
} 
3 


class Bus extends Vehicle { 
constructor(licensepPlate) { 
super (licensepPlate); 
} 
} 


console.log(new Bus('1337H4X')); // Bus { licensePlate: '1337H4X' } 


口 如 果 没 有 定义 类 构造 函数 ， 在 实例 化 派生 类 时 会 调用 super () ， 而 且 会 传人 所 有 传 给 派生 类 的 
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class Vehicle { 
constructor(licensepPlate) { 
this.licensePlate = licensePlate; 
} 
} 


class Bus extends Vehicle {} 


console.log(new Bus('1337H4X')); // Bus { licensePlate: '1337H4X' } 


口 在 类 构造 函数 中 ， 不 能 在 调用 super () 之 前 引用 this。 


class Vehicle {} 














class Bus extends Vehicle { 
constructor() { 
console.log(this); 
} 
} 


new Bus(); 
// ReferenceError: Must call super constructor in derived class 
// before accessing 'this' or returning from derived constructor 


口 如 果 在 派生 类 中 显 式 定义 了 构造 函数 ， 则 要 么 必须 在 其 中 调用 super () ， 要 么 必须 在 其 中 返回 
一 个 对 象 。 


class Vehicle {} 
























































class Car extends Vehicle {} 


class Bus extends Vehicle { 
constructor() { 
super (); 


} 





} 


class Van extends Vehicle { 
constructor() { 
return {}; 
} 
} 


console.log(new Car()); // Car {} 
console.log(new Bus()); // Bus {} 
console.log(new Van()); // {} 

3. 抽象 基 类 

















有 时 候 可 能 需要 定义 这 样 一 个 类 ， 它 可 供 其 他 类 继承 ， 但 本 身 不 会 被 实例 化 。 虽 然 ECMAScript 没 
有 专门 支持 这 种 类 的 语法 ， 但 通过 new.target 也 很 容易 实现 。new .target 保存 通过 new 关键 字 调 
的 类 或 函数 。 通 过 在 实例 化 时 检测 new .target 是 不 是 抽象 基 类 ， 可 以 阻止 对 抽象 基 类 的 实例 化 : 
































// 抽象 基 类 
class Vehicle { 
constructor() { 
console.log (new.target); 
if (new.target === Vehicle) { 


throw new Error('Vehicle cannot be directly instantiated'); 
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调 


// 派生 类 

class Bus extends Vehicle {} 

new Bus(); // class Bus {} 

new Vehicle(); // class Vehicle {} 


// Error: Vehicle cannot be directly instantiated 


男 外 ,通过 在 抽象 基 类 构造 函数 中 进行 检查 ， 可 以 要 求 派生 类 必须 定义 某 个 方法 。 因 为 原型 方法 在 



































用 类 构造 函数 之 前 就 已 经 存在 了 ， 所 以 可 以 通过 this 关键 字 来 检查 相应 的 方法 : 





// 抽象 基 类 
class Vehicle { 
constructor() { 
if (new.target === Vehicle) { 
throw new Error('Vehicle cannot be directly instantiated'); 


i (this-foo) { 
throw new Error('Inheriting class must define foo()'); 


} 


console.log('success!'); 
} 
} 


// 派生 类 

class Bus extends Vehicle { 
foo() {} 

} 


// 派生 类 


class Van extends Vehicle {} 


new Bus(); // success! 
new Van(); // Error: Inheriting class must define foo() 
4. 继承 内 置 类 型 


ES6 类 为 继承 内 置 引用 类 型 提供 了 顺畅 的 机 制 ， 开 发 者 可 以 方便 地 扩展 内 置 类 型 : 


class SuperArray extends Array { 
shuffle() { 











// 洗 牌 算法 

for (let i = this.length - 1; i > 0; i--) { 
const j = Math.floor(Math.random() * (i + 1)); 
[this[i], this[j]] = [this[j], this[i]]; 


} 
} 
} 


let a = new SuperArray (1, 2, 3, 4, 5); 


console.log(a instanceof Array); // true 
console.log(a instanceof SuperArray); // true 
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CONnsolTe. LOg(8). .77 1 2. 3% MA 
a.shuffle(); 
Console., Log(a)y; AA [3y 17 Wd 5 











有 些 内 置 类 型 的 方法 会 返回 新 实例 。 默 认 情 况 下 ， 返 回 实例 的 类 型 与 原始 实例 的 类 型 是 一 致 的 : 


class SuperArray extends Array {} 








let al 
let a2 


new SuperArray (1, 2, 3, 4, 5); 
al.filter(x => !! (x%$2)) 


console.log(al); // [1, 2, 3, 4, 5] 





(a 
CONSOLS 409 (a2)%. .LL 37.5] 
console.log(al instanceof SuperArray); // true 
console.log(a2 instanceof SuperArray); // true 
如 果 想 覆盖 这 个 默认 行为 ， 则 可 以 覆盖 symbol . species 访问 器 ， 这 个 访问 器 决定 在 创建 返回 的 


实例 时 使 用 的 类 : 


class SuperArray extends Array { 
static get [Symbol.species]() { 
return Array; 
} 
} 





let al = new SuperArray (1, 2, 3, 4, 5); 

let a2 = al.filter(x => !! (x%2)) 

CONsdle ogtalhe W/L .2 "Sy iy 3] 
console.log(a2); // [1, 3, 5] 

console.log(al instanceof SuperArray); // true 
console.log(a2 instanceof SuperArray); // false 
5. 类 混 








十 





把 不 同类 的 行为 集中 到 一 个 类 是 一 种 常见 的 JavaScript 模式。 虽然 ES6 没有 显 式 文 持 多 类 继承 ,但 
过 现 有 特性 可 以 轻松 地 模拟 这 种 行为 。 


注意 object.assign() 方 法 是 为 了 混入 对 象 行为 而 设计 的 。 只 有 在 需要 混入 类 的 行为 
时 才 有 必要 自己 实现 混入 表达 式 。 如 果 只 是 需要 混入 多 个 对 象 的 属性 ， 那 么 使 用 


GE 























在 下 面 的 代码 片段 中 ，extends 关键 字 后 面 是 一 个 JavaScript 表达 式 。 任 何 可 以 解析 为 一 个 类 或 一 
个 构造 函数 的 表达 式 都 是 有 效 的 。 这 个 表达 式 会 在 求 值 类 定义 时 被 求 值 : 


class Vehicle {} 





function getParentClass() { 
console.log('evaluated expression'); 
return Vehicle; 


} 


class Bus extends getParentClass() {} 


// 可 求 值 的 表达 式 
混入 模式 可 以 通过 在 一 个 表达 式 中 连 级 多 个 混入 元 素来 实现 , 这 个 表达 式 最 终 会 解析 为 一 个 可 以 被 
继承 的 类 。 如 果 Person 类 需要 组 合 A、B 、C， 则 需要 某 种 机 制 实现 B 继承 A，C 继承 B， 而 Person 
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再 继承 C， 从 而 把 A、B、C 组 合 到 这 个 超 类 中 。 实 现 这 种 模式 有 不 同 的 策略 。 
个 策略 是 定义 一 组 “可 能 套 ” 的 函数 ， 每 个 函数 分 别 接收 一 个 超 类 作为 参数 ， 而 将 混 人 类 定义 为 
这 个 参数 的 子 类 ， 并 返回 这 个 类 。 这 些 组 合 函 数 可 以 连 绥 调 用 ， 最 终 组 合成 超 类 表达 式 : 


class Vehicle {} 




















Jet FooMixin = (Superclass) => class extends Superclass { 
foo() { 
console.log('foo'); 
} 
yy 
lJet BarMixin = (Superclass) => class extends Superclass { 
bar() { 
console.log('bar'); 
} 
上 
let BazMixin = (Superclass) => class extends Superclass { 
baz(d) “€ 
console.log('baz'); 
} 
上 


class Bus extends FooMixin(BarMixin(BazMixin(Vehicle))) {} 
let b = new Bus(); 

Boo() /E00 

bbar();” 7 .Lar 

b.baz(); // baz 











通过 写 一 个 辅助 函数 ， 可 以 把 府 套 调用 展开 : 


class Vehicle {} 




















lJet FooMixin = (Superclass) => class extends Superclass { 
foo() { 
console.log('foo'); 
} 
}: 
lJet BarMixin = (Superclass) => class extends Superclass { 
bar() { 
console.log('bar'); 
} 
Ji 
let BazMixin = (Superclass) => class extends Superclass { 
baz() { 
console.log('baz'); 
} 
于 


function mix(BaseClass, ...Mixins) { 
return Mixins.reduce((accumulator, current) => current (accumulator), BaseClass); 
} 


class Bus extends mix(Vehicle, FooMixin, BarMixin, BazMixin) {} 


let b = new Bus(); 


Bfoo(); YY £00 
b.bar(); 7// bar 
b.baz(); // baz 
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注意 很 多 JavaScript 框架 ( 特别 是 React ) 已 经 抛弃 混入 模式 ， 转 向 了 组 合 模式 (把 方法 
提取 到 独立 的 类 和 辅助 对 象 中 ， 然 后 把 它们 组 合 起 来 ， 但 不 使 用 继承 )。 这 反映 了 那个 众 


所 周知 的 软件 设计 原则 :“ 组 合 胜 过 继承 ( composition over inheritance ).” 这 个 设计 原则 被 
很 多 人 遵循 ， 在 代码 设计 中 能 提供 极 大 的 灵活 性 。 





8.5 ”小结 


对 象 在 代码 执行 过 程 中 的 任何 时 候 都 可 以 被 创建 和 增强 , 具有 极 大 的 动态 性 ,并 不 是 严格 定义 的 实 

体 。 下 面 的 模式 适用 于 创建 对 象 。 

口 工厂 模式 就 是 一 个 简单 的 函数 ， 这 个 函数 可 以 创建 对 象 ， 为 它 添加 属性 和 方法 ,然后 返回 这 个 

对 象 。 这 个 模式 在 构造 函数 模式 出 现 后 就 很 少 用 了 。 

口 使 用 构造 函数 模式 可 以 自 定义 引用 类 型 ， 可 以 使 用 new 关键 字 像 创建 内 置 类 型 实例 一 样 创建 自 
定义 类 型 的 实例 。 不 过 ,构造 函数 模式 也 有 不 足 ， 主 要 是 其 成 员 无 法 重用 ,包括 函数 。 考 虑 到 
函数 本 身 是 松散 的 、 弱 类 型 的 ， 没 有 理由 证 函数 不 能 在 多 个 对 象 实例 间 共 享 。 

口 原型 模式 解决 了 成 员 共 享 的 问题 , 只 要 是 添加 到 构造 函数 prototype 上 的 属性 和 方法 就 可 以 共 
享 。 而 组 合 构造 函数 和 原型 模式 通过 构造 函数 定义 实例 属性 ， 通 过 原型 定义 共享 的 属性 和 方法 。 
JavaScript 的 继承 主要 通过 原型 链 来 实现 。 原 型 链 涉 及 把 构造 函数 的 原型 赋值 为 男 一 个 类 型 的 实例 。 

这 样 一 来 , 子 类 就 可 以 访问 父 类 的 所 有 属性 和 方法 ,就 像 基于 类 的 继承 那样 。 原 型 链 的 问题 是 所 有 继承 

的 属性 和 方法 都 会 在 对 象 实例 间 共 享 ,无 法 做 到 实例 私有 。 咨 用 构造 函数 模式 通过 在 子 类 构造 函数 中 调 

用 父 类 构造 函数 ， 可 以 避免 这 个 问题 。 这 样 可 以 让 每 个 实例 继承 的 属性 都 是 私有 的 , 但 要 求 类 型 只 能 通 

过 构造 函数 模式 来 定义 ( 因为 子 类 不 能 访问 父 类 原型 上 的 方法 )。 目 前 最 流行 的 继承 模式 是 组 合 继承 ， 

即 通 过 原型 链 继承 共享 的 属性 和 方法 ， 通 过 盗用 构造 函数 继承 实例 属性 。 

除 上 述 模式 之 外 ， 还 有 以 下 儿 种 继承 模式 。 

口 原型 式 继承 可 以 无 须 明 确定 义 构造 函数 而 实现 继承 ， 本 质 上 是 对 给 定 对 象 执 行 浅 复制 。 这 种 操 

作 的 结果 之 后 还 可 以 再 进一步 增强 。 

口 与 原型 式 继承 紧密 相关 的 是 寄生 式 继 承 ， 即 先 基 于 一 个 对 象 创建 一 个 新 对 象 ， 然 后 再 增强 这 个 
新 对 象 ， 最 后 返回 新 对 象 。 这 个 模式 也 被 用 在 组 合 继承 中 ， 用 于 避免 重复 调用 父 类 构造 函数 导 
致 的 浪费 。 

口 寄生 组 合 继承 被 认为 是 实现 基于 类 型 继承 的 最 有 效 方式 。 
ECMAScript 6 新 增 的 类 很 大 程度 上 是 基于 既 有 原型 机 制 的 语法 糖 。 类 的 语法 让 开发 者 可 以 优雅 地 定 

义 向 后 兼容 的 类 ， 既 可 以 继承 内 置 类 型 ， 也 可 以 继承 自 定 义 类 型 。 类 有 效 地 跨越 了 对 象 实例 、 对 象 原型 

和 对 象 类 之 间 的 鸿沟 。 


































































































































































































































































































第 中 间 
代理 与 反射 


本 章 内 容 

口 代理 基础 

口 代码 捕获 器 与 反射 方法 水 
口 代理 模式 视频 讲解 























ECMAScript 6 新 增 的 代理 和 反射 为 开发 者 提供 了 拦截 并 向 基本 操作 敬 入 额外 行为 的 能 力 。 具 体 地 
说 , 可 以 给 目标 对 象 定义 一 个 关联 的 代理 对 象 ， 而 这 个 代理 对 象 可 以 作为 抽象 的 目标 对 象 来 使 用 。 在 对 
目标 对 象 的 各 种 操作 影响 目标 对 象 之 前 ， 可 以 在 代理 对 象 中 对 这 些 操作 加 以 控制 。 

对 刚刚 接触 这 个 主题 的 开发 者 而 言 ,代理 是 一 个 比较 模糊 的 概念 ， 而 且 还 夹杂 着 很 多 新 术语 。 其 实 
只 要 看 几 个 例子 ， 就 很 容易 理解 了 。 























注意 在 ES6 之 前 ，ECMAScript 中 并 没有 类 似 代理 的 特性 。 由 于 代理 是 一 种 新 的 基础 性 
语言 能 力 ， 很 多 转译 程序 都 不 能 把 代理 行为 转换 为 之 前 的 ECMAScript 代码 ， 因 为 代理 的 


行为 实际 上 是 无 可 替代 的 。 为 此 ， 代 理 和 反射 只 在 百分之百 支持 它们 的 平台 上 有 用 。 可 以 
检测 代理 是 否 存在 ， 不 存在 则 提供 后 备 代码 。 不 过 这 会 导致 代码 宛 余 ， 因 此 并 不 推荐 。 





9.1 代理 基础 


正如 本 章 开 头 所 介绍 的 ,代理 是 目标 对 象 的 抽象 。 从 很 多 方面 看 ,代理 类 似 C++ 指针 ， 因 为 它 可 以 
用 作 目 标 对 象 的 蔡 身 , 但 又 完全 独立 于 目标 对 象 。 目标 对 象 既 可 以 直接 被 操作 , 也 可 以 通过 代理 来 操作 。 
但 直接 操作 会 绕 过 代理 施 予 的 行为 。 























注意 ” ECMAScript 代理 与 C++ 指针 有 重大 区 别 ， 后 面 会 再 讨论 。 不 过 作为 一 种 有 助 于 理 


解 的 类 比 ， 指 针 在 概念 上 还 是 比较 合适 的 结构 。 





9.1.1 创建 空 代理 


最 简单 的 代理 是 空 代理 ， 即 除了 作为 一 个 抽象 的 目标 对 象 ， 什 么 也 不 做 。 默 认 情 况 下 ,在 代理 对 象 
上 执行 的 所 有 操作 都 会 无 障碍 地 传播 到 目标 对 象 。 因 此 , 在 任何 可 以 使 用 目标 对 象 的 地 方 ， 都 可 以 通过 
同样 的 方式 来 使 用 与 之 关联 的 代理 对 象 。 

代理 是 使 用 Proxy 构造 函数 创建 的 。 这 个 构造 函数 接收 两 个 参数 ， 目标 对 象 和 处 理 程序 对 象 。 缺 
少 其 中 任何 一 个 参数 都 会 抛 出 TypeError。 要 创建 空 代理 ， 可 以 传 一 个 简单 的 对 象 字面 量 作为 处 理 程 
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序 对 象 ， 从 而 让 所 有 操作 畅通 无 阻 地 抵达 目标 对 象 。 

如 下 面 的 代码 所 示 , 在 代理 对 象 上 执行 的 任何 操作 实际 上 都 会 应 用 到 目标 对 象 。 唯 一 可 感知 的 不 同 
就 是 代码 中 操作 的 是 代理 对 象 。 

const target = { 


id: 'target' 
站 





const handler = {}; 
Const proxy = new Proxy (target, handler); 


// id 属性 会 访问 同一 个 值 
console.log(target.id); // target 
console.log (proxy.id); // target 


// 给 目标 属性 赋值 会 反映 在 两 个 对 象 上 
// 因为 两 个 对 象 访问 的 是 同一 个 值 


target.id = 'foo'; 
console.log(target.id); // foo 
console.log(proxy.id); // foo 


// 给 代理 属性 赋值 会 反映 在 两 个 对 象 上 
// 因为 这 个 赋值 会 转移 到 目标 对 象 


proxy.id = ‘'bar'; 
console.log(target.id); // bar 
console.log(proxy.id); // bar 


// hasOwnProperty () 方 法 在 两 个 地 方 

// 都 会 应 用 到 目标 对 象 
console.log(target.hasOwnProperty('id')); // true 
console.log(proxy.hasOwnProperty('id')); // true 





// Proxy.prototype 是 undefined 

// 因此 不 能 使 用 instanceof 操作 符 

console.log(target instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 

console.log(proxy instanceof Proxy); // TypeError: Function has non-object prototype 
'undefined' in instanceof check 





// 严格 相等 可 以 用 来 区 分 代理 和 目标 


console.log(target === proxy); // false 


9.1.2 定义 捕获 器 


使 用 代理 的 主要 目的 是 可 以 定义 捕获 器 (trap )。 捕获 器 就 是 在 处 理 程序 对 象 中 定义 的 “基本 操作 的 
拦截 器 "。 每 个 处 理 程序 对 象 可 以 包含 零 个 或 多 个 捕获 器 ， 每 个 捕获 器 都 对 应 一 种 基本 操作 ， 可 以 直接 
或 间接 在 代理 对 象 上 调用 。 每 次 在 代理 对 象 上 调用 这 些 基 本 操作 时 , 代理 可 以 在 这 些 操作 传播 到 目标 对 
象 之 前 先 调用 捕获 器 函数 ， 从 而 拦截 并 修改 相应 的 行为 。 






























































甫 获 器 ( trap ) 是 从 操作 系统 中 借用 的 概念 。 在 操作 系统 中 ， 捕 获 器 是 程序 流 中 的 
中 


一 个 同步 中 断 ， 可 以 暂停 程序 流 ， 转 而 执行 一 段子 例 程 ， 之 后 再 返回 原始 程序 流 。 
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例如 ， 可 以 定义 一 个 get () 捕获 器 , 在 ECMAScript 操作 以 某 种 形式 调用 get () 时 触发 。 下 面 的 例 








子 定义 了 一 个 get () 捕获 带 : 
const target = { 
too “har' 


上 














const handler = { 
// 捕获 器 在 处 理 程 序 对 象 中 以 方法 名 为 键 
get() { 
return 
} 
:> 


'handler override'; 


Const proxy = new Proxy (target, handler); 








这 样 ， 当 通过 代理 对 象 执行 get () 操作 时 ， 就 会 触发 定义 的 get () 捕获 器 。 当 然 ，get () 不 是 

















ECMAScript 对 象 可 以 调用 的 方法 。 这 个 操作 在 JavaScript 代码 











! 可 以 通过 多 种 形式 触发 并 被 get ( ) 捕获 





句 拦 截 到 。proxy [property]、 proxy .property 或 Object .create (proxy) [property] 等 操作 都 
会 触发 基本 的 get () 操作 以 获取 属性 。 因 此 所 有 这 些 操作 只 要 发 生 在 代理 对 象 上 , 就 会 触发 get () 捕获 
器 。 注 意 ， 只 有 在 代理 对 象 上 执行 这 些 操作 才 会 触发 捕获 器 。 在 目标 对 象 上 执行 这 些 操作 仍然 会 产生 正 








党 的 行为 。 
const target = { 
toos “Das” 


站 家 


const handler = { 
// 捕获 器 在 处 理 程 序 对 象 中 以 方法 名 为 键 
get () { 
return 
} 


'handler override'; 


const proxy = new Proxy (target, handler); 
console.log(target.foo); 


console.1log (proxy.foo); 


console. 
console. 


log(target['foo']); 
log (proxy['foo']); 


log(Object.create(target)['foo']); 
log (Object.create (proxy) ['foo']); 


console. 
console. 


9.1.3 ”捕获 器 参数 和 反射 API 


bar 
handler override 


bar 
handler override 


bar 
handler override 





所 有 捕获 器 都 可 以 访问 相应 的 参数 ， 基 于 这 些 参数 可 以 重建 被 捕获 方法 的 原始 行为 。 比 如 ，get () 
































捕获 器 会 接收 到 目标 对 象 、 要 查询 的 属性 和 代理 对 象 三 个 参数 。 
const target = { 
fo “bar” 


过 


const handler = { 


9.1 代理 基础 269 





get (trapTarget, property, receiver) { 


console.log(trapTarget === target); 
console.log(property); 
console.log(receiver === proxy); 


} 
于 


const proxy = new Proxy (target, handler); 


proxy .foo; 





// true 

// foo 

// true 

有 了 这 些 参数 ， 就 可 以 重建 被 捕获 方法 的 原始 行为 : 
const target = { 


foos, Tobar, 


二 


const handler = { 
get (trapTarget, property, receiver) { 
return trapTarget [propertyl]; 
} 
js 


const proxy = new Proxy (target, handler); 


console.log(proxy.foo); // bar 
console.log(target.foo); // bar 


所 有 捕获 器 都 可 以 基于 自己 的 参数 重建 原始 操作 , 但 并 非 所 有 捕获 器 行为 都 像 get () 那么 简单 。 因 
此 ,通过 手动 写 码 如 法 炮制 的 想法 是 不 现实 的 。 实 际 上 ， 开 发 者 并 不 需要 手动 重建 原始 行为 ， 而 是 可 以 
通过 调用 全 局 Reflect 对 象 上 ( 封装 了 原始 行为 ) 的 同名 方法 来 轻松 重建 。 

处 理 程序 对 象 中 所 有 可 以 捕获 的 方法 都 有 对 应 的 反射 (Reflect ) API 方法。 这 些 方法 与 捕获 带 拦 截 
的 方法 具有 相同 的 名 称 和 函数 签名 ， 而 且 也 具有 与 被 拦截 方法 相同 的 行为 。 因 此 , 使 用 反射 API 也 可 以 
像 下 面 这 样 定义 出 空 代理 对 象 : 


const target = { 
fo0s "bar’ 


上 




























































































const handler = { 
get() { 
return Reflect.get(...arguments); 
} 
} 


Const proxy = new Proxy (target, handler); 








console.log (proxy .foo); // bar 
console.log(target.foo); // bar 
其 至 还 可 以 写 得 更 简洁 一 些 : 

const target = { 


feo0:, "bar" 


}; 
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const handler = { 
get: Reflect.get 
3 


Const proxy = new Proxy (target, handler); 


console.log(proxy.foo); // bar 
console.log(target.foo); // bar 


事实 上 ,如 果真 想 创建 一 个 可 以 捕获 所 有 方法 ,然后 将 每 个 方法 转发 给 对 应 反映 API 的 空 代理 , 那 
































从 








至 不 需要 定义 处 理 程序 对 象 : 





const target = { 
foo: bar” 


地 
const proxy = new Proxy (target, Reflect); 


console.1log (proxy .foo); // bar 
console.log(target.foo); // bar 


反射 API 为 开发 者 准备 好 了 样板 代码 , 在 此 基础 上 开发 者 可 以 用 最 少 的 代码 修改 捕获 的 方法 。 比 如 ， 

















掉 的 代码 在 某 个 属性 被 访问 时 ， 会 对 返回 的 值 进行 一 番 修 饰 : 





const target = { 
foo Dares, 
Dass ou 


和 


const handler = { 
get (trapTarget, property, receiver) { 
let decoration = "" 


if (property === 'foo') { 
decoration = '!!l!l'; 
} 
return Reflect.get(...arguments) + decoration; 


} 
bs 


const proxy = new Proxy (target, handler); 


console.1log (proxy.foo); // bar!!! 
console.log(target.foo); // bar 
console.log (proxy .baz); // qux 
console.log(target.baz); // qux 


9.1.4 捕获 器 不 变 式 





< 





























使 用 捕获 器 几乎 可 以 改变 所 有 基本 方法 的 行为 ， 但 也 不 是 没有 限制 。 根 据 ECMAScript 规范 ， 每 个 





获 的 方法 都 知道 目标 对 象 上 下 文 、 捕 获 函 数 签 名 ， 而 捕获 处 理 程序 的 行为 必须 遵循 “捕获 器 不 变 式 ” 











(trap invariant )。 捕 获 器 不 变 式 因 方 法 不 同 而 异 ， 但 通常 都 会 防止 捕获 器 定义 出 现 过 于 反常 的 行为 。 























比如 ,如果 目标 对 象 有 一 个 不 可 配置 且 不 可 写 的 数据 属性 , 那么 在 捕获 器 返回 一 个 与 该 属性 不 同 的 

















值 时 ， 会 抛 出 TypeError: 
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const target = {}; 

Object .defineProperty (target, 'foo', { 
configurable: false, 
writable: false, 

Value: 'bar' 


}); 


const handler = { 
get () { 
return 'qux'; 
} 
于 


const proxy = new Proxy (target, handler); 


console.1log (proxy.foo); 
// TypeError 


.5 ”可 撤销 代理 


有 时 候 可 能 需要 中 断代 理 对 象 与 目标 对 象 之 间 的 联系 。 对 于 使 用 new Proxy () 创 建 的 普通 代理 来 
说 ， 这 种 联系 会 在 代理 对 象 的 生命 周期 内 一 直 持 续 存在 。 

Proxy 也 暴露 了 revocable () 方 法 ， 这 个 方法 支持 撤销 代理 对 象 与 目标 对 象 的 关联 。 撤 销 代 理 的 
操作 是 不 可 闭 的 。 而 且 ， 撤 销 函 数 (revoke () ) 是 寡 等 的 ， 调 用 多 少 次 的 结果 都 一 样 。 撤 销 代 理 之 后 
再 调用 代理 会 抛 出 TypeError。 

撤销 函数 和 代理 对 象 是 在 实例 化 时 同时 生成 的 : 


const target = { 
foDs "bar' 


9. 


一 人 





















































const handler = { 
get() { 
return 'intercepted'; 
} 





const { proxy, revoke } = Proxy.revocablel(target, handler);} 
console.log (proxy .foo); // intercepted 
console.log(target.foo); // bar 

revoke(); 

console.log (proxy .foo); // TypeError 


9.1.6 ”实用 反射 API 
某 些 情况 下 应 该 优先 使 用 反射 API， 这 是 有 一 些 理由 的 。 
1. 反射 AP|I 与 对 象 API 
在 使 用 反射 API 时 ， 要 记 住 : 
(1) 反射 API 并 不 限于 捕获 处 理 程序 ; 
(2) 大 多 数 反射 API 方 法 在 object 类 型 上 有 对 应 的 方法 。 
通常 ，object 上 的 方法 适用 于 通用 程序 ， 而 反射 方法 适用 于 细 粒 度 的 对 象 控制 与 操作 。 
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2. 状态 标记 








很 多 反射 方法 返回 称 作 “状态 标记 ”的 布尔 值 ， 表 示意 图 执行 的 操作 是 否 成 功 。 有 时 候 ， 状 态 标记 
比 那 些 返 回 修改 后 的 对 象 或 者 抛 出 错误 ( 取决 于 方法 ) 的 反射 API 方法 更 有 用 。 例 如 ， 可 以 使 用 反射 
API 对 下 面 的 代码 进行 重 构 : 





// 初始 代码 
const 0o = 


try { 














{}; 


Object .defineProperty(o, 'foo', 'bar'); 
console.log('success'); 


} catch(e) 


console.log('failure'); 


} 











在 定义 新 属性 时 如 果 发 生 问题 ，Reflect .defineProperty () 会 返回 false， 而 不 是 抛 出 错误 。 
因此 使 用 这 个 反射 方法 可 以 这 样 重 构 上 而 的 代码 : 
// 重 构 后 的 代码 














SONnsb oY 


if (Reflect 








站 


.defineProperty(o, 'foo', {value: 'bar'})) { 


console.log('success'); 


} else { 


console.log('failure'); 


} 


DQ Reflect 


以 下 反射 方法 都 会 提供 状态 标记 : 


.defineProperty () 








口 Reflect 
口 Ref]lect 
口 Ref]lect 
口 Ref]lect 








.preventExtensions () 
.SetPrototypeof() 
.Set() 
.deletePproperty () 





3. 用 一 等 函数 替代 操作 符 
以 下 反射 方法 提供 只 有 通过 操作 符 才 能 完成 的 操作 。 








口 Reflect .get(): 可 以 替代 对 象 属性 访问 操作 符 。 

口 Reflect.set(): 可 以 替代 = 赋值 操作 符 。 

口 Reflect .has(): 可 以 替代 in 操作 符 或 with ()。 

口 Reflect.dqeleteProperty(): 可 以 替代 delete 操作 符 。 
口 Reflect .construct(): 可 以 替代 nevw 操作 符 。 


4. 安全 地 应 用 函数 

在 通过 apply 方法 调用 函数 时 ,被 调用 的 函数 可 能 也 定义 了 自己 的 apply 
为 绕 过 这 个 问题 ， 可 以 使 用 定义 在 Function 原型 上 的 apply 方法 ， 比 如 : 

Function.prototype.apply.call (myFunc, thisVal, argumentList); 

这 种 可 怕 的 代码 完全 可 以 使 用 Reflect .apply 来 避免 : 


Reflect.apply (myFunc, thisVal, argumentsList); 





























屋 
上 凯 








性 (虽然 可 能 1 





生 极 小 )。 


9.1 代理 基础 273 





9.1.7 ”代理 另 一 个 代理 


代理 可 以 拦截 反射 API 的 操作 ， 而 这 意味 着 完全 可 以 创建 一 个 代理 , 通过 它 去 代理 男 一 个 代理 。 这 
样 就 可 以 在 一 个 目标 对 象 之 上 构建 多 层 拦截 网 : 


const target = { 
foo: 'bar' 


于 





const firstProxy = new Proxy (target, { 


kJ 汪 
console.log('first proxy'); 
return Reflect.get(...arguments); 


} 
人 


const secondProxy = new Proxy (firstProxy, { 


get() 1{ 
console.log('second proxy'); 
return Reflect.get(...arguments); 


} 
}) 3 


console.log(secondProxy .foo) ; 
// second proxy 

7 EFTPSt DELONY 

2/ bar 


9.1.8 代理 的 问题 与 不 足 

代理 是 在 ECMAScript 现 有 基础 之 上 构建 起 来 的 一 套 新 API， 因 此 其 实现 已 经 尽力 做 到 最 好 了 。 很 
大 程度 上 ， 代 理 作为 对 象 的 虚拟 层 可 以 正常 使 用 。 但 在 某 些 情况 下 ， 代 理 也 不 能 与 现在 的 ECMAScript 
机 制 很 好 地 协同 。 


1. 代理 中 的 this 
代理 潜在 的 一 个 问题 来 源 是 this 值 。 我 们 知道 ， 方 法 中 的 this 通常 指向 调用 这 个 方法 的 对 象 : 



































const target = { 
thisValEqualsProxy() { 
return this === proxy; 


} 
} 


Const proxy = new Proxy (target, {}); 


console.log(target.thisValEqualsProxy()); // false 
console.log (proxy.thisValEqualsProxy ()); // true 


从 直觉 上 讲 ， 这 样 完全 没有 问题 : 调用 代理 上 的 任何 方法 ， 比 如 proxy .outerMethod() ， 而 这 个 
方法 进而 又 会 调用 另 一 个 方法 ， 如 this .innerMethod() ， 实 际 上 都 会 调用 proxv .innerMethod()。 
多 数 情 况 下 ， 这 是 符合 预期 的 行为 。 可 是 ， 如 果 目 标 对 象 依赖 于 对 象 标识 ， 那 就 可 能 碰 到 意料 之 外 的 




















还 记得 第 6 章 中 通过 WeakMap 保存 私有 变量 的 例子 吧 ， 以 下 是 它 的 简化 版 : 
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const wm = new WeakMap () 


class User { 
constructor(userId) { 
wm.set (this, userId); 


} 


set id(userId) { 
wm.set (this, userId); 


: 


get id() { 
return wm.get (this); 
} 
} 


由 于 这 个 实现 依赖 User 实例 的 对 象 标 识 ， 在 这 个 实例 被 代理 的 情况 下 就 会 出 问题 : 


const user = new User(123); 
console.log(user.id); // 123 





const userIinstanceProxy = new Proxy (user, {}); 
console.log(userIinstanceProxy.id); // undefined 


这 是 因为 User 实例 一 开始 使 用 目标 对 象 作 为 WeakMap 的 键 ， 代 理 对 象 却 尝 试 从 自身 取得 这 个 实 
例 。 要 解决 这 个 问题 ， 就 需要 重新 配置 代理 ， 把 代理 User 实例 改 为 代理 User 类 本 身 。 之 后 再 创建 代 
理 的 实例 就 会 以 代理 实例 作为 weakMap 的 键 了 : 


const UserClassProxy = new Proxy (User, {}); 
const proxyUser = new UserClassProxy (456);} 
console.log (proxyUser.id); 


2. 代理 与 内 部 槽 位 

代理 与 内 置 引 用 类 型 ( 比如 Array ) 的 实例 通常 可 以 很 好 地 协同 , 但 有 些 ECMAScript 内 置 类 型 可 
能 会 依赖 代理 无 法 控制 的 机 制 ， 结 果 导 致 在 代理 上 调用 某 些 方法 会 出 错 。 

一 个 典型 的 例子 就 是 Date 类 型 。 根据 ECMAScript 规范 ，Date 类 型 方法 的 执行 依赖 this 值 上 的 
内 部 槽 位 [ [INumberDate] ] 。 代 理 对 象 上 不 存在 这 个 内 部 槽 位 ， 而 且 这 个 内 部 覃 位 的 值 也 不 能 通过 善 通 
的 get () 和 set () 操作 访问 到 ， 于 是 代理 拦截 后 本 应 转发 给 目标 对 象 的 方法 会 抛 出 TypeError: 


const target = new Date(); 
const proxy = new Proxy (target, {}); 












































































































































console.log(proxy instanceof Date); // true 


proxy.getDate(); // TypeError: 'this' is not a Date object 


9.2 ”代理 捕获 器 与 反射 方法 

代理 可 以 捕获 13 种 不 同 的 基本 操作 。 这 些 操作 有 各 自 不 同 的 反射 API 方 法 、 参 数 、 关 联 ECMAScript 
操作 和 不 变 式 。 

正如 前 面 示例 所 展示 的 ， 有 几 种 不 同 的 JavaScript 操作 会 调用 同一 个 捕获 器 处 理 程序 。 不 过 ， 对 于 
在 代理 对 象 上 执行 的 任何 一 种 操作 ， 只 会 有 一 个 捕获 处 理 程序 被 调用 。 不 会 存在 重复 捕获 的 情况 。 

只 要 在 代理 上 调用 ， 所 有 捕获 器 都 会 拦截 它们 对 应 的 反射 API 操作 。 
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9.2.1 get() 
get () 捕获 右 会 在 获取 属性 值 的 操作 中 被 调用 。 对 应 的 反射 API 方 法 为 Reflect.get()。 
const myTarget = {}; 


const proxy = new Proxy (myTarget, { 
get (target, property, receiver) { 
console.log('get ()'); 
return Reflect.get(...arguments) 
} 
3 


proxy .foo; 
ZGet() 


1. 返回 值 

返回 值 无 限制 。 

2. 拦截 的 操作 

口 broxy .property 

口 proxy [property] 

DQ Object.create (proxy) [property] 





DQ Reflect.get (proxy, property, receiver) 
3. 捕获 器 处 理 程序 参数 

口 target: 目标 对 象 。 

口 property: 引用 的 目标 对 象 上 的 字符 串 键 属性 。” 
口 receiver: 代理 对 象 或 继承 代理 对 象 的 对 象 。 

4. 捕获 器 不 变 式 
如 果 target .property 不 可 写 且 不 可 配置 , 则 处 理 程序 返回 的 值 必须 与 target .property 匹配 。 

如 果 target .property 不 可 配置 且 [ [Get]1] 特 性 为 undefined, 处 理 程序 的 返回 值 也 必须 是 undefined。 9 





























9.2.2 set() 
set () 捕获 器 会 在 设置 属性 值 的 操作 中 被 调用 。 对 应 的 反射 API 方 法 为 Reflect .set()。 
const myTarget = {}; 


Const proxy = new Proxy (myTarget, { 
set (target, property, value, receiver) { 
console.log('set ()'); 


return Reflect.set(...arguments) 
} 
> 
brEoxystoO0 ss “har.y 
// set() 
1. 返回 值 





返回 true 表示 成 功 ; 返回 false 表示 失败 ， 严 格 模式 下 会 抛 出 TypeError。 











Qz 严格 来 讲 ，property 参数 除了 字符 串 键 ， 也 可 能 是 符号 (symbol ) 键 。 后 面 几 处 也 一 样 。 一 一 译 者 注 
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2. 拦截 的 操作 

口 broxy .property = value 

DQ proxy [property] = value 

DQ Object . create (proxy) [property] = value 

D Reflect.set (proxy, property, value, receiver) 
3. 捕获 器 处 理 程 序 参 数 

D target: 目标 对 象 。 

口 property: 引用 的 目标 对 象 上 的 字符 串 键 属 1 
D value: 要 赋 给 属性 的 值 。 

口 receiver: 接收 最 初 赋值 的 对 象 。 

4. 捕获 器 不 变 式 

如 果 target .property 不 可 写 且 不 可 配置 ， 则 不 能 修改 目标 属性 的 值 。 

如 果 target .property 不 可 配置 且 [1Set]] 特 性 为 undefined， 则 不 能 修改 目标 属性 的 值 。 
在 严格 模式 下 ， 处 理 程序 中 返回 false 会 抛 出 TypeError。 


9.2.3 has() 
has () 捕获 带 会 在 in 操作 符 中 被 调用 。 对 应 的 反射 API 方 法 为 Reflect.has()。 


const myTarget = {}; 








el 






























































const proxy = new Proxy (myTarget, { 
has (target, property) { 
console.log('has()'); 
return Reflect.has(...arguments) 
} 
bs 


'foo' in proxy; 
// has'() 


1. 返回 值 

has () 必须 返回 布尔 值 ， 表 示 属 性 是 否 存在 。 返 回 非 布尔 值 会 被 转型 为 布尔 值 。 
2. 拦截 的 操作 

D property in proxy 

D property in Object.create (proxy) 
Dwith(proxy) {(property);} 

D Reflect.has (proxy, property) 

3. 捕获 器 处 理 程序 参数 

口 target: 目标 对 象 。 

口 property: 引用 的 目标 对 象 上 的 字符 串 键 
4. 捕获 器 不 变 式 
如 果 target .property 存在 且 不 可 配置 ， 则 处 理 程序 必须 返回 true。 

如 果 target .property 存在 且 目 标 对 象 不 可 扩展 ， 则 处 理 程 序 必 须 返 回 true。 
































性 。 





再 
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9.2.4 defineProperty() 
defineProperty () 捕 获 器 会 在 object .defineProperty () 中 被 调用 。 对 应 的 反射 API 方法 为 


Reflect.dqefineProperty () 。 








const myTarget = {}; 


Const proxy = new Proxy (myTarget, { 
defineProperty (target, property, descriptor) { 
console.log('defineProperty()'); 
return Reflect.definePproperty(...arguments) 
} 
} 


Object .defineProperty (proxy, 'foo', { value: 'bar' }); 

// definePproperty () 

1. 返回 值 

defineProperty () 必 须 返 回 布尔 值 ， 表 示 属 性 是 否 成 功 定 义 。 返 回 非 布尔 值 会 被 转型 为 布尔 值 。 

2. 拦截 的 操作 

口 Object .dqefineProperty (proxy, property, descriptor) 

DQ Reflect.defineproperty (proxy, property, descriptor) 

3. 捕获 器 处 理 程序 参数 

口 target: 目标 对 象 。 

口 property: 引用 的 目标 对 象 上 的 字符 串 键 属性 。 

DQ descriptor: 包含 可 选 的 enumerable、 configurable、writable、value、get 和 set 
定义 的 对 象 。 

4. 捕获 器 不 变 式 

如 果 目 标 对 象 不 可 扩展 ， 则 无 法 定义 属性 。 

如 果 目 标 对 象 有 一 个 可 配置 的 属性 ， 则 不 能 添加 同名 的 不 可 配置 

如 果 目 标 对 象 有 一 个 不 可 配置 的 属性 ， 则 不 能 添加 同名 的 可 配置 
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性 。 9 
性 。 


可 





三 


9.2.5 getOwnPropertyDescriptor() 


getownPropertyDescriptor() 捕获 器 会 在 object .getownPropertyDescriptor() 中 被 调 
用 。 对 应 的 反射 API 方 法 为 Reflect.getOownPropertyDescriptor ()。 


const myTarget = {}; 














const proxy = new Proxy (myTarget, { 
getOwnPropertyDescriptor (target, property) { 
console.log('getOwnPropertyDescriptor()'); 
return Reflect.getOwnPropertyDescriptor(...arguments) 
} 
}); 


Object .getOwnPropertyDescriptor (proxy, 'foo'); 
// getOwnPropertyDescriptor () 


1. 返回 值 
getOwnPropertyDescriptor () 必 须 返 回 对 象 ， 或 者 在 属性 不 存在 时 返回 undefined。 
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2. 拦截 的 操作 


3. 捕获 器 处 理 程序 参数 
口 target: 目标 对 象 。 








4. 捕获 器 不 变 式 


口 object .getOwnPropertyDescriptor (proxy, property) 
口 Reflect .getOwnPropertyDescriptor (proxy, property) 





口 property: 引用 的 目标 对 象 上 的 字符 串 键 属 性 。 














如 果 自 有 的 target .property 存在 且 不 可 配置 , 则 处 理 程 序 必须 返回 一 个 表示 该 属性 存在 的 


对 象 。 























如 果 自 有 的 target .property 存在 日 











可 配置 ， 则 处 理 程序 必须 返回 表示 该 属性 可 配置 的 对 象 。 























如 果 自 有 的 target .property 存在 日 





target 不 可 扩展 , 则 处 理 程序 必须 返回 一 个 表示 该 属性 存 





在 的 对 象 。 








性 不 存在 。 











9.2.6 deleteProperty() 


deleteProperty () 捕获 融会 在 del 
deleteProperty()o 


const myTarget = {}; 


const proxy = new Proxy (myTarget 


如 果 target .property 不 存在 且 target 不 可 扩展 ， 则 处 理 程序 必须 返回 undefined 表示 该 属 











nl 














如 果 target .property 不 存在 ， 则 处 理 程序 不 能 返回 表示 该 属性 可 配置 的 对 象 。 














ete 操作 符 中 被 调用 。 对 应 的 反射 API 方法 为 Reflect. 


p2 


deleteProperty (target, property) { 


console.log('deletePropertyl 


) 有 


return Reflect.dqeleteProperty(.. .arguments) 


} 
a 


delete proxy.foo 
// deleteProperty () 


1. 返回 值 
deleteProperty () 必须 返回 布尔 值 ， 
2. 拦截 的 操作 


口 delete proxy.property 





D delete proxy [property] 





3. 捕获 器 处 理 程序 参数 
D target: 目标 对 象 。 








4. 捕获 器 不 变 式 


口 property: 引用 的 目标 对 象 上 的 字符 串 键 


表示 删除 属性 是 否 成 功 。 返 回 非 布尔 值 会 被 转型 为 布尔 值 。 


D Reflect.deleteProperty (proxy, property) 





性 。 





再 











如 果 自 有 的 target .property 存在 | 


日 不 可 配置 ， 则 处 理 程序 不 能 删除 这 个 属性 。 
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9.2.7 ownKeys () 
ownKeys ( ) 捕获 器 会 在 object .keys () 及 类 似 方法 中 被 调用 。 对 应 的 反射 API 方 法 为 Reflect . 


ownKeys () 。 





const myTarget = {}; 


const proxy = new Proxy (myTarget, { 
ownKeys (target) { 
console.log('ownKeys()'); 
return Reflect.ownKeys(...arguments) 
} 
} 3 


Object.keys (proxy); 

// ownKeys () 

1. 返回 值 

ownKeys () 必须 返回 包含 字符 串 或 符号 的 可 枚 举 对 象 。 
2. 拦截 的 操作 

口 Object .getOwnPropertyNames (proxy) 

口 Object.getOwnPropertySymbols (proxy) 

口 Object.keys (proxy) 

DQ Reflect .ownKeys (proxy) 

3. 捕获 器 处 理 程序 参数 

口 target: 目标 对 象 。 

4. 捕获 器 不 变 式 

返回 的 可 枚 举 对 象 必须 包含 target 的 所 有 不 可 配置 的 自 有 属性 。 

如 果 target 不 可 扩展 ， 则 返回 可 枚 举 对 象 必须 准确 地 包含 自 有 属性 键 。 


9.2.8 getPrototypeofE () 9 


getPrototypeof () 捕 获 器 会 在 object .getPrototypeof () 中 被 调用 。 对 应 的 反射 API 方法 为 
Reflect.getPrototypeOf ()。 


















































const myTarget = {}; 


const proxy = new Proxy (myTarget, { 
getPrototypeOof (target) { 
console.log('getPrototypeof ()'); 
return Reflect .getPrototypeof (...arguments) 
小 
}); 


Object .getPrototypeOf (proxy); 
// getPrototypeof() 


1. 返回 值 
getPrototypeof () 必须 返回 对 象 或 null。 
2. 拦截 的 操作 


口 Object .getPrototypeOf (proxy) 
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口 Reflect .getPrototypeOf (proxy) 
D proxy._ proto 
口 Object.prototype.isPrototypeOf (proxy) 
口 broxy instanceof Object 
3. 捕获 器 处 理 程序 参数 
D target: 目标 对 象 。 
4. 捕获 器 不 变 式 
如 果 target 不 可 扩展 ， 则 object .getPrototypeOf (Proxy) 唯 一 有 效 的 返回 值 就 是 object . 
getPrototypeOf (target) 的 返回 值 。 














9.2.9 setPrototypeof () 


setPrototypeof () 捕 获 器 会 在 object .setPrototypeof () 中 被 调用 。 对 应 的 反射 API 方法 为 
Reflect.setPrototypeof () 。 



































const myTarget = {}; 


const proxy = new Proxy (myTarget, { 
SetPrototypeoft (target, prototype) { 
console.log('setPrototypeof ()'); 
return Reflect.setPrototypeof (...arguments) 
} 
让 


Object.setPrototypeOf (proxy, Object); 
// SetPrototypeoOf () 


1. 返回 值 

setPrototypeof () 必须 返回 布尔 值 ， 表 示 原 型 赋值 是 否 成 功 。 返 回 非 布尔 值 会 被 转型 为 布尔 值 。 
2. 拦截 的 操作 

DQ Object.setPrototypeOf (proxy) 

DQ Reflect.setPrototypeOf (proxy) 


3. 捕获 器 处 理 程序 参数 
D target: 目标 对 象 。 
D prototype: target 的 替代 原型 ， 如 果 是 顶级 原型 则 为 nul1l。 
4. 捕获 器 不 变 式 
如 果 target 不 可 扩展 , 则 唯一 有 效 的 prototype 参数 就 是 object .getPrototypeOf (target) 
的 返回 值 。 


























9.2.10 isExtensible() 
isExtensible() 捕获 器 会 在 object.isExtensible() 中 被 调用 。 对 应 的 反射 API 方法 为 


Reflect.isExtensible()。 





























const myTarget = {}; 


const proxy = new Proxy (myTarget, { 
isExtensible(target) { 
console.log('isExtensible()'); 
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return Reflect.isExtensible(...arguments) 
J} 
过 


Object .isExtensible (proxy); 
// isExtensible!() 


1. 返回 值 
isExtensible() 必 须 返回 布尔 值 ， 表 示 target 是 否 可 扩展 。 返 回 非 布尔 值 会 被 转型 为 布尔 值 。 


2. 拦截 的 操作 

口 Object .isExtensible (proxy) 

口 Reftlect .isExtensible (proxy) 

3. 捕获 器 处 理 程 序 参 数 

口 target: 目标 对 象 。 

4. 捕获 器 不 变 式 

如 果 target 可 扩展 ， 则 处 理 程序 必须 返回 true。 
如 果 target 不 可 扩展 ， 则 处 理 程序 必须 返回 false。 















































9.2.11 preventExtensions() 


preventExtensions () 捕 获 器 会 在 object .preventExtensions () 中 被 调用 。 对 应 的 反射 API 
方法 为 Reflect .preventExtensions ()。 

















const myTarget = {}; 


const proxy = new Proxy (myTarget, { 
preventExtensions (target) { 
console.log('preventExtensions()'); 
return Reflect.preventExtensions(...arguments) 
} 
es 





Object .preventExtensions (proxy); 
// preventExtensions() 


1. 返回 值 
preventExtensions() 必 须 返回 布尔 值 ， 表 示 target 是 否 已 经 不 可 扩展 。 返 回 非 布尔 值 会 被 转 
型 为 布尔 值 。 
2. 拦截 的 操作 
口 Object.preventExtensions (proxy) 
DQ Reflect.preventExtensions (proxy) 
3. 捕获 器 处 理 程序 参数 
口 target: 目标 对 象 。 


4. 捕获 器 不 变 式 
如 果 object .isExtensible (proxy) 是 false， 则 处 理 程序 必须 返回 true。 






































9.2.12 apply() 
apply () 捕获 器 会 在 调用 函数 时 中 被 调用 。 对 应 的 反射 API 方 法 为 Reflect .apply ()。 
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const myTarget = () => {}; 


const proxy = new Proxy (myTarget, { 
apply (target, thisArg, ...argumentsList) { 
console.log('apply()'); 
return Reflect.apply(...arguments) 
} 
3 


proxy (); 
// apply () 


1. 返回 值 

返回 值 无 限制 。 

2. 拦截 的 操作 

DQ proxy(...argumentsList) 

DQ Function.prototype.apply (thisArg, argumentsList) 
D Function.prototype.call (thisArg, ...argumentsList) 
D Reflect.apply (target, thisArgument, argumentsList) 


3. 捕获 器 处 理 程序 参数 

口 target: 目标 对 象 。 

D thisArg: 调用 函数 时 的 this 参数 。 

口 argumentsList: 调用 函数 时 的 参数 列表 
4. 捕获 器 不 变 式 

target 必须 是 一 个 函数 对 象 。 















































9.2.13 “ construct () 
construct () 捕 获 带 会 在 new 操作 符 中 被 调用 。 对 应 的 反射 API 方法 为 Reflect.construct () 。 


const myTarget = function() {}; 


const proxy = new Proxy (myTarget, { 
construct (target, argumentsList, newTarget) { 
console.log('construct () ') 
return Reflect.construct(...arguments) 
} 
上 


new proxy; 
// construct() 


1. 返回 值 

construct () 必须 返回 一 个 对 象 。 

2. 拦截 的 操作 

D new proxy(...argumentsList) 

DQ Reflect.construct (target, argumentsList, newTarget) 


3. 捕获 器 处 理 程序 参数 
口 target: 目标 构造 两 数 。 
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口 argumentsList: 传 给 日 标 构 造 函 数 的 参数 列表 。 
口 newTarget: 最 初 被 调用 的 构造 函数 。 

4. 捕获 器 不 变 式 

target 必须 可 以 用 作 构 造 函 数 。 


9.3 ”代理 模式 
使 用 代理 可 以 在 代码 中 实现 一 些 有 用 的 编程 模式 。 
9.3.1 跟踪 属性 访问 


通过 捕获 get 、set 和 has 等 操作 ， 可 以 知道 对 象 属性 什么 时 候 被 访问 、 被 查询 。 把 实现 相应 捕获 
器 的 某 个 对 象 代理 放 到 应 用 中 ， 可 以 监控 这 个 对 象 何 时 在 何 处 被 访问 过 : 


const user = { 
name: 'Jake' 















































站 


Const proxy = new Proxy (user, { 
get (target, property, receiver) { 
console.log( ‘Getting S${property}.); 


return Reflect.get(...arguments); 
} 
set (target, property, value, receiver) { 

console.log( Setting S${property}=${value}. ); 











return Reflect.set(...arguments); 
} 
上 


proxy .name; // Getting name 
proxy.age = 27; // Setting age=27 





9.3.2 ”隐藏 属性 
代理 的 内 部 实现 对 外 部 代码 是 不 可 见 的 ， 因 此 要 隐藏 目标 对 象 上 的 属性 也 轻而易举 。 比 如 : 





const hiddenProperties = ['foo', 'bar']; 
const targetObject = { 

f 避 加 汪 

Bars: ,25 

baz: 3 


const proxy = new Proxy (targetObject, { 
get (target, property) { 
if (hiddenProperties.includes (property)) { 
return undefined; 
} else 1{ 
return Reflect.get(...arguments); 
} 
has (target, property) { 
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if (hiddenProperties.includes (property)) { 
return false; 


} else { 
return Reflect.has(...arguments); 
} 
} 
js 
// get() 
console.log(proxy.foo); // undefined 
console.log(proxy.bar); // undefined 
console.log(proxy.baz); // 3 
// has() 
console.log('foo' in proxy); // false 
console.log('bar' in proxy); // false 
console.log('baz' in proxy); // true 


9.3.3 ”属性 验证 
因为 所 有 赋值 操作 都 会 触发 set () 捕获 器 ， 所 以 可 以 根据 所 赋 的 值 决定 是 允许 还 是 拒绝 赋值 


const target = { 
onlyNumbersGoHere: 0 





3 








二 


Const proxy = new Proxy (target, { 
set (target, property, value) { 


if (typeof value !== 'number') { 
return false; 

} else { 
return Reflect.set(...arguments); 


} 
地 


PEOxXy .onl1yNumbersGoHere = 1; 


console.log(proxy.onlyNumbersGoHere); // 1 
proxy .onlyNumbersGoHere = '2'， 
console.log(proxy.onlyNumbersGoHere); // 1 


9.3.4 ”函数 与 构造 函数 参数 验证 
中 保护 和 验证 对 象 属性 类 似 ,， 也 可 对 函数 和 构造 函数 参数 进行 审查 。 比 如 ,可 以 让 函数 只 接收 某 种 
类 型 的 值 : 


function median(...nums) { 
return nums.sort() [Math.floor(nums.length / 2)]; 








} 


const proxy = new Proxy (median, { 
apply (target, thisArg, argumentsList) { 
for (const arg of argumentsList) { 
if (typeof arg !== 'number') { 
throw 'Non-number argument provided'; 
} 
} 
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return Reflect.apply(...arguments); 
} 
i 


console.log(proxy (4, 7, 1)); // 4 
console.log(proxy (4, '7', 1)); 
// Error: Non-number argument provided 


类 似 地 ， 可 以 要 求实 例 化 时 必须 给 构造 函数 传 参 : 


class User { 
constructor(id) { 
加 S14 
} 
} 





Const proxy = new Proxy (User, { 
construct (target, argumentsList, newTarget) { 
if (argumentsList[0] === undefined) { 
throw 'User cannot be instantiated without id'; 
} else { 
return Reflect.construct(...arguments); 


} 
}) 
new proxy (1);} 


new proxy (); 
// Error: User cannot be instantiated without id 


9.3.5 数据 绑 定 与 可 观察 对 象 
通过 代理 可 以 把 运行 时 中 原本 不 相关 的 部 分 联系 到 一 起 。 这 样 就 可 以 实现 各 种 模式 ,从 而 让 不 同 的 








证 





代码 互 操作 。 
比如 ， 可 以 将 被 代理 的 类 绑 定 到 一 个 全 局 实例 集合 ， 证 所 有 创建 的 实例 都 被 添加 到 这 个 集合 中 : 9 


const userList = []; 


class User { 
constructor (name) { 
this.name_ = name; 
} 
} 





Const proxy = new Proxy (User, { 
construct() { 
const newUser = Reflect.construct(...arguments); 
userList.push (newUser); 
return newUser; 


new proxy ('John'); 
new proxy ('Jacob'); 
new proxy ('Jingleheimerschmidqdt'); 


console.log(userList); // [User {}, User {}, User{}] 
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另外 ， 还 可 以 把 集合 绑 定 到 一 个 事件 分 派 程序 ， 每 次 插入 新 实例 时 都 会 发 送 消息 : 





const userList = []; 


function emit (newValue) { 
console.log (newValue); 


} 


const proxy = new Proxy (userList, { 
set (target, property, value, receiver) { 
const result = Reflect.set(...arguments); 
if (result) { 
emit (Reflect.get (target, property, receiver)); 
} 
return result; 
} 
下 


proxy .push('John'); 
// John 
proxy .push('Jacob'); 
// Jacob 


9.4 小 结 











代理 是 ECMAScript 6 新 增 的 令 人 兴奋 和 动态 十 足 的 新 特性 。 尽 管 不 支持 向 后 兼容 ， 但 它 开辟 出 了 





一 片 前 所 未 有 的 JavaScript 元 编程 及 抽象 的 新 天 地 。 














从 宏观 上 看 , 代理 是 真实 JavaScript 对 象 的 透明 抽象 层 。 代 理 可 








以 定义 包含 捕获 器 的 处 理 程序 对 象 ， 


而 这 些 捕获 器 可 以 拦截 绝 大 部 分 JavaScript 的 基本 操作 和 方法 。 在 这 个 捕获 器 处 理 程序 中 ， 可 以 修改 任 


何 基本 操作 的 行为 ， 当 然 前 提 是 遵从 捕获 器 不 变 式 。 


























与 代理 如 影 随 形 的 反射 API， 则 封装 了 一 整套 与 捕获 器 拦截 的 操作 相对 应 的 方法 。 可 以 把 反射 API 
看 作 一 套 基 本 操作 ， 这 些 操作 是 绝 大 部 分 JavaScript 对 象 API 的 基础 。 











代理 的 应 用 场景 是 不 可 限量 的 。 开 发 者 使 用 它 可 以 创建 出 各 种 编 























人 码 模式 ， 比 如 (但 远 远 不 限于 ) 跟 








踪 属 性 访问 、 隐 藏 属性 、 阻 止 修改 或 删除 属性 、 函 数 参数 验证 、 构 造 函 数 参 数 验 证 、 数 据 绑 定 ， 以 及 可 





观察 对 象 。 


% (0 = 
呈 数 


本 章 内 容 

口 函数 表达 式 、 函 数 声明 及 箭头 函数 
口 默认 参数 及 扩展 操作 符 

口 使 用 函数 实现 递归 

口 使 用 闭 包 实现 私有 变量 














函数 是 ECMAScript 中 最 有 意思 的 部 分 之 一 ,这 主要 是 因为 函数 实际 上 是 对 象 。 每 个 函数 都 是 Function 

类 型 的 实例 , 而 function 也 有 属性 和 方法 ，, 跟 其 他 引用 类 型 一 样 。 因 为 函数 是 对 象 ， 所 以 函数 名 就 是 

指向 函数 对 象 的 指针 ， 而 且 不 一 定 与 孙 数 本 身 紧密 绑 定 。 函 数 通 常 以 函数 声明 的 方式 定义 ， 比 如 : 
function sum (numl, num2) { 


return numl + num2; 


} 


注意 函数 定义 最 后 没有 加 分 号 。 
另 一 种 定义 函数 的 语法 是 函数 表达 式 。 函 数 表 达 大 式 与 函数 声明 几乎 是 等 价 的 : 


let sum = function(numl, num2) { 
return numl + num2; 
}; 
这 里 ， 代 码 定义 了 一 个 变量 sum 并 将 其 初始 化 为 一 个 函数 。 注 意 function 关键 字 后 面 没有 名 称 ， 
因为 不 需要 。 这 个 也 数 可 以 通过 变量 sum 来 引用 。 
注意 这 里 的 函数 末尾 是 有 分 号 的 ， 与 任何 变量 初始 化 语句 一 样 。 
还 有 一 种 定义 函数 的 方式 与 函数 表达 式 很 像 ， 叫 作 “ 箭 头 函 数 ”( arrow function )， 如 下 所 示 : 


Te sun = "(ntily rum2) Sx 全 
return numl + num2; 


}; 

最 后 一 种 定义 函数 的 方式 是 使 用 Function 构造 函数 。 这 个 构造 函数 接收 任意 多 个 字符 串 参 数 , 最 
后 一 个 参数 始终 会 被 当成 函数 体 ， 而 之 前 的 参数 都 是 新 函数 的 参数 。 来 看 下 面 的 例子 : 

let sum = new Function("numl", "num2", "return numl + num2"); // 不 推荐 

我 们 不 推荐 使 用 这 种 语法 来 定义 函数 ， 因 为 这 段 代码 会 被 解释 两 次 : 第 一 次 是 将 它 当 作 常 规 
ECMAScript 代码 ， 第 二 次 是 解释 传 给 构造 函数 的 字符 串 。 这 显然 会 影响 性 能 。 不 过 ， 把 函数 想象 为 对 
象 ， 把 函数 名 想象 为 指针 是 很 重要 的 。 而 上 面 这 种 语法 很 好 地 诠释 了 这 些 概念 。 























































































































注意 ”这 几 种 实例 化 函数 对 象 的 方式 之 间 存 在 微妙 但 重要 的 差别 ， 本 章 后 面 会 讨论 。 无 论 


如 何 ， 通 过 其 中 任何 一 种 方式 都 可 以 创建 函数 。 
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10.1 箭头 函数 











ECMAScript 6 新 增 了 使 用 胖 箭头 〈 => ) 语法 定义 函数 表达 式 的 能 力 。 很 大 程度 上， 箭头 函 数 实例 
化 的 函数 对 象 与 正式 的 函数 表达 式 创建 的 函数 对 和 象 行为 是 相同 的 。 任何 可 以 使 用 函数 表达 式 的 地 方 ， 都 











可 以 使 用 箭头 函数 : 


let arrowSum = (a, b) => { 
return a + b; 


let functionExpressionSum = function(a, b) { 
return a + b; 


下 


console.log(arrowSum(5, 8)); // 13 
console.log(functionExpressionSum(5, 8)); // 13 


箭头 函数 简洁 的 语法 非常 适合 诸 入 函数 的 场景 : 


人世 Ints Ss" [1 2 3]3 








console.log(ints.map(function(i) { return i + 1; })); // [2, 3, 4] 
console.log(ints.map((i) => { return i + 1 })); Fb 





如 果 只 有 一 个 参数 , 那 也 可 以 不 用 括号 。 只 有 没有 参数 , 或 者 多 个 参数 的 情况 下 , 才 需 要 使 用 括号 : 


// 以 下 两 种 写法 都 有 效 
let double 证 
let triple > 


// 没有 参数 需要 括号 


Jet getRandom = () => { return Math.random(); }; 


// 多 个 参数 需要 括号 


let Sum 人 e, (a DPD) SS { EEUU va 中 DD 


// 无 效 的 写法 : 
let multiply = a, b => { return a * b; }; 


箭头 函数 也 可 以 不 用 大 括号 ， 但 这 样 会 改变 函数 的 行为 。 使 用 大 括号 就 说 明 包 含 “函数 体 ”， 
































任 一 个 天 中介 人 多 鲈 站 ， 限 和 的 本 下 样 。 如 果 不 使 用 大 括号 , 那么 箭头 后 面 就 只 能 有 一 行 代码 ， 








比如 一 个 赋值 操作 ， 或 者 一 个 表达 式 。 而 且 ， 省 略 大 括号 会 隐 式 返回 这 行 代码 的 值 : 
// 以 下 两 种 写法 都 有 效 ， 而 且 返 回 相 应 的 值 





Jet double = (x) => { return 2 * x; }; 
Et 失 到 从 于 站 三 1 人 仿生 三 3 

// 可 以 赋值 

let value = {}; 

Jet setName = (x) => x.name = "Matt"; 


setName (value); 
console.log(value.name); // "Matt" 


// 无 效 的 写法 : 


let multiply = (a, b) => return a * b; 

















箭头 函数 虽然 语法 简洁 ， 但 也 有 很 多 场合 不 适用 。 箭 头 函 数 不 能 使 用 arguments 、super 和 














new.tatrget， 也 不 能 用 作 构 造 函 数 。 此 外 ， 箭 头 函 数 也 没有 prototype 属性 。 
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10.2 ”函数 名 


因为 函数 名 就 是 指向 函数 的 指针 , 所 以 它们 跟 其 他 包含 对 象 指针 的 变量 具有 相同 的 行为 。 这 意味 着 
一 个 函数 可 以 有 多 个 名 称 ， 如 下 所 示 : 


function sum(numl, num2) { 
return numl + num2; 


} 








console.log(sum(10, 10)); // 20 


let anotherSum = sum; 
console.log(anotherSum(10, 10)); // 20 


SU nlls 
console.log(anotherSum(10, 10)); // 20 


以 上 代码 定义 了 一 个 名 为 sum() 的 函数 ,用 于 求 两 个 数 之 和 ,然后 又 声明 了 一 个 变量 anotherSum， 
并 将 它 的 值 设置 为 等 于 sum。 注 意 ， 使 用 不 带 括号 的 男 数 名 会 访问 函数 指针 ， 而 不 会 执行 函数 。 此 时 ， 
anotherSsum 和 sum 都 指向 同一 个 函数 。 调 用 anotherSum() 也 可 以 返回 结果 。 把 sum 设置 为 nul1 
之 后 ， 就 切断 了 它 与 函数 之 间 的 关联 。 而 anotherSum() 还 是 可 以 照常 调用 ， 没 有 问题 。 

ECMAScript 6 的 所 有 函数 对 象 都 会 暴露 一 个 只 读 的 name 属性 ， 其 中 包含 关于 函数 的 信息 。 多 数 情 
况 下 ， 这 个 属性 中 保存 的 就 是 一 个 函数 标识 符 ， 或 者 说 是 一 个 字符 串 化 的 变量 名 。 即 使 函数 没有 名 称 ， 
也 会 如 实 显示 成 空 字符 串 。 如 果 它 是 使 用 Function 构造 函数 创建 的 ， 则 会 标识 成 "anonymous " : 


function foo() {} 



























































let. bar = function't() Ey 

eb .Da 

console.log (foo.name); ie) 
console.1og(bar.name) ; // bat 
console.1og(baz.name) ; // baz 
console.log((() => {}) .name); // ( 空 字符 串 ) 
console.log((new Function()) .name); // anonymous 





如 果 函 数 是 一 个 获取 函数 、 设 置 函数 , 或 者 使 用 bina() 实 例 化 , 那么 标识 符 前 面 会 加 上 一 个 前 级 : 


function foo() {} 





console.log(foo.bind (null) .name); // bound foo 


years: 1 

get age { 
return this.years; 

} 

set age (newAge) { 
this.years = newAge; 

} 

} 


let dog = { 
) 


let propertyDescriptor = Object.getOwnPropertyDescriptor(dog, 'age'); 
console.log(propertyDescriptor.get.name); // get age 
console.log(propertyDescriptor.set.name); // set age 
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10.3 理解 参数 


ECMAScript 函数 的 参数 跟 大 多 数 其 他 语言 不 同 。ECMAScript 函数 既 不 关心 传人 的 参数 个 数 ， 也 不 
关心 这 些 参数 的 数据 类 型 。 定 义 函 数 时 要 接收 两 个 参数 ， 并 不 意味 着 调用 时 就 传 两 个 参数 。 你 可 以 传 一 
个 、 三 个 ,其 至 一 个 也 不 传 ， 解释 器 都 不 会 报错 。 

之 所 以 会 这 样 ， 主 要 是 因为 ECMAScript 函数 的 参数 在 内 部 表现 为 一 个 数组 。 函 数 被 调用 时 总 会 接 
收 一 个 数组 ,但 函数 并 不 关心 这 个 数组 中 包含 什么 。 如 果 数 组 中 什么 也 没有 , 那 没 问题 ;如果 数组 的 元 
素 超 出 了 要 求 , 那 也 没 问 题 。 事 实 上 ,在 使 用 function 关键 字 定义 ( 非 箭头 ) 函数 时 ， 可 以 在 函数 内 
部 访问 arguments 对 象 ， 从 中 取得 传 进来 的 每 个 参数 值 。 

arguments 对 象 是 一 个 类 数组 对 象 (但 不 是 Array 的 实例 ), 因此 可 以 使 用 中 括号 语法 访问 其 中 的 
元 素 (第 一 个 参数 是 arguments [0] ， 第 二 个 参数 是 arguments [1] )。 而 要 确定 传 进来 多 少 个 参数 ， 
可 以 访问 arguments.1length 属性 。 

在 下 面 的 例子 中 ，sayHi () 函数 的 第 一 个 参数 叫 name: 


function sayHi (name, message) { 
console.log("Hello " + name + ", " + message); 


} 
可 以 通过 arguments[0] 取 得 相同 的 参数 值 。 因 此 ， 把 函数 重 写成 不 声明 参数 也 可 以 : 


function sayHi() { 
console.log("Hello " + arguments[0] + ", " + arguments[1])， 


} 

在 重 写 后 的 代码 中 , 没有 命名 参数 。name 和 message 参数 都 不 见 了 , 但 函数 照样 可 以 调用 。 这 就 
表明 ，ECMAScript 函数 的 参数 只 是 为 了 方便 才 写 出 来 的 ， 并 不 是 必须 写 出 来 的 。 与 其 他 语言 不 同 ， 在 
ECMAScript 中 的 命名 参数 不 会 创建 让 之 后 的 调用 必须 匹配 的 函数 签名 。 这 是 因为 根本 不 存在 验证 命名 
参数 的 机 制 。 

也 可 以 通过 arguments 对 象 的 length 属性 检查 传人 的 参数 个 数 。 下 面 的 例子 展示 了 在 每 调用 一 
个 函数 时 ， 都 会 打印 出 传人 的 参数 个 数 : 


function howManyArgs() { 
console.log(arguments.length); 


} 
























































































































































howManyArgs ("string", 45); // 2 
howManyArgs (); // 0 
howManyArgs (12) ; // 1 


这 个 例子 分 别 打 印 出 2、0 和 1( 按 顺序 )。 既然 如 此 ,那么 开发 者 可 以 想 传 多 少 参 数 就 传 多 少 参数 。 
比如 : 


function doAadd() { 
if (arguments.length === 1) { 
console.log(arguments[0] + 10); 
} else if (arguments.length === 2) { 
console.log(arguments[0] + arguments[1]); 





10.3 ”理解 参数 291 





这 个 机 doAga() 在 只 传 一 个 参数 时 会 加 10， 在 传 两 个 参数 时 会 将 它们 相 加 ， 然 后 返回 。 因 此 
doagd (10) 返 回 20， 20) 返 回 50。 虽 然 不 像 真 正 的 函数 重 载 那么 明确 ， 但 这 已 经 足以 弥 
补 ed ae 

还 有 一 个 必须 理解 的 重要 方面 ， 那 就 是 arguments 对 象 可 以 跟 命名 参数 一 起 使 用 ， 比 如 : 


function doAdd(numl, num2) { 














if (arguments.length === 1) { 
console.log(numl + 10); 
} else if (arguments.length === 2) { 


console.log(arguments[0] + num2); 
} 
} 


在 这 个 doagq () 函数 中 ， 同 时 使 用 了 两 个 命名 参数 和 arguments 对 象 。 命 名 参数 numl 保存 着 与 
arugments [0] 一 样 的 值 ， 因 此 使 用 谁 都 无 所 谓 。( 同样 ，num2 也 保存 着 跟 arguments [1] 一 样 的 值 。) 

arguments 对 象 的 另 一 个 有 意思 的 地 方 就 是 ， 它 的 值 始 终 会 与 对 应 的 命名 参数 同步 。 来 看 下 面 的 
例子 : 


function doAdd(numl, num2) { 
arguments[1] = 10; 
console.log(arguments[0] + num2); 


} 

这 个 goaga () 函数 把 第 二 个 参数 的 值 重 写 为 10。 因 为 arguments 对 象 的 值 会 自动 同步 到 对 应 的 命 
名 参数 , 所 以 修改 arguments [1] 也 会 修改 num2 ee 因此 两 者 的 值 都 是 10。 但 这 并 不 意味 着 它们 都 
访问 同一 个 内 存 地 址 ， 它 们 在 内 存 中 还 是 分 开 的 ， 只 不 过 会 保持 同步 而 已 。 另 外 还 要 记 住 一 点 : 如 果 只 
传 了 一 个 参数 ,然后 把 arguments [1] 设 置 为 某 个 值 ， 人 这 是 
因为 arguments 对 象 的 长 度 是 根据 传人 的 参数 个 数 ， 而 非 定义 函数 时 给 出 的 命 名 参数 个 数 确定 的 。 

对 于 命名 参数 而 言 ， 如 果 调 用 函数 时 没有 传 这 个 参数 ， 那 么 它 的 值 就 是 undefined。 这 就 类 似 于 
定义 了 变量 而 没有 初始 化 。 比 如 ， 如 果 只 给 doaqga () 传 了 一 个 参数 ,那么 num2 的 值 就 是 ungefineq。 

严格 模式 下 , arguments 会 有 一 些 变化 。 首先 , 像 前 面 那 样 给 arguments [1] 赋 值 不 会 再 影响 num2 
的 值 。 就 算 把 arguments[1] 设 置 为 10，num2 的 值 仍然 还 是 传 入 的 值 。 其 次 ， 在 函数 中 尝试 重 写 
arguments 对 象 会 导致 语法 错误 。( 代码 也 不 会 执行 。) 


箭头 函数 中 的 参数 


如 果 函 数 是 使 用 箭头 语法 定义 的 ,那么 传 给 函数 的 参数 将 不 能 使 用 arguments 关键 字 访 问 ， 而 只 
能 通过 定义 的 命名 参数 访问 。 
function foo() { 
console.log(arguments[0]); 


} 
Foo(S A 



























































































































































let bar = () => { 
console.log(arguments[0]); 
于 


bar(5); // ReferenceError: arguments is not defined 
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虽然 箭头 函数 中 没有 arguments 对 象 ， 但 可 以 在 包装 函数 中 把 它 提供 给 箭头 函数 : 


function foo() { 
Le are (re 
console.log(arguments[0]); // 5 
2 
bar(); 


注意 ECMAScript 中 的 所 有 参数 都 按 值 传递 的 。 不 可 能 按 引 用 传递 参数 。 如 果 把 对 象 作 
为 参数 传递 ， 那 么 传递 的 值 就 是 这 个 对 象 的 引用 。 





10.4 没有 重 载 


ECMAScript 函数 不 能 像 传统 编程 那样 重 载 。 在 其 他 语言 比如 Java 中 ， 一 个 函数 可 以 有 两 个 定义 ， 
只 要 签名 ( 接收 参数 的 类 型 和 数量 ) 不 同 就 行 。 如 前 所 述 ，ECMAScript 函数 没有 签名 ， 因 为 参数 是 由 
包含 零 个 或 多 个 值 的 数组 表示 的 。 没 有 函数 签名 ， 自 然 也 就 没有 重 载 。 

如 果 在 ECMAScript 中 定义 了 两 个 同名 函数 ， 则 后 定义 的 会 覆盖 先 定义 的 。 来 看 下 面 的 例子 : 


function addSomeNumber (num) { 
return num + 100; 


} 












































function addSomeNumber (num) { 
return num + 200; 


} 


let result = addSomeNumber (100); // 300 


这 里 ， 函 数 aqadqsomeNumber () 被 定义 了 两 次 。 第 一 个 版 本 给 参数 加 100， 第 二 个 版 本 加 200。 最 
后 一 行 调用 这 个 函数 时 ， 返 回 了 300， 因 为 第 二 个 定义 覆盖 了 第 一 个 定义 。 

前 面 也 提 到 过 ， 可 以 通过 检查 参数 的 类 型 和 数量 ， 然 后 分 别 执行 不 同 的 逻辑 来 模拟 函数 重 载 。 

把 函数 名 当成 指针 也 有 助 于 理解 为 什么 ECMAScript 没有 函数 重 载 。 在 前 面 的 例子 中 ， 定 义 两 个 同 
名 的 函数 显然 会 导致 后 定义 的 重 写 先 定义 的 。 而 那个 例子 几乎 跟 下 面 这 个 是 一 样 的 : 


let addSomeNumber = function(num) { 
return num + 100; 






































二 


addSomeNumber = function(num) { 
return num + 200; 


}; 


Jet result = addSomeNumber(100); // 300 


看 这 段 代码 应 该 更 容易 理解 发 生 了 什么 。 在 创建 第 二 个 函数 时 ， 变 量 addsomeNumber 被 重 写成 保 
存 第 二 个 函数 对 象 了 。 
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10.5 ”默认 参数 值 


在 ECMAScript5.1 及 以 前 ,实现 默认 参数 的 一 种 常用 方式 就 是 检测 某 个 参数 是 否 等 于 undefined,， 
如 果 是 则 意味 着 没有 传 这 个 参数 ， 那 就 给 它 赋 一 个 值 : 
function makeKing (name) { 
name = (typeof name !== 'undefined') ? name : 'Henry'; 


return ‘King S${name} VIII  ; 
} 

















console.log (makeKing()); // 'King Henry VIII' 
console.log(makeKing('Louis')); // 'King Louis VIII' 


ECMAScript 6 之 后 就 不 用 这 么 麻烦 了 , 因为 它 支 持 显 式 定义 默认 参数 了 。 下面 就 是 与 前 面 代码 等 价 
的 ES6 写法 ， 只 要 在 函数 定义 中 的 参数 后 面 用 = 就 可 以 为 参数 赋 一 个 默认 值 : 


function makeKing (name = 'Henry') { 
return ‘King S${name} VIII  ; 


} 



































console.log(makeKing('Louis')); // 'King Louis VIII' 

console.log (makeKing()); // 'King Henry VIII' 

给 参数 传 undefined 相当 于 没有 传 值 ， 不 过 这 样 可 以 利用 多 个 独立 的 默认 值 : 
function makeKing(name = 'Henry', numerals = 'VIII') { 


return ‘King S${name} S${numerals}.; 


} 


console.log (makeKing() ) ; // 'King Henry VIII' 
console.log(makeKing('Louis')); // 'King Louis VIII' 
console.log (makeKing (undefined, 'VI')); // 'King Henry VI' 


在 使 用 默认 参数 时 ，arguments 对 象 的 值 不 反映 参数 的 默认 值 ， 只 反映 传 给 函数 的 参数 。 当 然 ， 
跟 ES5 严格 模式 一 样 , 修改 命名 参数 也 不 会 影响 arguments 对 象 , 它 始终 以 调用 函数 时 传人 的 值 为 准 : 
function makeKing(name = 'Henry') { 
name = 'Louis'; 


return ‘King S${arguments{[0]}; 


} 














console.log (makeKing()); // 'King undefined' 
console.log(makeKing('Louis')); // 'King Louis' 

默认 参数 值 并 不 限于 原始 值 或 对 象 类 型 ， 也 可 以 使 用 调用 函数 返回 的 值 : 
et "romanNumerals = ("LT VTL STITT TV SY 工人 


let ordinality = 0; 


function getNumerals() { 
// 每 次 调用 后 递增 
return romanNumerals[ordinality++]; 


} 


function makeKing (name = 'Henry', numerals = getNumerals()) { 
return ‘King S${name} S${numerals}.; 


} 


console.log (makeKing()); // 'King Henry 工 ' 
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console.log(makeKing('Louis’', 'XVI')); // 'King Louis XVI' 
console.log (makeKing ()); // 'King Henry II' 
console.log (makeKing()); // 'King Henry III' 





函数 的 默认 参数 只 有 在 函数 被 调用 时 才 会 求 值 ， 不 会 在 函数 定义 时 求 值 。 而且, 计算 默认 值 的 函数 
只 有 在 调用 函数 但 未 传 相 应 参数 时 才 会 被 调用 。 
箭头 函数 同样 也 可 以 这 样 使 用 默认 参数 , 只 不 过 在 只 有 一 个 参数 时 , 就 必须 使 用 括号 而 不 能 省 略 了 : 


let makeKing = (name = 'Henry') => ‘King S${name}，; 











console.log(makeKing()); // King Henry 


默认 参数 作用 域 与 暂时 性 死 区 
因为 在 求 值 默认 参数 时 可 以 定义 对 象 , 也 可 以 动态 调用 函数 ， 所 以 函数 参数 肯定 是 在 某 个 作用 域 















































求 值 的 。 
给 多 个 参数 定义 默认 值 实际 上 跟 使 用 let 关键 字 顺 序 声明 变量 一 样 。 来 看 下 面 的 例子 : 
function makeKing(name = 'Henry', numerals = 'VIII') { 


return ‘King S${name} S${numerals}.，} 


} 


console.log(makeKing()); // King Henry VIII 
这 里 的 默认 参数 会 按照 定义 它们 的 顺序 依次 被 初始 化 。 可 以 依照 如 下 示例 想象 一 下 这 个 过 程 : 


function makeKing() { 
let name = 'Henry'; 
let numerals = 'VIII'; 


return ‘King S${name} S${numerals}.} 
3 
为 参数 是 按 顺序 初始 化 的 ， 所 以 后 定义 默认 值 的 参数 可 以 引用 先 定 义 的 参数 。 看 下 面 这 个 例子 : 


function makeKing(name = 'Henry', numerals = name) { 
return ‘King S${name} Sftnumerals}) 

















} 


console.log(makeKing()); // King Henry Henry 

参数 初始 化 顺序 遵循 “暂时 性 死 区 ”规则 ， 即 前 面 定 义 的 参数 不 能 引用 后 面 定 义 的 。 像 这 样 就 会 抛 
出 错误 : 

// 调用 时 不 传 第 一 个 参数 会 报错 

function makeKing (name = numerals, numerals = 'VIII') { 


return ‘King S${name} Sftnumerals) 


} 
参数 也 存在 于 自己 的 作用 域 中 ， 它 们 不 能 引用 函数 体 的 作用 域 : 


// 调用 时 不 传 第 二 个 参数 会 报错 

function makeKing(name = 'Henry', numerals = defaultNumeral) { 
let defaultNumeral = 'VIII'; 
return ‘King S${name} S${numerals}.} 


} 
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10.6 ”参数 扩展 与 收集 


ECMAScript 6 新 增 了 扩展 操作 符 , 使 用 它 可 以 非常 简洁 地 操作 和 组 合集 合 数据 。 扩展 操作 符 最 有 用 
的 场景 就 是 函数 定义 中 的 参数 列表 ， 在 这 里 它 可 以 充分 利用 这 门 语 言 的 弱 类 型 及 参数 长 度 可 变 的 特点 。 
扩展 操作 符 既 可 以 用 于 调用 函数 时 传 参 ， 也 可 以 用 于 定义 函数 参数 。 


10.6.1 ”扩展 参数 


在 给 函数 传 参 时 ， 有 时 候 可 能 不 需要 传 一 个 数组 ， 而 是 要 分 别传 人 数组 的 元 素 。 
假设 有 如 下 函数 定义 ， 它 会 将 所 有 传人 的 参数 累加 起 来 : 


let values = [1, 2, 3, 4]; 















































function getSum() { 
let sum = 0; 
for (let i = 0; i < arguments.length; ++i) { 
sum += arguments[i]; 
} 
return sum; 


} 

这 个 函数 希望 将 所 有 加 数 逐 个 传 进来 ， 然 后 通过 和 迭代 arguments 对 象 来 实现 累加 。 如 果 不 使 用 扩 
展 操作 符 ， 想 把 定义 在 这 个 函数 这 面 的 数组 拆 分 ， 那 么 就 得 求助 于 apply () 方 法 : 

console.log(getSum.apply (null, values)); // 10 

但 在 ECMAScript 6 中 ， 可 以 通过 扩展 操作 符 极为 简洁 地 实现 这 种 操作 。 对 可 迭代 对 象 应 用 扩展 操 
作 符 ， 并 将 其 作为 一 个 参数 传人 ， 可 以 将 可 迭代 对 象 拆 分 ， 并 将 和 欠 代 返回 的 每 个 值 单独 传人 。 

比如 ， 使 用 扩展 操作 符 可 以 将 前 面 例子 中 的 数组 像 这 样 直 接 传 给 函数 : 

console.log(getSum(...values)); // 10 

因为 数组 的 长 度 已 知 , 所 以 在 使 用 扩展 操作 符 传 参 的 时 候 , 并 不 妨碍 在 其 前 面 或 后 面 再 传 其 他 的 值 ， 
包括 使 用 扩展 操作 符 传 其 他 参数 : 
















































































console.log(getSum(-1, ...values)); AX 9 

console.log(getSum(...values, 5)); A LS 
console.log(getSum(-1, ...values, 5)); // 14 
console.log(getSum(...values, ...[5,6,7])); // 28 
































对 函数 中 的 arguments 对 象 而 言 ， 它 并 不 知道 扩展 操作 符 的 存在 ， 而 是 按照 调用 函数 时 传人 的 参 


数 接收 每 一 个 值 : 
let values = [1,2,3,4] 
function countArguments() { 


console.log(arguments.length); 


} 


countArguments(-1, ...values); 沪 
countArguments(...values, 5); AES, 
countArguments(-1, ...values, 5); // 6 
countArguments(...values, ...[5,6,7]); //7 














arguments 对 象 只 是 消费 扩展 操作 符 的 一 种 方式 。 在 普通 函数 和 箭头 函数 中 ， 也 可 以 将 扩展 操作 





296 第 10 章 函 数 














符 用 于 命名 参数 ， 当 然 同 时 也 可 以 使 用 默认 参数 : 


function getProduct(a, b, ¢c = 1) { 
Teturn. a 区 


} 








let getSum = (a, b, ¢ = 0) => { 
return a+b+aoe; 


} 


console.log(getProduct(...[1,2])); 7 这 
console.log(getProduct(...[1,2,3])); // 6 
console.log(getProduct(...[1,2,3,4])); //56 
console.log(getSum(...[0,1])); 大 仿生 
console.logl(getSum(...[0,1,2]))， a 
console.log(getSum(...[0,1,2,3])); Js 


10.6.2 ”收集 参数 


在 构思 函数 定义 时 ， 可 以 使 用 扩展 操作 符 把 不 同 长 度 的 独立 参数 组 合 为 一 个 数组 。 这 有 点 类 似 
arguments 对 象 的 构造 机 制 ， 只 不 过 收集 参数 的 结果 会 得 到 一 个 Array 实例 。 
function getSum(...values) { 
// 顺序 累加 values 中 的 所 有 值 
// 初始 值 的 总 和 为 0 


return values.reduce((x, y) => x + y, 0); 





























} 


console.log(getSsum(1,2,3)); // 6 


ti 8 名 参数 ， 则 只 会 收集 其 余 的 参数 ; 如 果 没 有 则 会 得 到 空 数 组 。 因 为 收集 





[uy 


























参数 的 结果 可 变 ， 所 以 只 能 把 它 作 为 最 后 一 个 参数 : 
// 不 可 以 
function getProduct(...values, lastValue) {} 
// 可 以 
function ignoreFirst (firstValue, ...values) { 


console.log(values); 


} 


ignoreFirst(); 0 内 
ignoreFirst (1); // [] 
ignoreFirst (1,2); 7 2 
ignoreFirst(1,2,3); // [2, 3] 





箭头 函数 虽然 不 支持 arguments 对 象 ， 但 支持 收集 参数 的 定义 方式 ， 因 此 也 可 以 实现 与 使 用 
arguments 一 样 的 逻辑 ， 


Jet getSum = (...values) => { 
return values.reduce((x, y) => x + y, 0); 








} 


console.log(getSsum(1,2,3)); // 6 


另外 ， 使 用 收集 参数 并 不 影响 arguments 对 象 ， 它 仍然 反映 调用 时 传 给 函数 的 参数 : 
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function getSum(...values) { 
console.log(arguments.length); // 3 
console.log(arguments); A Ly 2 
console.log(values); | 


} 


console.log(getSum(1,2,3)); 


10.7 ”函数 声明 与 函数 表达 式 


本 章 到 现在 一 直 没 有 把 函数 声明 和 函数 表达 式 区 分 得 很 清楚 。 事 实 上 ，JavaScript 引擎 在 加 载 数据 
时 对 它们 是 区 别 对 竺 的 。JavaScript 引擎 在 任何 代码 执行 之 前 ， 会 先 读 取 函 数 声明 ， 并 在 执行 上 下 文中 
生成 函数 定义 。 而 函数 表达 式 必须 等 到 代码 执行 到 它 屠 一行， 才 会 在 执行 上 下 文中 生成 函数 定义 。 来 看 
下 面 的 例子 : 

// 没 问题 

console.log(sum(10, 10)); 

function sum(numl, num2) { 


return numl + num2; 


} 

以 上 代码 可 以 正常 运行 ， 因 为 也 数 声明 会 在 任何 代码 执行 之 前 先 被 读 取 并 添加 到 执行 上 下 文 。 这 个 
过 程 叫 作 函 数 声明 提升 (function declaration hoisting )。 在 执行 代码 时 ，JavaScript 引擎 会 先 执行 一 遍 扫 描 ， 
把 发 现 的 函数 声明 提升 到 源 代码 树 的 顶部 。 因 此 即使 函数 定义 出 现在 调用 它们 的 代码 之 后 ， 引 擎 也 会 把 
函数 声明 提升 到 顶部 。 如 果 把 前 面 代码 中 的 函数 声明 改 为 等 价 的 函数 表达 式 , 那么 执行 的 时 候 就 会 出 错 : 


// 会 出 错 

console.log(sum(10, 10));} 

let sum = function(numl, num2) { 
return numl + num2; 


}; 

上 面 的 代码 之 所 以 会 出 错 , 是 因为 这 个 函数 定义 包含 在 一 个 变量 初始 化 语句 中 , 而 不 是 函数 声明 中 。 
这 意味 着 代码 如 果 没 有 执行 到 加 粗 的 那 一 行 , 那么 执行 上 下 文中 就 没有 函数 的 定义 , 所 以 上 面 的 代码 会 
出 错 。 这 并 不 是 因为 使 用 let 而 导致 的 ， 使 用 var 关键 字 也 会 磁 到 同样 的 问题 : 


console.log(sum(10, 10)); 
var sum = function(numl, num2) { 
return numl + num2; 


}; 
除了 函数 什么 时 候 真正 有 定义 这 个 区 别 之 外 ， 这 两 种 语法 是 等 价 的 。 













































































注意 在 使 用 函数 表达 式 初始 化 变量 时 ， 也 可 以 给 函数 一 个 名 称 ， 比 如 let sum = 


function sum() {}。 这 一 点 在 10.11 节 讨 论 函 数 表 达 式 时 会 再 讨论 。 





10.8 ”函数 作为 值 


因为 函数 名 在 ECMAScript 中 就 是 变量 ， 所 以 函数 可 以 用 在 任何 可 以 使 用 变量 的 地 方 。 这 意味 着 不 
仅 可 以 把 函数 作为 参数 传 给 另 一 个 函数 ， 而 且 还 可 以 在 一 个 函数 中 返回 另 一 个 函数 。 来 看 下 面 的 例子 : 
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function callSomeFunction(someFunction, someArgument) { 
return someFunction(someArgument); 


; 








这 个 函数 接收 两 个 参数 。 第 一 个 参数 应 该 是 一 个 函数 ,第 二 个 参数 应 该 是 要 传 给 这 个 函数 的 值 。 任 











何 函 数 都 可 以 像 下 面 这 样 作为 参数 传递 : 


function adqdq10 (num) { 
return num + 10; 


} 














let resultl1 = callSomeFunction(add10, 10); 
console.log(result1); // 20 


function getGreeting(name) { 
return "Hello, " + name; 


} 


let result2 = callSomeFunction(getGreeting, "Nicholas"); 
console.log(result2); // "Hello, Nicholas" 








callSomeFunction() 函数 是 通用 的 , 第 一 个 参数 传人 的 是 什么 函数 都 可 以 , 而] 














且 它 始终 返回 调用 


作为 第 一 个 参数 传人 的 函数 的 结果 。 要 注意 的 是 , 如 果 是 访问 函数 而 不 是 调用 函数 , 那 就 必须 不 带 括号 ， 








所 以 传 给 callsomeFunction() 的 必须 是 add10 和 getGreeting， 而 不 能 是 它们 的 执行 结果 。 
































从 一 个 函数 中 返回 另 一 个 函数 也 是 可 以 的 ， 而 且 非 常 有 用 。 假设 有 一 个 包含 对 象 的 数组 ， 而 














本 


我 们 想 按照 任意 对 象 属性 对 数组 进行 排序 。 可 以 定义 一 个 sort () 方 法 需要 的 
即 要 比较 的 值 。 但 这 个 比较 函数 还 需要 想 办 法 确定 根据 哪个 属 性 来 排序 。 
一 个 根据 属性 名 来 创建 比较 函数 的 oe. 比如 : 


function createComparisonFunction(propertyName) { 
return function(object1l, object2) { 
let valuel = objectl[propertyNamel]; 
let value2 = object2 [propertyNamel]; 








if (valuel < value2) { 
return -1; 

} else if (valuel > value2) { 
return 1; 

} else { 
return 0; 


地 
} 


这 个 函数 的 语法 乍 一 看 比较 复杂 ， 但 实际 上 就 是 在 一 个 函数 中 返回 另 一 个 函数 ， 


























比较 函数 ， 它 接收 
这 个 问题 可 以 通过 


注意 那个 return 








操作 符 。 内 部 函数 可 以 访问 propertyName 参数 ， 并 通过 中 括号 语法 取得 要 比较 的 对 象 的 相应 属性 值 。 
取得 属性 值 以 后 ， 再 按照 sort ( ) 方 法 的 需要 返回 比较 值 就 行 了 。 这 个 函数 可 以 像 下 面 这 样 使 用 : 











let data = [ 
{name: "Zachary", age: 28}, 
{name: "Nicholas", age: 29} 
] 学 


data.sort (createComparisonFunction("name")); 
console.log(data[0] .name); // Nicholas 
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data.sort (createComparisonFunction("age")); 
console.log(data[0] .name); // Zachary 


在 上 面 的 代码 中 ,数组 aata 中 包含 两 个 结构 相同 的 对 象 , 每 个 对 象 都 有 一 个 name 属性 和 一 个 age 
属性 。 默 认 情 况 下 ，sort () 方 法 要 对 这 两 个 对 象 执行 tostring ()， 然 后 再 决定 它们 的 顺序 ， 但 这 样 
得 不 到 有 意义 的 结果 。 而 通过 调用 createComparisonFunction ("name") 来 创建 一 个 比较 函数 ， 就 
可 以 根据 每 个 对 象 name 属性 的 值 来 排序 , 结果 name 属性 值 为 "Nicholas"、age 属性 值 为 29 的 对 象 
会 排 在 前 面 。 而 调用 createcomparisonFunction ("age") 则 会 创建 一 个 根据 每 个 对 象 age 属性 的 值 
来 排序 的 比较 函数 ， 结 果 name 属性 值 为 "zachary"、age 属性 值 为 28 的 对 象 会 排 在 前 面 。 


10.9 ”函数 内 部 


在 ECMAScript 5 中 ， 函 数 内 部 存在 两 个 特殊 的 对 象 . arguments 和 this。ECMAScript 6 又 新 增 
了 new.target 属性 。 





















































10.9.1 arguments 


arguments 对 象 前 面 讨论 过 多 次 了 ， 它 是 一 个 类 数组 对 象 ， 包 含 调 用 函数 时 传人 的 所 有 人 参数。 这 
个 对 象 只 有 以 function 关键 字 定 义 函 数 ( 相对 于 使 用 箭头 语法 创建 函数 ) 时 才 会 有 。 虽 然 主 要 用 于 包 
含 函 数 参 数 , 但 arguments 对 象 其 实 还 有 一 个 callee 属性 , 是 一 个 指向 arguments 对 象 所 在 函数 的 
指针 。 来 看 下 面 这 个 经 典 的 阶乘 函数 : 

function factorial (num) { 

if (num <= 1) { 
return 1; 
} else { 
return num * factorial (num - 1); 


} 
} 


阶乘 函数 一 般 定义 成 递归 调用 的 ， 就 像 上 面 这 个 例子 一 样 。 只 要 给 函数 一 个 名 称 ， 而 且 这 个 名 称 不 
会 变 ， 这 样 定 义 就 没有 问题 。 但 是 ， 这 个 函数 要 正确 执行 就 必须 保证 函数 名 是 factorial， 从 而 导致 
了 紧密 耦合 。 使 用 arguments .callee 就 可 以 让 函数 逻辑 与 国 数 名 解 耦 : 


function factorial (num) { 
if (num <= 1) { 
return 1; 
} else { 
return num * arguments.callee(num - 1); 
} 
} 


这 个 重 写 之 后 的 factorial () 函数 已 经 用 arguments.callee 代替 了 之 前 便 编码 的 factorial。 
这 意味 着 无 论 函 数 叫 什 么 名 称 ， 都 可 以 引用 正确 的 函数 。 考 虑 下 面 的 情况 : 


let trueFactorial = factorial; 










































































factorial = function() { 
return 0; 


地 


console.log(trueFactorial(5)); // 120 
console.log (factorial (5)); AA 0 





300 第 10 章 函 数 

















这 里 , trueFactorial 变量 被 赋值 为 factorial， 实 际 上 把 同一 个 函数 的 指针 又 保存 到 了 另 一 个 
位 置 。 然后，factorial 消 数 又 被 重 写 为 一 个 返回 0 的 函数 。 如 果 像 factorial () 最 初 的 版 本 那样 不 
使 用 arguments .callee, 那么 像 上 面 这 样 调用 trueFactorial () 就 会 返回 0。 不 过 ,通过 将 函数 与 
名 称 解 耦 ，trueFactorial() 就 可 以 正确 计算 阶乘 ， 而 factorial() 则 只 能 返回 0。 





















































10.9.2 this 


男 一 个 特殊 的 对 象 是 this， 它 在 标准 函数 和 箭头 函数 中 有 不 同 的 行为 。 
在 标准 函数 中 , this 引用 的 是 把 函数 当成 方法 调用 的 上 下 文 对 象 , 这 时 候 通常 称 其 为 this 值 (在 
网 页 的 全 局 上 下 文中 调用 函数 时 ，this 指向 windows )。 来 看 下 面 的 例子 : 


window.color = 'red'; 
let Oo = { 
Color: 'blue' 


3 






































fietlon SaveoOLowC), '{ 
console.log(this.color); 


} 
sayColor (); Ye Red 


OSayCoOLloOr = SayColor; 
oO.SayColor(); // 'blue' 


定义 在 全 局 上 下 文中 的 函数 saycolor () 引 用 了 this 对 象 。 这 个 this 到 底 引 用 哪个 对 象 必须 到 
函数 被 调用 时 才能 确定 。 因 此 这 个 值 在 代码 执行 的 过 程 中 可 能 会 变 。 如 果 在 全 局 上 下 文中 调用 
sayColor (), 这 结果 会 输出 "red", 因为 this 指向 window, 而 this.color 相当 于 window.color。 
而 在 把 saycolor () 赋值 给 o 之 后 再 调用 o. savycolor () ，this 会 指向 o， 即 this .color 相当 于 
o.color， 所 以 会 显示 "blue"。 

在 第 头 函 数 中 ,this 引 用 的 是 定义 第 头 函 数 的 上 下 文 ,下 面 的 例子 演示 了 这 一 点 。 在 对 sayColor () 
的 两 次 调用 中 ，this 引用 的 都 是 wingdow 对 象 ， 因 为 这 个 箭头 函数 是 在 window 上 下 文中 定义 的 : 


window.color = 'red'; 
let Oo = { 
color: 'blue' 



























































ee 





let sayColor = () => console.log(this.color); 
sayColor (); // 'red' 


O.SayColor = sayColor; 
oOo.sayColor(); // 'red' 


有 读者 知道 ， 在 事件 回调 或 定时 回调 中 调用 某 个 函数 时 ，this 值 指向 的 并 非 想 要 的 对 象 。 此 时 将 
回调 函数 写成 箭头 函数 就 可 以 解决 问题 。 这 是 因为 箭头 函数 中 的 this 会 保留 定义 该 函数 时 的 上 下 文 : 
function King() { 
this.royaltyName = 'Henry'; 
// this 引用 King 的 实例 
setTimeout(() => console.log(this.royaltyName), 1000); 
} 
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function Queen() { 
this.royaltyName = 'Elizabeth'; 


// this 引用 window 对 象 
setTimeout (function() { console.log(this.royaltyName); }, 1000); 


中 


new King(); // Henry 
new Queen(); // undefined 


0 是 保存 指针 的 变量 。 因此 全 局 定义 的 sayColor () 函数 和 o.sayCcolor () 


， 只 不 过 执行 的 上 下 文 不 同 。 





10.9.3 caller 


ECMAScript 5 也 会 给 函数 对 象 上 添加 一 个 属性 : caller。 虽然 ECMAScript3 中 并 没有 定义 , 但 
有 浏览 器 除了 早期 版 本 的 Opera 都 支持 这 个 属性 。 这 个 属性 引用 的 是 调用 当前 函数 的 函数 ,或 者 如 果 
在 全 局 作用 域 中 调用 的 则 为 null1。 比 如 : 


function outer() { 
inner(); 


} 


廿 
Es 








各 














function inner() { 
console.log(inner.caller); 


} 


outer(); 
ee 显示 outer () 函数 的 源 代码 。 这 是 因为 ourter () 调 用 了 inner () ， inner.caller 

指向 outer ()。 如 果 要 降低 灯 合 度 ， 则 可 以 通过 arguments .callee.caller 来 引用 同样 的 值 : 
function outer() { 


inner (); 


} 





























function inner() { 
console.log(arguments.callee.caller); 


} 

outer'(); 

在 严格 模式 下 访问 arguments .callee 会 报错 ECMAScript 5 也 定义 了 arguments.caller, 但 
在 严格 模式 下 访问 它 会 报错 ,在 非 严 格 模式 下 则 始终 是 undefined。 这 是 为 了 分 清 arguments.caller 
和 函数 的 caller 而 故意 为 之 的 。 而 作为 对 这 门 语言 的 安全 防护 ， 这些 改动 也 让 第 三 方 代码 无 法 检测 同 


一 上 下 文中 运行 的 其 他 代码 。 
严格 模式 下 还 有 一 个 限制 ， 就 是 不 能 给 函数 的 caller 属性 赋值 ， 否 则 会 导致 错误 。 

















10.9.4 new.target 


ECMAScript 中 的 函数 始终 可 以 作为 构造 函数 实例 化 一 个 新 对 象 ， 也 可 以 作为 普通 函数 被 调用 。 
ECMAScript 6 新 增 了 检测 函数 是 否 使 用 new 关键 字 调 用 的 new.target 属性 ,如果 函数 是 正常 调用 的 ， 



































A 
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则 new.target 的 值 是 ungdefined; 如 果 是 
构造 子 数 。 


function King() { 
if (!Inew.target) { 
throw 'King must be instantiated using 


} 


console.log('King instantiated using 


; 


new King(); 
King(); 
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// Error: 








更 用 new 关键 字 调 用 的 , 则 new .target 将 引用 被 调用 的 











"new"' 


"new"'); 


// King instantiated using "new" 
King must be instantiated using 


"new" 




















前 面 提 到 过 , ECMAScript 




















和 prototype。 其 


function sayName (name) { 
console.1log (name); 


function sum(numl, num2) { 
return numl + num2; 





function sayHi() { 
console.1log("hi"); 


} 


console.log(sayName.length); //1 
console.log(sum.length); Zi 
console.log(sayHi.length); pi) 


以 上 代码 定义 了 3 个 函数 ， 每 个 函数 的 命名 参数 个 数 都 不 一 样 。sayName () 
所 以 其 1ength 属性 为 1。 类似 地 ，sum() 函数 有 两 个 命名 参数 , 所 以 其 








没有 命名 参数 ， 其 length 属性 为 0。 











的 函数 是 对 象 ， 
!，length 属性 保存 函数 定义 的 命名 参数 的 个 数 ， 如 下 例 所 示 : 




















因此 有 属性 和 方法 。 每 个 函数 都 有 两 个 属性 : length 


函数 有 1 个 命名 参数 ， 
length 属性 是 2。 而 sayHi () 
































prototype 属性 也 许 是 ECMAScript 核心 
方法 的 地 方 ， 这 意味 着 tostring ()、 


valueoOf 














! 最 有 趣 的 部 分 。prototype 是 保存 引用 类 型 所 有 实例 
) 等 方法 实际 上 都 保存 在 prototype 上 ， 进 而 由 所 有 实 




















例 共享 。 这 个 属性 在 自 定 义 类 型 时 特别 重要 。( 相关 内 容 已 经 在 第 8 章 详细 介绍 过 了 。 ) 在 ECMAScript 5 


























函数 还 有 两 个 方法 : apply () 和 call ()。 





1，prototype 属性 是 不 可 枚 举 的 ， 因 此 使 用 for-in 循环 不 会 返回 这 个 属性 。 
这 两 个 方法 都 会 以 指定 的 this 值 来 调 














用 函数 ， 即 会 设 





置 调用 函数 时 函数 体内 this 对 象 的 值 。apply () 方 法 接收 两 个 参数 : 函数 内 this 的 值 和 一 个 参数 数 
组 。 第 二 个 参数 可 以 是 Array 的 实例 ， 但 也 可 以 是 arguments 对 象 。 来 看 下 面 的 例子 : 


function sum(numl, num2) { 
return numl + num2; 


} 


num2) { 
arguments); 


function callSuml (numl， 
return sum.apply (this, 


} 


// 传 入 arguments 对 象 
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function callSum2 (numl, num2) { 


return sum.apply (this,，[numl， num2]); // 传 入 数组 
} 
console.log(callSum1(10, 10)); // 20 
console.log(callSum2(10, 10)); // 20 


在 这 个 例子 中 ，callsuml () 会 调用 sum() 函数 ,将 this 作为 函数 体内 的 this 值 (这 里 等 于 
window， 因 为 是 在 全 局 作用 域 中 调用 的 ) 人 同时 还 传人 了 arguments 对 象 。callsum2 () 也 会 调 
用 sum ( ) 函数 ， 但 会 传人 参数 的 数组 。 这 两 个 函数 都 会 执行 并 返回 正确 的 结果 。 






































注意 在 严格 模式 下 ,调用 函数 时 如 果 没 有 指定 上 下 文 对 象 , 则 this 值 不 会 指向 window。 


除非 使 用 apply() 或 call() 把 函数 指定 给 一 个 对 象 ,否则 this 的 值 会 变 成 undefined。 

















call () 方 法 与 apply() 的 作用 一 样 ,只 是 传 参 的 形式 不 同 。 第 一 个 参数 跟 es 一 样 ,也 是 this 
值 ， 而 剩 下 的 要 传 给 被 调用 函数 的 参数 则 是 逐个 传递 的 。 换 名 话说 ， 通 过 call ( 必须 
将 参数 一 个 一 个 地 列 出 来 ， 比 如 : 


function sum(numl, num2) { 
return numl + num2; 


} 











function callSum(numl, num2) { 
return sum.call(this, numl, num2); 


} 


console.log(callSum(10, 10)); // 20 

这 里 的 callsum() 函数 必须 逐个 地 把 参数 传 给 call () 方 法 。 结果 跟 apply () 的 例子 一 样 。 到 底 是 
使 用 apply () 还 是 call () ， 完 全 取决 于 怎么 给 要 调用 的 函数 传 参 更 方便 。 如 果 想 直接 传 arguments 
对 象 或 者 一 个 数组 ， 那 就 用 apply () ; 和 否则， 就 用 call () 。 当 然 ， 如 果 不 用 给 被 调用 的 函数 传 参 ， 则 
使 用 哪个 方法 都 一 样 。 

apply() 和 call() 真 正 强大 的 地 方 并 不 是 给 函数 传 参 , 而 是 控制 函数 调用 上 下 文 即 函数 体内 this 
值 的 能 力 。 考 虑 下 面 的 例子 : 


window.color = 'red'; 
Jet j= 
color: 'blue' 


人 


















































function sayColor() { 
console.log(this.color); 


} 


sayColor (); // red 
sayColor.call (this); // red 
sayColor.call(window); // red 
sayColor.call(o); // blue 





这 个 例子 是 在 之 前 那个 关于 this 对 象 的 例子 基础 上 修改 而 成 的 。 同 样 ，saycolor () 是 一 个 全 局 
函数 , 如 果 在 全 局 作用 域 中 调用 它 , 那么 会 显示 "red"。 这 是 因为 this .color 会 求 值 为 window.color。 
如 果 在 全 局 作用 域 中 显 式 调用 sayColor.call (this) 或 者 sayColor.call (window) , 则 同样 都 会 显 
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示 "red"。 而 在 使 用 sayColor .call(o) 把 函数 的 执行 上 下 文 即 this 切换 为 对 象 o 之 后 , 结果 就 变 成 

了 显示 "blue" 了 。 
使 用 call () 或 apply () 的 好 处 是 可 以 将 任意 对 象 设置 为 任意 函数 的 作用 域 , 这 样 对 象 可 以 不 用 关 

心 方法 。 在 前 面 例子 最 初 的 版 本 中 ,为 切换 上 下 文 需要 先 把 saycolor () 直接 赋值 为 。 的 属性 ,然后 再 

调用 。 而 在 这 个 修改 后 的 版 本 中 ， 就 不 需要 这 一 步 操作 了 。 

ECMAScript 5 出 于 同样 的 目的 定义 了 一 个 新 方法 :pinda() 。bing() 方 法 会 创建 一 个 新 的 函数 实例 ， 

其 this 值 会 被 绑 定 到 传 给 pina () 的 对 象 。 比 如 : 


window.color = 'red'; 
Eee 
color: "blLue" 


有 
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function sayColor() { 
console.log(this.color); 

| objectSayColor = sayColor.bind(o); 

objectSayColor(); // blue 

这 里 ,在 saycolor () 上 调用 bind() 并 传人 对 象 。 创 建 了 一 个 新 函数 objectsayColor ()。 
objectSayColor() 中 的 this 值 被 设置 为 o， 因 此 直接 调用 这 个 函数 ， 即 使 是 在 全 局 作用 域 中 调用 ， 
也 会 返回 字符 串 "blue"。 

对 函数 而 言 ， 继 承 的 方法 toLocalestring() 和 toString () 始终 返回 函数 的 代码 。 返 回 代码 的 
具体 格式 因 浏 览 器 而 异 。 有 的 返回 源 代 码 ， 包 含 注 释 ， 而 有 的 只 返回 代码 的 内 部 形式 ， 会 删除 注释 ， 甚 
至 代码 可 能 被 解释 器 修改 过 。 由 于 这 些 差 异 ， 因 此 不 能 在 重要 功能 中 依赖 这 些 方法 返回 的 值 ， 而 只 应 在 
调试 中 使 用 它们 。 继 承 的 方法 valueof () 返 回 函 数 本 身 。 


10.11 函数 表达 式 


函数 表达 式 虽 然 更 强大 , 但 也 更 容易 让 人 迷惑 。 我 们 知道 ， 定 义 函 数 有 两 种 方式 : 函数 声明 和 函数 
表达 式 。 气 数 声 明 是 这 样 的 : 
function functionName (arg0, argl, arg2) { 
// 孙 数 体 
} 
函数 声明 的 关键 特点 是 函数 声明 提升 ， 即 函数 声明 会 在 代码 执行 之 前 获得 定义 。 这 意味 着 函数 声明 
可 以 出 现在 调用 它 的 代码 之 后 : 
sayHi (); 
function sayHi() { 
console.log ("Hi!"); 
} 
这 个 例子 不 会 抛 出 错误 ， 因 为 JavaScript 引擎 会 先 读 取 函数 声明 ， 然 后 再 执行 代码 。 
第 二 种 创建 函数 的 方式 就 是 函数 表达 式 。 函 数 表 达 式 有 几 种 不 同 的 形式 ， 最 常见 的 是 这 样 的 : 
let functionName = function(arg0, argl, arg2) { 


// 喜 数 体 
小 


















































了 
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函数 表达 式 看 起 来 就 像 一 个 普通 的 变量 定义 和 赋值 ， 即 创建 一 个 函数 再 把 它 赋值 给 一 个 变量 
functionName。 这 样 创建 的 函数 叫 作 匿 名 函数 ( anonymous funtion )， 因 为 function 关键 字 后 面 没 有 
标识 符 。( 匿名 函数 有 也 时 候 也 被 称 为 兰 姆 达 函 数 )。 未 赋值 给 其 他 变量 的 匿名 函数 的 name 属性 是 空 字 


符 中 
十 中 。 



























































函数 表达 式 跟 JavaScript 中 的 其 他 表达 式 一 样 ， 需 要 先 赋值 再 使 用 。 下 面 的 例子 会 导致 错误 


sayHi(); // Error! function doesn't exist yet 
let sayHi = function() { 

console.log ("Hi!"); 
小 这 本 


理解 函数 声明 与 函数 表达 式 之 间 的 区 别 ， 关键 是 理解 提升 。 比 如 ， 以 下 代码 的 执行 结果 可 能 会 出 乎 
意料 : 
// 千 万 别 这 样 做 1 


if (condition) { 
function sayHi() { 
console.log('Hi!'); 
} 
} else { 
function sayHi() { 
console.log('Yo!'); 
} 
} 


这 段 代码 看 起 来 很 正常， 就 是 如 果 condition 为 true， 则 使 用 第 一 个 sayHi () 定义 ; 否则 ， 就 
使 用 第 二 个 。 事实 上 , 这 种 写法 在 ECAMScript 中 不 是 有 效 的 语法 。JavaScript 引擎 会 尝试 将 其 纠正 为 适 
问题 在 于 浏览 需 纠 正 这 个 问题 的 方式 并 不 一 致 。 多 数 浏览 器 会 忽略 condition 直接 返回 第 
二 个 声明 。Firefox 会 在 condition 为 true 人 这 种 写法 很 危险 ， 不 要 使 用 。 不 过 ， 
人 的 函数 声明 换 成 函数 表达 式 就 没 问 题 


// 没 问题 
let sayHi; 
if (condition) { 
sayHi = function() { 
console.log("Hi!"); 
地 
} else 1{ 
sayHi = function() { 
console.log("Yo!");} 
地 
} 


he 根据 condition 的 值 为 变量 sayHi 赋予 相应 的 函数 。 
创建 函数 并 赋值 给 变量 的 能 力也 可 以 用 于 在 一 个 函数 中 把 另 一 个 函数 当 作 值 返回 : 


function createComparisonFunction(propertyName) { 
return function(object1l, object2) { 
let valuel = objectl [propertyNamel]; 
let value2 = object2 [propertyNamel]; 



































if (valuel < value2) { 
return -1; 
} else if (valuel > value2) { 
return 1; 
else { 





—_ 
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return 0; 
} 
> 

} 

这 里 的 createComparisonFunction () 函数 返回 一 个 匿名 函数 , 这 个 匿名 函数 要 么 被 赋值 给 一 个 
变量 , 要 么 可 以 直接 调用 。 但 在 createcomparisonFunction() 内 部 , 那个 函数 是 匿名 的 。 任何 时 
只 要 函数 被 当 作 值 来 使 用 ， 它 就 是 一 个 函数 表达 式 。 本 章 后 面 会 介绍 ， 这 并 不 是 使 用 函数 表达 式 的 唯一 
方式 。 


10.12 ”递归 
递归 函数 通常 的 形式 是 一 个 函数 通过 名 称 调用 自己 ， 如 下 面 的 例子 所 示 : 
{ 


function factorial (num) 
Tn 
return 1; 
} else { 
return num * factorial (num - 1); 














ba 




































































} 
} 


这 是 经 典 的 递归 阶乘 函数 。 虽然 这 样 写 是 可 以 的 , 但 如 果 把 这 个 函数 赋值 给 其 他 变量 , 就 会 出 问题 : 


let anotherFactorial = factorial; 
factorial SnuLll: 
console.log(anotherFactorial(4)); // 报错 




















这 里 把 factorial() 函数 保存 在 了 另 一 个 变量 anotherFactorial 中 ,然后 将 factorial 设置 
为 null1， 于 是 只 保留 了 一 个 对 原始 函数 的 引用 。 而 在 调用 anotherFactorial() 时 ， 要 递归 调用 
factorial(), 但 因为 它 已 经 不 是 函数 了 ， 所 以 会 出 错 。 在 写 递归 函数 时 使 用 arguments.callee 可 
以 避免 这 个 问题 。 

arguments .callee 就 是 一 个 指 癌 正在 执行 的 函数 的 指针 ， 因 此 可 以 在 函数 内 部 递归 调用 ， 如 下 
所 示 : 


function factorial (num) { 
i ob a 汉 
return 1; 
} else { 
return num * arguments.callee(num - 1);} 
} 
3 


像 这 里 加 粗 的 这 一 行 一 样 ， 把 函数 名 称 替换 成 arguments .callee， 可 以 确保 无 论 通 过 什么 变量 
调用 这 个 函数 都 不 会 出 问题 。 因 此 在 编写 递归 函数 时 ，arguments .callee 是 引用 当前 函数 的 首选 。 
不 过 ， 在 严格 模式 下 运行 的 代码 是 不 能 访问 arguments .callee 的 ， 因 为 访问 会 出 错 。 此 时 ， 可 
以 使 用 命名 函数 表达 式 (named function expression ) 达到 目的 。 比 如 : 


const factorial = 
(Ti 二 ) 1 站 
return 1; 
} else { 
return num * f(num - 1); 
} 
有 









































































































































(function f(num) { 
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这 里 创建 了 一 个 命名 函数 表达 式 E() ， 然 后 将 它 赋值 给 了 变量 factorial。 即 使 把 函数 赋值 给 男 
一 个 变量 ,函数 表达 式 的 名 称 £ 也 不 变 , 因此 递归 调用 不 会 有 问题 。 这 个 模式 在 严格 模式 和 非 严 格 模 式 
下 都 可 以 使 用 。 


10.13 尾 调用 优化 
ECMAScript 6 规范 新 增 了 一 项 内 存 管理 优化 机 制 ， 让 JavaScript 引擎 在 满足 条 件 时 可 以 重用 栈 帧 。 
具体 来 说 ， 这 项 优化 非常 适合 “ 尾 调用 ” ， 即 外 部 函数 的 返回 值 是 一 个 内 部 函数 的 返回 值 。 比 如 


function outerFunction() { 
return innerFunction(); // 尾 调用 














} 

在 ES6 优化 之 前 ， 执 行 这 个 例子 会 在 内 存 中 发 生 如 下 操作 。 

(1) 执行 到 outerFunction 函数 体 ， 第 一 个 栈 帧 被 推 到 栈 上 。 

(2) 执行 outerFunction 函数 体 ， 到 return 语句 。 计 算 返 回 值 必须 先 计 算 innerFunction。 

(3) 执行 到 innerFunction 困 数 体 ， 第 二 个 栈 帧 被 推 到 栈 上 。 

(4) 执行 innerFunction 函数 体 ， 计 算 其 返回 值 。 

(5) 将 返回 值 传 回 outerFunction， 然 后 outerFunction 再 返回 值 。 

(6) 将 栈 帧 弹出 栈 外 。 

在 ES6 优化 之 后 ， 执 行 这 个 例子 会 在 内 存 中 发 生 如 下 操作 。 

(1) 执行 到 outerFunction 函数 体 ， 第 一 个 栈 帧 被 推 到 栈 上 。 

(2) 执行 outerFunction 函数 体 , 到 达 return 语句 。 为 求 值 返回 语句 , 必须 先 求 值 innerFunction。 

(3) 引擎 发 现 把 第 一 个 栈 帧 弹出 栈 外 也 没 问 题 ， 因 为 innerFunction 的 返回 值 也 是 outerFunction 
的 返回 值 。 

(4) 弹出 outerFunction 的 栈 帧 。 

(5) 执行 到 innerFunction 函数 体 ， 栈 帧 被 推 到 栈 上 。 

(6) 执行 innerFunction 函数 体 ， 计 算 其 返回 值 。 

(7) 将 innerFunction 的 栈 帧 弹出 栈 外 。 

很 明显 , 第 一 种 情况 下 每 多 调用 一 次 般 套 函数 ， 就 会 多 增加 一 个 栈 帧 。 而 第 二 种 情况 下 无 论调 用 多 
少 次 扔 套 函 数 ,都 只 有 一 个 栈 帧 。 这 就 是 ES6 尾 调用 优化 的 关键 : 如 果 函 数 的 逮 辑 允许 基于 尾 调用 将 其 
销毁 ， 则 引擎 就 会 那么 做 。 










































































有 办 法 测试 尾 调 用 优化 是 否 起 作用 。 不 过 ， 因 为 这 是 ES6 规范 所 规定 的 ， 


注意 现在 还 没 
实现 都 能 保证 在 代码 满足 条 件 的 情况 下 应 用 这 个 优化 。 


永 
兼容 的 浏览 器 





10.13.1 尾 调用 优化 的 条 件 

尾 调用 优化 的 条 件 就 是 确定 外 部 栈 帧 真 的 没有 必要 存在 了 。 涉 及 的 条 件 如 下 : 
口 代码 在 严格 模式 下 执行 ; 
口 外 部 函数 的 返回 值 是 对 尾 调用 函数 的 调用 ; 
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酒 加 








口 尾 调用 函数 返回 后 不 需要 执行 额外 的 逻辑 ; 
口 尾 调 用 函数 不 是 引用 外 部 函数 作用 域 中 自由 变量 的 闭 包 。 
下 面 展示 了 几 个 违反 上 述 条 件 的 函数 ， 因 此 都 不 符号 尾 调 用 优化 的 要 求 : 


"use strict"; 









































// 无 优化 : 尾 调用 没有 返回 
function outerFunction() { 
innerFunction(); 


} 


// 无 优化 : 尾 调用 没有 直接 返回 

function outerFunction() { 
let innerFunctionResult = innerFunction(); 
return innerFunctionResult; 


} 


// 无 优化 : 尾 调 用 返回 后 必须 转型 为 字符 事 
function outerFunction() { 
return innerFunction().tostring(); 


} 


// 无 优化 : 尾 调 用 是 一 个 闭 包 

function outerFunction() { 
let foo = 'bar'; 
function innerFunction() { return foo; } 





return innerFunction(); 


} 
下 面 是 几 个 符合 尾 调 用 优化 条 件 的 例子 : 


"use strict"; 





// 有 优化 : 栈 帧 销毁 前 执行 参数 计算 
function outerFunction(a, b) { 
return innerFunction(a + b); 


} 


// 有 优化 : 初始 返回 值 不 涉及 栈 帧 
function outerFunction(a, b) { 
if (a < b) { 
return a; 
} 
return innerFunction(a + b); 


} 
// 有 优化 : 两 个 内 部 函数 部 在 尾部 


function outerFunction(condition) { 
return condition ? innerFunctionA() : innerFunctionB(); 


} 

差异 化 尾 调 用 和 递归 尾 调用 是 容易 让 人 混淆 的 地 方 。 无 论 是 递归 尾 调用 还 是 非 递 归 尾 调用 , 都 可 以 
用 优化 。 引 警 并 不 区 分 尾 调用 中 调用 的 是 函数 自身 还 是 其 他 函数 。 不 过 ， 这 个 优化 在 递归 场景 下 的 效 
是 最 明显 的 ， 因 为 递归 代码 最 容易 在 栈 内 存 中 迅速 产生 大 量 栈 帧 。 
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注意 之 所 以 要 求 严格 模式 ， 主 要 因为 在 非 严 格 模式 下 函数 调用 中 允许 使 用 f.arguments 
和 f.caller， 而 它们 都 会 引用 外 部 函数 的 栈 帧 。 显 然 ， 这 意味 着 不 能 应 用 优化 了 。 因 此 


尾 调 用 优化 要 求 必 须 在 严格 模式 下 有 效 ， 以 防止 引用 这 些 属性 。 





10.13.2” 尾 调 用 优化 的 代码 


可 以 通过 把 简单 的 递归 函数 转换 为 待 优化 的 代码 来 加 深 对 尾 调 用 优化 的 理解 。 下面 是 一 个 通过 递归 
计算 斐 波 纳 契 数列 的 本 数 : 
function fipb(n) { 
E(k 


return n; 


} 


return fip(n - 1) + fip(n - 2); 
} 


console.log (fib(0)) PO 
console.log (fib(1)) pA A 
console.log (fib(2)) Zt 
console.log(fib(3)); // 2 
console.log(fib(4)); // 3 
console.log (fib(5)) LS 
console.log(fib(6)); // 8 














显然 这 个 函数 不 符合 尾 调用 优化 的 条 件 ， 因 为 返回 语句 中 有 一 个 相 加 的 操作 。 结 果 ，fib (n) 的 栈 
帧 数 的 内 存 复杂 度 是 0(2)。 因 此 ， 即 使 这 么 一 个 简单 的 调用 也 可 以 给 浏览 器 带 来 麻烦 : 

fib(1000); 

当然 ， 解 决 这 个 问题 也 有 不 同 的 策略 ， 比 如 把 递归 改写 成 磊 代 循环 形式 。 不 过 ,也 可 以 保持 递归 实 
现 , 但 将 其 重 构 为 满足 优化 条 件 的 形式 。 为 此 可 以 使 用 两 个 嵌 套 的 函数 ， 外 部 函数 作为 基础 框架 ， 内 部 
函数 执行 递归 


"use strict",; 


function fipb(n) { 
( 


return fibImpl 


















































} 
// 执行 递归 


function fibImpl(a, b, n) { 
Te (i, Sm) 
return a; 











return fibImpl(b a + b, n - 1); 








这 样 重 构 之 后 ,就 可 以 满足 尾 调用 优化 的 所 有 条 件 , 再 调用 fib (1000) 就 不 会 对 浏览 器 造成 威胁 了 。 


10.14 ” 闭 包 
匿名 函数 经 常 被 人 误 认 为 是 闭 包 (closure )。 闭 包 指 的 是 那些 引用 了 另 一 个 函数 作用 域 中 变量 的 冰 
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数 , 通常 是 在 般 套 函数 中 实现 的 。 比 如 ,下 面 是 之 前 展示 的 createCcomparisonFunction () 困 数 , 注 
意 其 中 加 粗 的 代码 : 
function createComparisonFunction(propertyName) { 
return function(object1l, object2) { 





let valuel 
let value2 


= objectl[propertyName]; 
= object2[propertyName]; 
if (valuel < value2) { 
return -1; 
} else if (valuel > value2) { 
return 1; 
} else { 
return 0; 
} 
Ds 
} 


这 里 加 粗 的 代码 位 于 内 部 函数 ( 











匿名 函数 ) 中 











， 其 中 引用 了 外 部 函数 的 变量 propertyName。 在 这 
个 内 部 函数 被 返回 并 在 其 他 地 方 被 使 用 后 ， 它 仍然 引用 着 那个 变量 。 这 
































是 因为 内 部 函数 的 作用 域 链 包 含 





createCcomparisonFunction() 函数 的 作用 域 。 要 理解 为 什么 会 这 样 ， 可 以 想 想 第 一 次 调用 这 个 函数 


时 会 发 生 什么 。 
本 书 在 第 4 章 曾 介绍 过 作用 域 链 
个 函数 时 ， 会 为 这 个 函数 调 




















调 





用 





用 创建 














的 概念 。 理 解 作用 域 链 创建 和 使 
个 执行 上 下 文 ， 并 














用 的 细节 对 理解 闭 包 非常 重要 。 在 
创建 一 个 作用 域 链 。 人 然后 用 arguments 





























和 其 他 命名 参数 来 初始 化 这 个 函数 的 活动 对 象 。 外 部 函数 的 活动 对 象 是 内 部 函数 作用 域 链 上 的 第 二 个 对 








象 。 这 个 作用 域 链 
在 函数 执行 时 ， 要 从 作用 域 链 中 查找 变量 ， 


function compare(valuel， 
if (valuel < value2) { 
return -1; 
} else if (valuel > value2) { 
return 1; 
} else { 
return 0; 











value2) { 


let result = compare(5, 10); 














直 向 外 串 起 了 所 有 包含 函数 的 活动 对 象 ， 直 到 全 局 执行 上 下 文才 终止。 
以 便 读 、 写 值 。 来 看 下 面 的 代码 : 


























这 里 定义 的 compare () 函数 是 在 全 局 上 下 文 





1 调用 的 。 第 一 次 调用 compare () 时 ， 会 为 它 创建 一 








个 包含 arguments、valuel 和 value2 











的 活动 对 象 ， 这 个 对 象 是 其 作 





上 下 文 的 变量 对 象 则 是 compare () 作用 
到 10-1 展示 了 以 上 关系 。 


























函数 执行 时 ， 每 个 执行 上 下 文中 都 会 有 一 个 包含 其 





会 在 代码 执行 期 间 始 终 存 在 。 而 函数 局 部 上 下 文 





compare () 图 数 时 ， 就 会 为 它 创建 作用 域 链 ， 预 装载 全 局 变量 对 象 , 并 保存 在 内 部 的 [[Scope 
函数 时 ,会 创建 相应 的 执行 上 下 文 ,然后 通过 复制 函数 的 [ [Scope] 


调用 这 个 
会 创建 函数 的 活动 对 象 ( 


























用 域 链 上 的 第 一 个 对 象 。 而 全 局 











域 链 上 的 第 二 个 对 象 ， 其 中 包含 this、result 和 compare。 





变量 的 对 象 。 全 局 上 下 文中 的 叫 变量 对 象 ， 它 














! 的 叫 活动 对 象 ， 只 在 函数 执行 期 间 存在 。 在 定义 





] 中 ,在 
用 域 链 。 接 着 

















来 创建 其 作 





用 作 变 量 对 象 ) 并 将 其 推 人 作用 域 链 的 前 端 。 在 这 个 例子 中 , 这 意味 着 compare () 




















函数 执行 上 下 文 的 作用 域 链 中 有 两 个 变量 对 象 : 局 部 变量 对 象 和 全 局 变量 对 象 。 作 用 域 链 





其 实 是 一 个 包 
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含 指针 的 列表 ， 每 个 指针 分 别 指向 一 个 变量 对 象 ， 但 物理 上 并 不 会 包含 相应 的 对 象 。 




























全 局 变量 对 象 


| Compare 


[compare 0 函数 的 执行 上 下 文 作用 域 链 | zesult 
| 《作用 域 链 ) | 1 
0 





























图 10-1 








函数 内 部 的 代码 在 访问 变量 时 ,就 会 使 用 给 定 的 名 称 从 作用 域 链 中 查找 变量 。 函 数 执行 完毕 后 ,局 
部 活动 对 象 会 被 销毁 ， 内 存 中 就 只 剩 下 全 局 作用 域 。 不 过 ， 闭 包 就 不 一 样 了 。 
在 一 个 函数 内 部 定义 的 函数 会 把 其 包含 函数 的 活动 对 象 添 加 到 自己 的 作用 域 链 中 。 因 此 ,在 
匿名 函数 的 作用 域 链 中 实际 上 包含 createComparison- 
































createComparisonFunction() 函数 中 ; 








Function() 的 活动 对 象 。 图 10-2 展示 了 以 下 代码 执行 后 的 结果 。 


createComparisonFunction('name'); 
"Nieholas™ “3; 


let compare = 


let result = compare({ name: { name: 'Matt' }); 





全 局 变量 对 象 





createComparisonFunction 
result undef ined 


createComparisonFunction(} 




















createComparisonFunction() 
国 数 的 执行 上 下 文 




















| 《作用 域 链 ) | 一 一 














函数 的 活动 对 象 
arguments ["name"] 
propertyName "name" 























匿名 函数 的 执行 上 下 文 


(作用 域 链 ) | e@ 一 一 
































闭 包 的 活动 对 象 
"Nicholas"}, 


忆 [ {name: 
ER {name: "Greg"}] 


CAUSE 








图 10-2 
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在 createComparisonFunction() 返 回 匿名 聘 数 后 ， 它 的 作用 域 链 被 初始 化 为 包含 create- 
ComparisonFunction () 的 活动 对 象 和 全 局 变量 对 象 , 这 样 , 匿名 函数 就 可 以 访问 到 createComparison- 
Eunction() 可 以 访问 的 所 有 变量 。 另 一 个 有 意思 的 副作用 就 是 ，createcomparisonFunction() 的 
活动 对 象 并 不 能 在 它 执行 完毕 后 销毁 ， 因 为 匿名 函数 的 作用 域 链 中 仍然 有 对 它 的 引用 。 在 create- 
ComparisonFunction () 执 行 完 毕 后 ， 其 执行 上 下 文 的 作用 域 链 会 销毁 ， 但 它 的 活动 对 象 仍然 会 保留 
在 内 存 中 ， 直 到 匿名 函数 被 销毁 后 才 会 被 销毁 : 

// 创建 比较 函数 


let compareNames = createComparisonFunction('name'); 





























// 调用 函数 


let result = compareNames({ name: 'Nicholas' }, { name: 'Matt' }) 


// 解除 对 函数 的 引用 ， 这 样 就 可 以 释放 内 存 了 

compareNames = null; 

这 里 ， 创 建 的 比较 函数 被 保存 在 变量 compareNames 中 。 把 compareNames 设置 为 等 于 null 会 
解除 对 函数 的 引用 ， 从 而 让 垃圾 回收 程序 可 以 将 内 存 释放 掉 。 作 用 域 链 也 会 被 销毁 ， 其 他 作用 域 ( 除 全 
局 作用 域 之 外 ) 也 可 以 销毁 。 图 10-2 展示 了 调用 compareNames () 之 后 作用 域 链 之 间 的 关系 。 






































注意 ”因为 闭 包 会 保留 它们 包含 函数 的 作用 域 ， 所 以 比 其 他 函数 更 占用 内 存 。 过 度 使 用 闭 
包 可 能 导致 内 存 过 度 占用 ,因此 建议 仅 在 十 分 必要 时 使 用 。V8 等 优化 的 JavaScript 引擎 会 





努力 回收 被 闭 包 困 住 的 内 存 ， 不 过 我 们 还 是 建议 在 使 用 闭 包 时 要 谨慎 。 


10.14.1 this 对 象 


在 闭 包 中 使 用 this 会 让 代码 变 复杂 。 如 果 内 部 函数 没有 使 用 箭头 函数 定义 ， 则 this 对 象 会 在 运 
行 时 绑 定 到 执行 函数 的 上 下 文 。 如 果 在 全 局 函数 中 调用 ， 则 this 在 非 严 格 模式 下 等 于 window， 在 严 
格 模式 下 等 于 undaefined。 如 果 作为 某 个 对 象 的 方法 调用 , 则 this 等 于 这 个 对 象 。 匿名 函数 在 这 种 情 
况 下 不 会 绑 定 到 某 个 对 象 , 这 就 意味 着 this 会 指向 window, 除非 在 严格 模式 下 this 是 undefined。 
不 过 ， 由 于 闭 包 的 写法 所 致 ， 这 个 事实 有 时 候 没 有 那么 容易 看 出 来 。 来 看 下 面 的 例子 : 


window.identity = 'The Window'; 



























































let object = { 
identity: 'My Object', 
getIdentityFunc() { 
return function() { 
return this.identity; 
jy 
} 
ye 


console.log(object.getIidentityFunc()()); // 'The Window' 

这 里 先 创 建 了 一 个 全 局 变量 idqentity， 之 后 又 创建 一 个 包含 idaentity 属性 的 对 象 。 这 个 对 象 还 
包含 一 个 getIdentityFunc () 方 法 ， 返 回 一 个 匿名 函数 。 这 个 匿名 函数 返回 this.identity。 因 为 
getIdentityFunc() 返 回 图 数 ， 所 以 object .getIdentityFunc() () 会 立即 调用 这 个 返回 的 函数 ， 
从 而 得 到 一 个 字符 串 。 可 是 ， 此 时 返回 的 字符 串 是 "The winodw"， 即 全 局 变量 iaentity 的 值 。 为 什 
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么 匿名 函数 没有 使 用 其 包含 作用 域 (getIdentityFunc() ) 的 this 对 象 呢 ? 

前 面 介 绍 过 ,每 个 函数 在 被 调用 时 都 会 自动 创建 两 个 特殊 变量 : this 和 arguments。 内 部 函数 永 
远 不 可 能 直接 访问 外 部 函数 的 这 两 个 变量 。 但 是 ， 如 果 把 this 保存 到 闭 包 可 以 访问 的 另 一 个 变量 中 ， 
则 是 行 得 通 的 。 比 如 : 


window.identity = 'The Window'; 






































let object = { 
identity: 'My Object', 
getIdentityFunc() { 
let that = this; 
return function() { 
return that.identity; 
地 
} 
于 


console.log(object.getIdentityFunc()()); // 'My Object' 

这 里 加 粗 的 代码 展示 了 与 前 面 那个 例子 的 区 别 。 在 定义 匿名 函数 之 前 ， 先 把 外 部 函数 的 this 保存 
到 变量 that 中 。 然 后 在 定义 闭 包 时 ， 就 可 以 让 它 访问 that ， 因 为 这 是 包含 函数 中 名 称 没有 任何 冲突 的 
一 个 变量 。 即 使 在 外 部 函数 返回 之 后 , that 仍然 指向 object ,所 以 调用 object .getIdentityFunc() () 
就 会 返回 "My Object"。 
































注意 this 和 arguments 都 是 不 能 直接 在 内 部 函数 中 访问 的 ,如 果 想 访问 包含 作用 域 中 


的 arguments 对 象 ， 则 同样 需要 将 其 引用 先 保存 到 闭 包 能 访问 的 另 一 个 变量 中 。 








在 一 些 特殊 情况 下 ，this 值 可 能 并 不 是 我 们 所 期 待 的 值 。 比 如 下 面 这 个 修改 后 的 例子 : 


window.identity = 'The Window'; 
let object = { 
identity: 'My Object', 
getIdentity () { 
return this.identity; 
} 


getIdentity () 方 法 就 是 返回 this.identity 的 值 。 以 下 是 几 种 调用 object .getIdentity() 
的 方式 及 返回 值 : 





object .getIdentity(); // 'My Object' 
(object .getIdentity) (); // 'My Object' 
(object .getIdentity = object.getIdentity)(); // 'The Window' 
A 








第 一 行 调用 object .getIdentity () 是 正常 调用 ,会 返回 "My Object", 因为 this.identity 
就 是 object .igdentity。 第 二 行 在 调用 时 把 opject .getIgentity 放 在 了 括号 里 。 虽 然 加 了 括号 之 
后 看 起 来 是 对 一 个 函数 的 引用 , 但 this 值 并 没有 变 。 这 是 因为 按照 规范 ，object .getIgdentity 和 
(object .getIdentity) 是 相等 的 。 第 三 行 执行 了 一 次 赋值 ， 然 后 再 调用 赋值 后 的 结果 。 因 为 赋值 表 
达 式 的 值 是 函数 本 身 ，this 值 不 再 与 任何 对 象 绑 定 ， 所 以 返回 的 是 "The Wingdow"。 

一 般 情况 下 , 不 大 可 能 像 第 二 行 和 第 三 行 这 样 调用 对 象 上 的 方法 。 但 通过 这 个 例子 , 我 们 可 以 知道 ， 
即使 语法 稍 有 不 同 ， 也 可 能 影响 this 的 值 。 
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10.14.2 内存 泄漏 


由 于 正在 正 9 之 前 对 JScript 对 象 和 COM 对 象 使 用 了 不 同 的 垃圾 回收 机 制 (第 4 章 讨 论 过 )， 所 以 
闭 包 在 这 些 旧 版 本 卫 中 可 能 会 导致 问题 。 在 这 些 版 本 的 下 中 , 把 HTML 元 素 保存 在 某 个 闭 包 的 作用 域 
中 ， 就 相当 于 宣布 该 元 素 不 能 被 销毁 。 来 看 下 面 的 例子 : 

function assignHandler() { 
let element = document .getElementById('someElement'); 


element.onclick = () => console.log(element.id); 
} 


以 上 代码 创建 了 一 个 闭 包 ， 即 element 元 素 的 事件 处 理 程序 ( 事件 处 理 程序 将 在 第 13 章 讨论 )。 
而 这 个 处 理 程序 又 创建 了 一 个 循环 引用 。 匿 名 函数 引用 着 assignHandler () 的 活动 对 象 ， 阻 止 了 对 
element 的 引用 计数 归 零 。 只 要 这 个 匿名 函数 存在 ，element 的 引用 计数 就 至 少 等 于 1。 也 就 是 说 ， 
内 存 不 会 被 回收 。 其 实 只 要 这 个 例子 稍 加 修改 ， 就 可 以 避免 这 种 情况 ， 比 如 : 


function assignHandler() { 
let element = document .getElementById('someElement'); 
let id = element.id; 











































































































element.onclick = () => console.log(id); 


element = null; 
} 


在 这 个 修改 后 的 版 本 中 , 闭 包 改 为 引用 一 个 保存 着 element . id 的 变量 ia, 从 而 消除 了 循环 引用 。 
不 过 ， 光 有 这 一 步 还 不 足以 解决 内 存 问题 。 因 为 闭 包 还 是 会 引用 包含 函数 的 活动 对 象 ， 而 其 中 包含 
element。 即 使 闭 包 没有 直接 引用 element ,包含 函数 的 活动 对 象 上 还 是 保存 着 对 它 的 引用 。 因 此 , 必 
须 再 把 element 设置 为 nul1。 这 样 就 解除 了 对 这 个 COM 对 象 的 引用 ， 其 引用 计数 也 会 减少 ， 从 而 确 
保 其 内 存 可 以 在 适当 的 时 候 被 回收 。 


10.15 “立即 调用 的 函数 表达 式 


立即 调用 的 匿名 函数 又 被 称 作 立即 调用 的 函数 表达 式 (IIFE ，Immediately Invoked Function 
Expression )。 它 类 似 于 函数 声明 ,但 由 于 被 包含 在 括号 中 ， 所 以 会 被 解释 为 函数 表达 式 。 紧 跟 在 第 一 组 
括号 后 面 的 第 二 组 括号 会 立即 调用 前 面 的 函数 表达 式 。 下 面 是 一 个 简单 的 例子 : 

(function() { 

// 块 级 作用 域 

}) 0) 3 
使 用 IFE 可 以 模拟 块 级 作用 域 ， 即 在 一 个 函数 表达 式 内 部 声明 变量 ， 然 后 立即 调用 这 个 函数 。 这 
样 位 于 函数 体 作 用 域 的 变量 就 像 是 在 块 级 作用 域 中 一 样 。 ECMAScript 5 尚未 支持 块 级 作用 域 , 使 用 IIFE 
模拟 块 级 作用 域 是 相当 普遍 的 。 比 如 下 面 的 例子 : 


站 汪 计 家 名 
(function () { 
for (var i = 0; i < count; i++) { 
console.1log(i); 



























































































































































































































































})(9? 


console.log(i); // 抛 出 错误 
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前 面 的 代码 在 执行 到 IIFE 外 部 的 console.1og () 时 会 出 错 , 因 为 它 访问 的 变量 是 在 IFE 内 部 定义 
的 ， 在 外 部 访问 不 到 。 在 ECMAScript 5.1 及 以 前 ， 为 了 防止 变量 定义 外 泄 ，IEE 是 个 非常 有 效 的 方式 。 
这 样 也 不 会 导致 团 包 相关 的 内 存 问 题 ， 因 为 不 存在 对 这 个 匿名 函数 的 引用 。 为 此 ， 只 要 函数 执行 完毕 ， 
其 作用 域 链 就 可 以 被 销毁 。 
在 ECMAScript6 以 后 ，IIFE 就 没有 那么 必要 了 ， 因 为 块 级 作用 域 中 的 变量 无 须 IIFE 就 可 以 实现 同 
样 的 隔离 。 下 面 展示 了 两 种 不 同 的 块 级 作用 域 形 式 : 
// 内 吝 块 级 作用 域 
, let i; 
fOr (i SE" 0 Te OUnE 全 沁 下 人 汪 
console.log(i); 


} 
console.10g(i); // 抛 出 错误 


















































// 循环 的 块 级 作用 域 
for (let i = 0; i < count; i++) { 
console.1log(i); 


} 


console.10g(i); // 抛 出 错误 


说 明 IFE 用 途 的 一 个 实际 的 例子 ， 就 是 可 以 用 它 锁定 参数 值 。 比 如 : 


let divs = document .querySelectorAll('div'); 























// 达 不 到 目的 | 
for (var i = 0; i < divs.length; ++i) { 
divs[i] .addEventListener('click', function() { 
console.1log(i); 
3 
} 


这 里 使 用 var 关键 字 声明 了 循环 迭代 变量 i， 但 这 个 变量 并 不 会 被 限制 在 for 循环 的 块 级 作用 域内 。 
因此 ， 泻 染 到 页 面 上 之 后 ,点击 每 个 <aiv> 都 会 弹出 元 素 总 数 。 这 是 因为 在 执行 单 击 处 理 程序 时 ， 和 迭代 变 
量 的 值 是 循环 结束 时 的 最 终 值 ， 即 元 素 的 个 数 。 而 且 ， 这 个 变量 i 存在 于 循环 体外 部 ， 随 时 可 以 访问 。 

以 前 , 为 了 实现 点 击 第 几 个 <aiv> 就 显示 相应 的 索引 值 , 需要 借助 IFE 来 执行 一 个 函数 表达 式 , 传 
入 每 次 循环 的 当前 索引 ， 从 而 “锁定 ”点 击 时 应 该 显示 的 索引 值 : 


let divs = document .querySelectorAll('div'); 
























































for (var i = 0; i < divs.length; ++i) { 
divs[i].addEventListener('click', (function(frozenCounter) { 
return function() { 
console.log(frozenCounter); 
}; 
}) (i)); 
} 


而 使 用 ECMAScript 块 级 作用 域 变 量 ， 就 不 用 这 么 大 动 干戈 了 : 


let divs = document .querySelectorAll('div'); 





for (let i = 0; i < divs.length; ++i) { 
divs[i] .addEventListener('click', function() { 
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console.1log(i); 
eh 
} 


这 样 就 可 以 让 每 次 点 击 都 显示 正确 的 索引 了 。 这 里 , 事件 处 理 程序 执行 时 就 会 引用 for 循环 块 级 作 
用 域 中 的 索引 值 。 这 是 因为 在 ECMAScript 6 中 ， 如 果 对 for 循环 使 用 块 级 作用 域 变量 关键 字 ， 在 这 里 
就 是 let ， 那 么 循环 就 会 为 每 个 循环 创建 独立 的 变量 ， 从 而 让 每 个 单 击 处 理 程序 都 能 引用 特定 的 索引 。 
日 要 注意 ,如果 把 变量 声明 拿 到 for 循环 外 部 , 那 就 不 行 了 。 下面 这 种 写法 会 碰 到 跟 在 循环 中 使 用 
var i = 0 同样 的 问题 : 


let divs = document .querySelectorAll('div'); 

























































































// 达 不 到 目的 | 
let i; 
for (i = 0; i < divs.length; ++i) { 
divs[i] .addEventListener('click', function() { 
console.log(i); 
} 


10.16 ”私有 变量 


严格 来 讲 ，JavaScript 没有 私有 成 员 的 概念 ， 所 有 对 象 属性 都 公有 的 。 不 过 ， 倒 是 有 私有 变量 的 概 
念 。 任 何 定义 在 函数 或 块 中 的 变量 , 都 可 以 认为 是 私有 的 ， 因 为 在 这 个 函数 或 块 的 外 部 无 法 访问 其 中 的 
变量 。 私 有 变量 包括 函数 参数 、 局 部 变量 ， 以 及 函数 内 部 定义 的 其 他 函数 。 来 看 下 面 的 例子 : 

function add (numl, num2) { 

let sum = numl + num2; 


return sum; 


} 

在 这 个 函数 中 ， 函 数 aada() 有 3 个 私有 变量 : numl 、num2 和 sum。 这 几 个 变量 只 能 在 函数 内 部 使 
， 不 能 在 函数 外 部 访问 。 如 果 这 个 函数 中 创建 了 一 个 闭 包 ， 则 这 个 闭 包 能 通过 其 作用 域 链 访 问 其 外 部 
的 这 3 个 变量 。 基 于 这 一 点 ， 就 可 以 创建 出 能 够 访问 私有 变量 的 公有 方法 。 

特权 方法 〈privileged method ) 是 能 够 访问 函数 私有 变量 〈 及 私有 函数 ) 的 公有 方法 。 在 对 象 上 有 
两 种 方式 创建 特权 方法 。 第 一 种 是 在 构造 函数 中 实现 ， 比 如 : 


function MyObject() { 
// 私有 变量 和 私有 函数 
let PrivateVariable = 10; 


















































酒 























function privateFunction() { 
return false; 


} 


// 特权 方法 
this.publicMethod = function() { 
privateVariable++; 
return privateFunction(); 
bys 
} 


这 个 模式 是 把 所 有 私有 变量 和 私有 函数 都 定义 在 构造 函数 中 。 然后, 再 创建 一 个 能 够 访问 这 些 私 有 
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成 员 的 特权 方法 。 这 样 做 之 所 以 可 行 ， 是 因为 定义 在 构造 函数 中 的 特权 方法 其 实 是 一 个 财 包 ,， 它 具有 访 
问 构造 函数 中 定义 的 所 有 变量 和 函数 的 能 力 。 在 这 个 例子 中 ,变量 privatevariable 和 耳 数 
privateFEunction() 只 能 通过 publicMethod () 方 法 来 访问 。 在 创建 Myvobject 的 实例 后 , 没有 办 法 
直接 访问 privatevariable 和 privateFunction()， 了 唯一 的 办 法 是 使 用 publicMethod()。 

如 下 面 的 例子 所 示 ， 可 以 定义 私有 变量 和 特权 方法 ， 以 隐藏 不 能 被 直接 修改 的 数据 : 


function Person(name) { 
this.getName = function() { 
return name; 


}3 






























































this.setName = function (value) { 
name = value; 
二 
} 


let person = new Person('Nicholas'); 





console.log(person.getName()); // 'Nicholas' 
person.setName('Greg'); 

console.log(person.getName()); // 'Greg' 

这 段 代 码 中 的 构造 函数 定义 了 两 个 特权 方法 : getName () 和 setName () 。 每 个 方法 都 可 以 构造 函 


























数 外 部 调用 , 并 通过 它们 来 读 写 私 有 的 name 变量 。 在 Person 构造 函数 外 部 , 没有 别 的 办 法 访问 name。 
因为 两 个 方法 都 定义 在 构造 函数 内 部 ， 所 以 它们 都 是 能 够 通过 作用 域 链 访 问 name 的 闭 包 。 私 有 变量 
name 对 每 个 Person 实例 而 言 都 是 独一无二 的 , 因为 每 次 调用 构造 函数 都 会 重新 创建 一 套 变量 和 方法 。 
不 过 这 样 也 有 个 问题 : 必须 通过 构造 函数 来 实现 这 种 隔离 。 正 如 第 8 章 所 讨论 的 ,构造 函数 模式 的 缺点 
是 每 个 实例 都 会 重新 创建 一 遍 新 方法 。 使 用 静态 私有 变量 实现 特权 方法 可 以 避免 这 个 问题 。 


10.16.1 静态 私有 变量 
特权 方法 也 可 以 通过 使 用 私有 作用 域 定义 私有 变量 和 函数 来 实现 。 这 个 模式 如 下 所 示 : 


(function() { 
// 私有 变量 和 私有 函数 
let PrivateVariable = 10; 


















































function privateFunction() { 
return false; 


} 


// 构造 函数 
MyObject = function() {}; 


// 公有 和 特权 方法 
MyObject .prototype.publicMethod = function() { 
privateVariable+t+; 
return privateFunction(); 
Da 
在 这 个 模式 中 ,匿名 函数 表达 式 创建 了 一 个 包含 构造 函数 及 其 方法 的 私有 作用 域 。 首 先 定义 的 是 私 
有 变量 和 私有 洱 数 ,然后 又 定义 了 构造 函数 和 公有 方法 。 公 有 方法 定义 在 构造 函数 的 原型 上 , 与 典型 的 
原型 模式 一 样 。 注 意 ， 这 个 模式 定义 的 构造 函数 没有 使 用 函数 声明 ， 使 用 的 是 函数 表达 式 。 函 数 声明 会 
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创建 内 部 函数 ， 在 这 里 并 不 是 必需 的 。 基 于 同样 的 原因 (但 操作 相反 )， 这 里 声明 Myobject 并 没有 使 


用 任何 关键 字 。 因 为 不 使 用 关键 字 声 明 的 变量 会 创建 在 全 局 作用 域 中 ,所 以 Myobject 变 成 了 全 局 变量 ， 














可 以 在 这 个 私有 作用 域外 部 被 访问 。 注 意 在 严格 模式 下 给 未 声明 的 变量 赋值 会 导致 错误 。 




















这 个 模式 与 前 一 个 模式 的 主要 区 别 就 是 , 私有 变量 和 私有 函数 是 由 实例 共享 的 。 因 为 特权 方法 定义 











在 原型 上 ， 所 以 同样 是 由 实例 共享 的 。 特 权 方 法 作为 一 个 闭 包 ， 始终 引用 着 包含 它 的 作用 域 。 来 看 下 面 


的 例子 : 
(function() { 
let name = "'" 
Person = function(value) { 


name = value; 

1 

Person.prototype.getName = function() { 
return name; 


ps 


Person.prototype.setName = function(value) { 
name = value; 


}) 0); 


let personl = new Person('Nicholas'); 


console.log(personl.getName()); // 'Nicholas' 
personl.setName('Matt'); 
console.log(personl.getName()); // 'Matt' 


let person2 = new Person('Michael'); 
console.log(personl.getName()); // 'Michael' 
console.log(person2.getName()); // 'Michael' 











() 和 setName () 方 法 一 样 。 使 用 这 














这 里 的 Person 构造 函数 可 以 访问 私有 变量 name, 跟 getNam 














种 模式 ，name 变 成 了 静态 变量 ， 可 供 所 有 实例 使 用 。 这 意味 着 在 任何 实例 上 调用 setName () 修改 这 个 
变量 都 会 影响 其 他 实例 。 调 用 setName () 或 创建 新 的 Person 实例 都 要 把 name 变量 设置 为 一 个 新 值 。 











而 所 有 实例 都 会 返回 相同 的 值 。 























像 这 样 创建 静态 私有 变量 可 以 利用 原型 更 好 地 重用 代码 ,只 是 每 个 实例 没有 了 自己 的 私有 变量 。 最 
终 ， 到 底 是 把 私有 变量 放 在 实例 中 ， 还 是 作为 静态 私有 变量 ， 都 需要 根据 自己 的 需求 来 确定 。 

















注意 ”使 用 闭 包 和 私有 变量 会 导致 作用 域 链 变 长 ， 作 用 域 链 越 长 ， 则 查找 变量 所 需 的 时 间 


也 越 多 。 


10.16.2 ”模块 模式 








前 面 的 模式 通过 自 定义 类 型 创建 了 私有 变量 和 特权 方法 。 而 下 函 











i 要 讨论 的 Douglas Crockford 所 说 的 








模块 模式 ， 则 在 一 个 单 例 对 象 上 实现 了 相同 的 隔离 和 封装 。 单 例 对 象 singleton ) 就 是 只 有 一 个 实例 的 








对 象 。 按 照 惯例 ，JavaScript 是 通过 对 象 字面 量 来 创建 单 例 对 象 的 ， 


let singleton = { 
name: value, 





如 下 面 的 例子 所 示 : 
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method() { 
// 方法 的 代码 
} 
于 了 
模块 模式 是 在 单 例 对 象 基 础 上 加 以 扩展 , 使 其 通过 作用 域 链 来 关联 私有 变量 和 特权 方法 。 模 块 模式 
的 样板 代码 如 下 : 
let singleton = function() { 
// 私有 变量 和 私有 汤 数 
let privateVariable = 10; 








function privateFunction() { 
return false; 


} 
// 特权 /公有 方法 和 属性 


return { 
publicPproperty: true, 


publicMethod() { 
privateVariable+t+; 
return privateFunction(); 
} 
二 
全 
模块 模式 使 用 了 匿名 函数 返回 一 个 对 象 。 在 匿名 函数 内 部 ， 首 先 定 义 私 有 变量 和 私有 函数 。 之 后 ， 
创建 一 个 要 通过 匿名 函数 返回 的 对 象 字面 量 。 这 个 对 象 字面 量 中 只 包含 可 以 公开 访问 的 属性 和 方法 。 
为 这 个 对 象 定义 在 匿名 函数 内 部 , 所 以 它 的 所 有 公有 方法 都 可 以 访问 同一 个 作用 域 的 私有 变量 和 私有 函 
数 。 本 质 上 ， 对 象 字 面 量 定义 了 单 例 对 象 的 公共 接口 。 如 果 单 例 对 象 需要 进行 某 种 初始 化 ,并且 需要 访 
问 私 有 变量 时 ， 那 就 可 以 采用 这 个 模式 : 
let _ application = function() { 


// 私有 变量 和 私有 函数 


let components = new Array (); 


// 初始 化 
components.push (new BaseComponent () ) ; 10 


// 公共 接口 
return { 
getComponentCount () { 
return components.length; 




























































































} 
registerComponent (component) { 

if (typeof component == 'object') { 
components.push (component); 


} 


Cs 

在 Web 开发 中 ， 经 常 需要 使 用 单 例 对 象 管理 应 用 程序 级 的 信息 。 上 面 这 个 简单 的 例子 创建 了 一 个 
application 对 象 用 于 管理 组 件 。 在 创建 这 个 对 象 之 后 ,内 部 就 会 创建 一 个 私有 的 数组 components， 
然后 将 一 个 Basecomponent 组 件 的 新 实例 添加 到 数组 中 。( Basecomponent 组 件 的 代码 并 不 重要 ,在 
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这 里 用 它 只 是 为 了 说 明 模块 模式 的 用 法 。) 对 象 字 面 量 中 定义 的 getCcomponentCount () 和 register- 
Component () 方 法 都 是 可 以 访问 components 私有 数组 的 特权 方法 。 前 一 个 方法 返回 注册 组 件 的 数量 ， 
后 一 个 方法 负责 注册 新 组 件 。 

在 模块 模式 中 ， 单 例 对 象 作为 一 个 模块 ， 经 过 初始 化 可 以 包含 菜 些 私有 的 数据 ， 而 这 些 数据 又 可 以 
通过 其 暴露 的 公共 方法 来 访问 。 以 这 种 方式 创建 的 每 个 单 例 对 象 都 是 object 的 实例 ， 因 为 最 终 单 例 都 
由 一 个 对 象 字 面 量 来 表示 。 不 过 这 无 关 紧要 ， 因 为 单 例 对 象 通常 是 可 以 全 局 访问 的 ， 而 不 是 作为 参数 传 
给 函数 的 ， 所 以 可 以 避免 使 用 instanceof 操作 符 确定 参数 是 不 是 对 象 类 型 的 需求 。 


10.16.3 ”模块 增强 模式 


另 一 个 利用 模块 模式 的 做 法 是 在 返回 对 象 之 前 先 对 其 进行 增强 。 这 适合 单 例 对 象 需要 是 某 个 特定 类 
型 的 实例 ， 但 又 必须 给 它 添加 额外 属性 或 方法 的 场景 。 来 看 下 面 的 例子 : 
let singleton = function() { 


// 私有 变量 和 私有 函数 
let PrivateVariable = 10; 























































































































function privateFunction() { 
return false; 


} 
// 创建 对 象 


let object = new CustomType() 


// 添加 特权 /公有 属性 和 方法 
object .publicPproperty = true; 


object.publicMethod = function() { 
privateVariable++; 
return privateFunction(); 


Ee 


// 返回 对 象 
return object; 
Cs 


如 果 前 一 节 的 application 对 象 必须 是 Basecomponent 的 实例 ， 那 么 就 可 以 使 用 下 面 的 代码 来 
创建 它 : 


let application = function() { 
// 私有 变量 和 私有 函数 


let _ components = new Array(); 











// 初始 化 
components.push (new BaseComponent ()); 


// 创建 局 部 变量 保存 实例 


let app = new BaseComponent (); 


// 公共 接口 
app.getComponentCount = function() { 
return components.1length; 


六 
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公共 方法 之 后 ， 匿 名 函数 返 
10.17 ”小结 
函数 是 JavaScript 编程 中 最 有 用 也 最 通用 的 工具 。ECMAScript 6 新 增 了 更 加 强大 的 语法 特性 ， 从 而 


让 开发 者 可 以 更 有 效 地 使 用 函数 。 
口 函数 表达 式 与 函数 声明 是 不 一 样 的 。 函 数 声明 要 求 写 出 函数 名 称 ， 而 函数 表达 式 并 不 需要 。 没 


app.registerComponent = function(component) { 


if (typeof component == 


"object") { 


components.push (component); 


} 
}3 


// 返回 实例 
return app; 


} () 7 


在 这 个 重 写 的 application 单 例 对 象 的 例子 
一 样 。 主 要 区 别 在 于 这 里 创建 了 一 个 名 为 app 的 变量 , 其 中 保存 了 BaseComponent 组 件 的 实例 。 这 是 
最 终 要 变 成 application 的 那个 对 象 的 局 部 版 本 。 在 给 这 个 局 部 变量 app 添加 了 能 够 访问 私有 变量 的 
回 了 这 个 对 象 。 然 后 ， 这 个 对 象 被 赋值 给 application。 



































， 首 先 定义 了 私有 变量 和 私有 函数 ， 跟 之 前 例子 


























有 名 称 的 函数 表达 式 也 被 称 为 





可 以 实现 函数 定义 和 调用 的 完 


什么 参数 等 信息 。 





变量 对 象 。 




















口 函数 可 以 在 创建 之 后 立即 调用 














会 被 销毁 。 





中 定义 的 变量 。 
口 可 以 访问 私有 变量 的 公共 方法 











强 模式 在 单 例 对 象 上 实现 。 



































匿名 国 数 。 





口 ES6 新 增 了 类 似 于 函数 表达 式 的 箭头 函数 语法 ,但 两 者 也 有 一 些 重要 区 别 。 
口 JavaScript 中 函数 定义 与 调用 时 的 参数 极其 灵活 ,arguments 对 象 ,以 及 ES6 新 增 的 扩展 操作 符 ， 








全 动态 化 。 














口 函数 内 部 也 暴露 了 很 多 对 象 和 引用 ,涵盖 了 函数 被 谁 调用 、 使 用 什么 调用 ， 以 及 调用 时 传 入 了 











口 JavaScript 引擎 可 以 优化 符合 尾 调 用 条 件 的 函数 ， 以 节省 栈 空间 。 
口 闭 包 的 作用 域 链 中 包含 自己 的 一 个 变量 对 象 ， 然 后 是 包含 函数 的 变量 对 象 ， 直 到 全 局 上 下 文 的 





口 通常 ， 函 数 作 用 域 及 其 中 的 所 有 变量 在 函数 执行 完毕 后 都 会 被 销 师 。 
口 闭 包 在 被 函数 返回 之 后 ， 其 作用 域 会 一 直 保 存在 内 存 中 ， 直 到 闭 包 被 销毁 。 












































， 执 行 其 中 代码 之 后 却 不 留 下 对 函数 的 引用 。 








口 立即 调用 的 函数 表达 式 如 果 不 在 包含 作用 域 中 将 返回 值 赋 给 一 个 变量 ， 则 其 包含 的 所 有 变量 都 








口 虽然 JavaScript 没有 私有 对 象 属性 的 概念 ,但 可 以 使 用 闭 包 实现 公共 方法 ,访问 位 于 包含 作用 域 





叫 作 特 权 方 法 。 











口 特权 方法 可 以 使 用 构造 函数 或 原型 模式 通过 自 定义 类 型 中 实现 ， 也 可 以 使 用 模块 模式 或 模块 增 














第 了 。 
期 约 与 异步 丽 数 























本 章 内 容 

口 异步 编程 只 
口 期 约 加 ee 
口 异步 函数 视频 讲解 














ECMAScript 6 及 之 后 的 几 个 版 本 逐步 加 大 了 对 异步 编程 机 制 的 支持 ,提供 了 令 人 眼前 一 亮 的 新 特 
性 。ECMAScript 6 新 增 了 正式 的 Promise (期 约 ) 引用 类 型 ,支持 优雅 地 定义 和 组 织 异 步 逻 辑 。 接 下 
来 几 个 版 本 增加 了 使 用 async 和 await 关键 字 定 义 异 步 限 数 的 机 制 。 




















注意 ”本章 示例 将 大 量 使 用 异步 日 志 输 出 的 方式 setTimeout (console.log, 0，... 
params) ， 间 在 演示 执行 顺序 及 其 他 异步 行为 。 异 步 输出 的 内 容 看 起 来 虽然 像 是 同步 输出 
的 ， 但 实际 上 是 异步 打印 的 。 这 样 可 以 让 期 约 等 返回 的 值 达到 其 最 终 状 态 。 


此 外 ， 浏 览 器 控制 台 的 输出 经 常 能 打印 出 JavaScript 运行 中 无 法 获取 的 对 象 信息 〈 比如 期 
约 的 状态 )， 这 个 特性 在 示例 中 广泛 使 用 ， 以 便 辅 助 读者 理解 相关 概念 。 





11.1 “异步 编程 


同步 行为 和 异步 行为 的 对 立 统一 是 计算 机 科学 的 一 个 基本 概念 。 特 别 是 在 JavaScript 这 种 单线 程 事 
件 循 环 模型 中 , 同步 操作 与 异步 操作 更 是 代码 所 要 依赖 的 核心 机 制 。 异 步行 为 是 为 了 优化 因 计算 量 大 而 
时 间 长 的 操作 。 如 果 在 等 待 其 他 操作 完成 的 同时 ， 即 使 运行 其 他 指令 ， 系 统 也 能 保持 稳定 ， 那 么 这 样 做 
就 是 务实 的 。 
重要 的 是 ,异步 操作 并 不 一 定 计算 量 大 或 要 等 很 长 时 间 。 只 要 你 不 想 为 等 待 某 个 异步 操作 而 阻塞 线 
旦 执行 ， 那 么 任何 时 候 都 可 以 使 用 。 


11.1.1 同步 与 异步 


同步 行为 对 应 内 存 中 顺序 执行 的 处 理 絮 指令 。 每 条 指令 都 会 严格 按照 它们 出 现 的 顺序 来 执行 ， 而 每 
条 指令 执行 后 也 能 立即 获得 存储 在 系统 本 地 (如 寄存 器 或 系统 内 存 ) 的 信息 。 这 样 的 执行 流程 容易 分 析 
程序 在 执行 到 代码 任意 位 置 时 的 状态 〈 比如 变量 的 值 )。 

同步 操作 的 例子 可 以 是 执行 一 次 简单 的 数学 计算 : 

let: X37 

广 = 区 + 44; 
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在 程序 执行 的 每 一 步 ， 都 可 以 推断 出 程序 的 状态 。 这 是 因为 后 面 的 指令 总 是 在 前 面 的 指令 完成 后 才 
会 执行 。 等 到 最 后 一 条 指定 执行 完毕 ， 存 储 在 x 的 值 就 立即 可 以 使 用 。 

这 两 行 JavaScript 代码 对 应 的 低级 指令 ( 从 JavaScript 到 x86 ) 并 不 难 想 象 。 首 先 ， 操作 系统 会 在 栈 
内 存 上 分 配 一 个 存储 浮 点 数值 的 空间 ,然后 针对 这 个 值 做 一 次 数学 计算 ,再 把 计算 结果 写 回 之 前 分 配 的 
内 存 中 。 所 有 这 些 指令 都 是 在 单个 线程 中 按 顺 序 执行 的 。 在 低级 指令 的 层面 ， 有 充足 的 工具 可 以 确定 系 
统 状态 。 

相对 地 ， 异 步行 为 类 似 于 系统 中 断 ， 即 当前 进程 外 部 的 实体 可 以 触发 代码 执行 。 异 步 操作 经 常 是 必 
要 的 ， 因 为 强制 进程 等 待 一 个 长 时 间 的 操作 通常 是 不 可 行 的 ( 同步 操作 则 必须 要 等 )。 如 果 代 码 要 访问 
一 些 高 延迟 的 资源 ， 比 如 向 远程 服务 器 发 送 请 求 并 等 竺 响应， 那么 就 会 出 现 长 时 间 的 等 待 。 

异步 操作 的 例子 可 以 是 在 定时 回调 中 执行 一 次 简单 的 数学 计算 : 


lek Xe. 3 
setTimeout(() =>x= xX + 4, 1000); 


这 段 程序 最 终 与 同步 代码 执行 的 任务 一 样 , 都 是 把 两 个 数 加 在 一 起 , 但 这 一 次 执行 线程 不 知道 x 值 
何 时 会 改变 ， 因 为 这 取决 于 回调 何 时 从 消息 队列 出 列 并 执行 。 

异步 代码 不 容易 推断 。 虽 然 这 个 例子 对 应 的 低级 代码 最 终 跟前 面 的 例子 没什么 区 别 , 但 第 二 个 指令 
块 (加 操作 及 赋值 操作 ) 是 由 系统 计时 器 触发 的 ， 这 会 生成 一 个 入 队 执 行 的 中 断 。 到 底 什么 时 候 会 触发 
这 个 中 断 ， 这 对 JavaScript 运行 时 来 说 是 一 个 黑 盒 ， 因 此 实际 上 无 法 预知 (尽管 可 以 保证 这 发 生 在 当前 
线程 的 同步 代码 执行 之 后 ， 和 否则 回调 都 没有 机 会 出 列 被 执行 ) 无 论 如 何 ， 在 排 定 回调 以 后 基本 没 办 法 
知道 系统 状态 何 时 变化 。 

为 了 让 后 续 代 码 能 够 使 用 x， 异步 执行 的 函数 需要 在 更 新 x 的 值 以 后 通知 其 他 代码 。 如 果 程 序 不 需 
要 这 个 值 ， 那 么 就 只 管 继续 执行 ， 不 必 等 待 这 个 结果 了 。 

设计 一 个 能 够 知道 x 什么 时 候 可 以 读 取 的 系统 是 非常 难 的 。JavaScript 在 实现 这 样 一 个 系统 的 过 程 
中 也 经 历 了 几 次 迭代 。 


11.1.2 以往 的 异步 编程 模式 


异步 行为 是 JavaScript 的 基础 , 但 以 前 的 实现 不 理想 。 在 早期 的 JavaScript 中 ,只 支持 定义 回调 函数 
来 表明 异步 操作 完成 。 串 联 多 个 异步 操作 是 一 个 常见 的 问题 ,通常 需要 深度 区 套 的 回调 也 数 (俗称 “ 回 
调 地 狱 ”) 来 解决 。 

假设 有 以 下 异步 函数 ， 使 用 了 setTimeout 在 一 秒 钟 之 后 执行 某 些 操作 : 


function double(value) { 
SetTimeout (() => setTimeout (console.log, 0, value * 2), 1000); 


} 







































































































































































































































































double (3); 
// 6 (大 约 1000 毫秒 之 后 ) 


这 里 的 代码 没什么 神秘 的 , 但 关键 是 理解 为 什么 说 它 是 一 个 异步 函数 。setTimeout 可 以 定义 一 个 
在 指定 时 间 之 后 会 被 调度 执行 的 回调 函数 。 对 这 个 例子 而 言 ，1000 毫秒 之 后 ，JavaScript 运行 时 会 把 回 
调 函 数 推 到 自己 的 消息 队列 上 去 等 待 执行 。 推 到 队列 之 后 ， 回 调 什么 时 候 出 列 被 执行 对 JavaScript 代码 
就 完全 不 可 见 了 。 还 有 一 点 ，double () 函数 在 setTimeout 成 功 调度 异步 操作 之 后 会 立即 退出 。 
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异步 返回 值 


1. 
假设 setTimeout 操作 会 返回 一 个 有 用 的 值 。 有 什么 好 办 法 把 这 个 值 传 给 需要 它 的 地 方 ? 广泛 接受 
的 一 个 策略 是 给 异步 操作 提供 一 个 回调 ,这 个 回调 中 包含 要 使 用 异步 返回 值 的 代码 ( 作为 回调 的 参数 )。 


function double(value, callback) { 
setTimeout(() => callback(value * 2)，1000) 


} 



































double(3, (x) => console.log(‘I was given: ${x}.)) 
// I was given: 6 (大 约 1000 毫秒 之 后 ) 


这 里 的 setTimeout 调用 告诉 JavaScript 运行 时 在 1000 毫秒 之 后 把 一 个 函数 推 到 消息 队列 上 。 这 




















个 函数 会 由 运行 时 负责 异步 调度 执行 。 而 位 于 函数 闭 包 中 的 回调 及 其 参数 在 异步 执行 时 仍然 是 可 用 的 。 


2. 失败 处 理 

















异步 操作 的 失败 处 理 在 回调 模型 中 也 要 考虑 ， 因 此 自然 就 出 现 了 成 功 回 调和 失败 回调 : 


function double(value, success, failure) { 








SetTimeout (() => { 
try { 
if (typeof value !== 'number') { 


throw 'Must provide number as first argument'; 


} 


success(2 * value); 
} catch (e) { 
failure(e); 


} 
}, 1000); 


} 


const successCallback 
const failureCallback 


(XxX) => console.log( Success: ${x}  ); 
(e) => console.log(‘Failure: $t{e}.); 


double(3, successCallback, failureCallback); 


double('b', 


// Success: 6 
// Failure: 


successCallback, failureCallback); 


(大 约 1000 毫秒 之 后 ) 
Must provide number as first argument (大 约 1000 毫秒 之 后 ) 








这 种 模式 已 经 不 可 取 了 ， 因 为 必须 在 初始 化 异步 操作 时 定义 回调 。 异步 函数 的 返回 值 只 在 短 时 间 内 
存在 ， 只 有 预备 好 将 这 个 短 时 间 内 存在 的 值 作为 参数 的 回调 才能 接收 到 它 。 


3. 谋 套 异步 回调 














如 果 蜡 步 返 值 又 依赖 另 一 个 异步 返回 值 ,那么 回调 的 情况 还 会 进一步 变 复 杂 。 在 实际 的 代码 中 , 这 





就 要 求 垦 套 回调 : 
function double(value, success, failure) { 
SetTimeout (() => { 
Bey + 
if (typeof value !== 'number') { 


throw 'Must provide number as first argument'; 


’ 


success(2 * value); 


} catch 


(e) { 


failure(e); 


} 


}; 000):; 
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} 


const successCallback = (x) => { 
double(x, (y) => console.log(‘Success: S${y}.)); 

}; 

const failureCallback = (e) => console.log( “Failure: S${e}.); 


double(3, successCallback, failureCallback); 


// Success: 12 (大 约 1000 毫秒 之 后 ) 
显然 ， 随 着 代码 越 来 越 复 杂 ， 回 调 策略 是 不 具有 扩展 性 的 “回调 地 狱 ” 这 个 称呼 可 谓 名 至 实 归 。 
嵌 套 回调 的 代码 维护 起 来 就 是 收 梦 。 


11.2 ”期 约 


期 约 是 对 尚 不 存在 结果 的 一 个 替身 。 期 约 (promise ) 这 个 名 字 最 早 是 由 Daniel Friedman 和 David Wise 
在 他 们 于 1976 年 发 表 的 论文 “The Impact of Applicative Programming on Multiprocessing” 中 提出 来 的 。 
但 直到 十 几 年 以 后 , Barbara Liskov 和 Liuba Shrira 在 1988 年 发 表 了 论文 “Promises: Linguistic Support for 
Efficient Asynchronous Procedure Calls in Distributed Systems”， 这 个 概念 才 真 正确 立 下 来 。 同 一 时 期 的 计 
算 机 科学 家 还 使 用 了 “终局 ”( eventual ) “期 许 ”(future ) “延迟 ”(delay ) 和 “ 迟 付 ”(deferred ) 等 
术语 指 代 同 样 的 概念 。 所 有 这 些 概念 描述 的 都 是 一 种 异步 程序 执行 的 机 制 。 













































































11.2.1 Promises/A+ 规 范 


早期 的 期 约 机 制 在 jQuery 和 Dojo 中 是 以 Deferred API 的 形式 出 现 的 。 到 了 2010 年， CommonJS 项 
日 实现 的 Promises/A 规范 日 益 流 行 起 来 。Q 和 Bluebird 等 第 三 方 JavaScript 期 约 库 也 越 来 越 得 到 社区 认 
可 ,虽然 这 些 库 的 实现 多 少 都 有 些 不 同 。 为 弥合 现 有 实现 之 间 的 差异 ,2012 年 Promises/A+ 组 织 分 义 ( fork ) 
了 CommonJS 的 Promises/A 建议 ， 并 以 相同 的 名 字 制 定 了 Promises/A+ 规 范 。 这 个 规范 最 终 成 为 了 
ECMAScript 6 规范 实现 的 范本 。 

ECMAScript 6 增加 了 对 Promises/A+ 规 范 的 完善 支持 ， 即 Promise 类 型 。 一 经 推出 ，Promise 就 
大 受 欢迎 ,成 为 了 主导 性 的 异步 编程 机 制 。 所 有 现代 浏览 器 都 支持 ES6 期 约 , 很 多 其 他 浏览 器 API ( 如 
fetch() 和 Battery Status API ) 也 以 期 约 为 基础 。 


11.2.2 ”期 约 基础 


ECMAScript 6 新 增 的 引用 类 型 promise， 可 以 通过 new 操作 符 来 实例 化 。 创 建新 期 约 时 需要 传人 
执行 需 (executor ) 函数 作为 参数 ( 后 面 马 上 会 介绍 )， 下 面 的 例子 使 用 了 一 个 空 函 数 对 象 来 应 付 一 下 解 
释 器 : 

let p = new Promise(() => {}); 

setTimeout (console.1log, 0, p); // Promise <pending> 


之 所 以 说 是 应 付 解 释 器 ， 是 因为 如 果 不 提供 执行 器 函数 ， 就 会 抛 出 syntaxError。 

1. 期 约 状 态 机 

在 把 一 个 期 约 实例 传 给 console .1og() 时 ， 控制 台 输 出 ( 可 能 因 浏 览 咒 不 同 而 略 有 差异 ) 表明 该 
实例 处 于 待定 (pending ) 状态 。 如 前 所 述 ， 期 约 是 一 个 有 状态 的 对 象 ， 可 能 处 于 如 下 3 种 状态 之 一 : 
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口 待定 ( pending ) 
口 兑现 (和 lfilled， 有 了 时候 也 称 为 “解决 "，resolved ) 
口 拒绝 (rejected ) 
待定 (pending ) 是 期 约 的 最 初始 状态 。 在 待定 状态 下 ， 期 























约 可 以 落 定 (settled ) 为 代表 成 功 的 兑现 


( fulfilled ) 状态 ， 或 者 代表 失败 的 拒绝 (rejected ) 状态 。 无 论 落 定 为 哪 种 状态 都 是 不 可 逆 的 。 只 要 从 待 
定 转换 为 兑现 或 拒绝 ， 期 约 的 状态 就 不 再 改变 。 而 且 ， 也 不 能 保证 期 约 必然 会 脱离 待定 状态 。 因 此 , 组 












































织 合 理 的 代码 无 论 期 约 解决 (resolve ) 还 是 拒绝 (reject )， 甚 至 永远 处 于 待定 (pending ) 状态 ， 都 应 该 


具有 恰当 的 行为 。 
重要 的 是 ， 期 约 的 状态 是 私有 的 ， 不 能 直接 通过 JavaScrip 





























t 检测 到 。 这 主要 是 为 了 避免 根据 读 取 到 





的 期 约 状态 ， 以 同步 方式 处 理 期 约 对 象 。 另 外 ， 期 约 的 状态 也 不 能 被 外 部 JavaScript 代码 修改 。 这 与 不 














能 读 取 该 状态 的 原因 是 一 样 的 : 期 约 故意 将 异步 行为 封装 起 来 


2. 解决 值 、 拒 绝 理由 及 期 约 用 例 
期 约 主要 有 两 大 用 途 。 首 先是 抽象 地 表示 一 个 异步 操作 。 
































， 从 而 隔离 外 部 的 同步 代码 。 











期 约 的 状态 代表 期 约 是 否 完成 。 待定” 














表示 尚未 开始 或 者 正在 执行 中 。“ 竞 现 ” 表 示 已 经 成 功 完成 ， 而 “拒绝 ” 则 表示 没有 成 功 完成 。 



































某 些 情况 下 ， 这 个 状态 机 就 是 期 约 可 以 提供 的 最 有 用 的 信息 。 知 道 一 段 异步 代码 已 经 完成 ,对 于 其 
他 代码 而 言 已 经 足够 了 。 比 如 ,假设 期 约 要 向 服务 器 发 送 一 个 HTTP 请 求 。 请 求 返 回 200~299 范围 内 的 









































状态 码 就 足以 让 期 约 的 状态 变 为 “兑现 ”。 类 似 地 ， 如 果 请 求 返 回 的 状态 码 不 在 200~299 这 个 范围 内 ， 








那么 就 会 把 期 约 状态 切换 为 “拒绝 ”。 








在 另外 一 些 情 况 下 ,期 约 封装 的 异步 操作 会 实际 生成 某 个 值 ， 而 程序 期 待 期 约 状态 改变 时 可 以 访问 











这 个 值 。 相 应 地 ， 如 果 期 约 被 拒绝 ， 程 序 就 会 期 待 期 约 状态 改变 时 可 以 拿 到 拒绝 的 理由 。 比 如 ,假设 期 


约 向 服务 器 发 送 一 个 HTTP 请 求 并 预定 会 返回 一 个 JSON。 如 明 





足以 让 期 约 的 状态 变 为 兑现 。 此 时 期 约 内 部 就 可 以 收 到 一 个 JS 

















请 求 返 回 范围 在 200~299 的 状态 码 ， 则 
ON 字符 串 。 类 似 地 ， 如 果 请 求 返 回 的 状 





态 码 不 在 200~299 这 个 范围 内 ， 那 么 就 会 把 期 约 状态 切换 为 拒绝 。 此 时 拒绝 的 理由 可 能 是 一 个 Error 





对 象 ， 包 含 着 HTTP 状态 人 码 及 相关 错误 消息 。 





为 了 支持 这 两 种 用 例 ， 每 个 期 约 只 要 状态 切换 为 竞 现 ,就 会 有 一 个 私有 的 内 部 值 ( value )。 类 似 地 ， 



































每 个 期 约 只 要 状态 切换 为 拒绝 ,就 会 有 一 个 私有 的 内 部 理由 (reason )。 无 论 是 值 还 是 理由 ,都 是 包含 原 











始 值 或 对 象 的 不 可 修改 的 引用 。 二 者 都 是 可 选 的 ， 而 且 默 认 值 为 undefined。 在 期 约 到 达 某 个 落 定 状 























态 时 执行 的 异步 代码 始终 会 收 到 这 个 值 或 理由 。 
3. 通过 执行 函数 控制 期 约 状态 





由 于 期 约 的 状态 是 私有 的 ， 所 以 只 能 在 内 部 进行 操作 。 内 部 操作 在 期 约 的 执行 器 函数 中 完成 。 执 行 
器 函数 主要 有 两 项 职责 : 初始 化 期 约 的 异步 行为 和 控制 状态 的 最 终 转 换 。 其 中 , 控制 期 约 状态 的 转换 是 
通过 调用 它 的 两 个 函数 参数 实现 的 。 这 两 个 函数 参数 通常 都 命名 为 resolve () 和 reject () 。 调 用 
resolve() 会 把 状态 切换 为 部 现 ， 调 用 reject () 会 把 状态 切换 为 拒绝 。 男 外 ,调用 reject () 也 会 抛 




















出 错误 〈 后面 会 讨论 这 个 错误 )。 


let pl = new Promise((resolve, reject) => resolvel( 




















)); 


setTimeout (console.log, 0, pl); // Promise <resolved> 


let p2 = new Promise((resolve, reject) => reject() 


); 


setTimeout (console.1og, 0, p2); // Promise <rejected> 


// Uncaught error (in promise) 
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在 前 面 的 例子 中 ,并 没有 什么 异步 操作 ， 因 为 在 初始 化 期 约 时 ,执行 器 函数 已 经 改变 了 每 个 期 约 的 
状态 。 这 里 的 关键 在 于 ， 执 行 器 函数 是 同步 执行 的 。 这 是 因为 执行 器 函数 是 期 约 的 初始 化 程序 。 通 过 下 
面 的 例子 可 以 看 出 上 面 代码 的 执行 顺序 : 


new Promise(() => setTimeout (console.log, 0, 'executor')); 
setTimeout (console.1log, 0, 'promise initialized'); 














// executor 
// promise initialized 


添加 setTimeout 可 以 推迟 切换 状态 : 


let p = new Promise( (resolve, reject) => setTimeout (resolve, 1000)); 


// 在 console.1og 打印 期 约 实 例 的 时 候 ， 还 不 会 执行 超时 回调 ( 即 resolve()) 
setTimeout (console.1og，0，Pp); // Promise <pending> 


无 论 resolve () 和 reject () 中 的 哪个 被 调用 , 状态 转换 都 不 可 撤销 了 。 于 是 继续 修改 状态 会 静默 
失败 ， 如 下 所 示 : 


let p = new Promise( (resolve, reject) => { 
resolve(); 
reject(); // 没有 效果 

es 



































setTimeout (console.1og, 0, p); // Promise <resolved> 


为 避免 期 约 卡 在 待定 状态 ， 可 以 添加 一 个 定时 退出 功能 。 比 如 ， 可 以 通过 setTimeout 设置 一 个 
10 秒 钟 后 无 论 如 何 都 会 拒绝 期 约 的 回调 : 


let p = new Promise( (resolve, reject) => { 
setTimeout (reject，10000); // 10 秒 后 调用 zeject () 
// 执行 函数 的 逻辑 

3 























setTimeout (console.1log, 0, p); // Promise <pending> 
setTimeout (console.1log，11000，p); // 11 秒 后 再 检查 状态 


// (After 10 seconds) Uncaught error 
// (After 11 seconds) Promise <rejected> 


因为 期 约 的 状态 只 能 改变 一 次 , 所 以 这 里 的 超时 拒绝 逻辑 中 可 以 放心 地 设置 让 期 约 处 于 待定 状态 的 
最 长 时 间 。 如 果 执 行 器 中 的 代码 在 超时 之 前 已 经 解决 或 拒绝 ,那么 超时 回调 再 尝试 拒绝 也 会 静默 失败 。 

4. Promise.resolve() Es 
期 约 并 非 一 开始 就 必须 处 于 待定 状态 ， 然 后 通过 执行 器 函数 才能 转换 为 落 定 状态 。 通 过 调用 
Promise.resolve() 静 态 方法 ， 可 以 实例 化 一 个 解决 的 期 约 。 下 面 两 个 期 约 实 例 实际 上 是 一 样 的 : 


let pl 
let p2 


这 个 解决 的 期 约 的 值 对 应 着 传 给 Promise .resolve() 的 第 一 个 参数 。 使 用 这 个 静态 方法 ,实际 上 
可 以 把 任何 值 都 转换 为 一 个 期 约 : 


setTimeout (console.1log, 0, Promise.resolve()); 
// Promise <resolved>: undefined 





TT 















































new Promise( (resolve, reject) => resolve()); 
Promise.resolve(); 








setTimeout (console.1log, 0, Promise.resolve(3)); 
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// Promise <resolved>: 3 
// 多 余 的 参数 会 忽略 
setTimeout (Console.1og，0，Promise.resolve(4，5，6)):， 
// Promise <resolved>: 4 



































对 这 个 静态 方法 而 言 ， 如 果 传 入 的 参数 本 身 是 
Promijse.resolve() 可 以 说 是 一 个 过 等 方法 ， 如 下 所 示 : 























个 期 约 ， 那 它 的 行为 就 类 似 于 一 个 空 包 装 。 因 此 ， 


let p = Promise.resolve(7) 

setTimeout (Console.1og，0，P === Promise.resolve(p)); 

// true 

setTimeout (console.l1log, 0, p === Promise.resolve(Promise.resolve(p))); 
// true 

人 AE 人 上 Lh 

这 个 需 等 性 会 保留 传人 期 约 的 状态 : 

let p = new Promise(() => {}); 

setTimeout (console.l1log, 0, p); // Promise <pending> 
setTimeout (console.log, 0, Promise.resolve(p)); // Promise <pending> 
setTimeout (console.log, 0, p === Promise.resolve(p)); // true 














注意 ， 这 个 静态 方法 能 够 包装 任何 非 期 约 值 ， 包 括 错 误 对 象 ， 并 将 
可 能 导致 不 符合 预期 的 行为 : 








let p = Promise.resolve (new Error('foo')); 
setTimeout (console.1log, 0, p); 
// Promise <resolved>: Error: foo 


5. Promise.reject() 
与 promise.resolve() 类 似 , Promise.reject () 会 实例 化 一 个 和 





















































划 


一 





转换 为 解决 的 期 约 。 因 此 ， 也 














E 绝 的 期 约 并 抛 出 一 个 异步 错误 
下 面 的 两 个 期 约 实例 实际 上 是 








(这 个 错误 不 能 通过 try/catch 捕获 ， 而 只 能 通过 拒绝 处 理 程序 捕获 )。 
一 样 的 : 

let pl = new Promise((resolve, reject) => reject()); 

let p2 = Promise.reject (); 

这 个 拒绝 的 期 约 的 理由 就 是 传 给 Promi se.reject () 的 第 一 个 参数 。 这 个 参数 也 会 传 给 后 续 的 拒 
绝 处 理 程序 : 

let p = Promise.reject (3); 

setTimeout (console.1log, 0, p); // Promise <rejected>: 3 

p.then(null, (e) => setTimeout (console.log, 0, e)); // 3 


关键 在 于 ，Promise .reject () 并 没有 照搬 Promi se .resolve() 的 窜 等 逻辑 。 如 果 












































约 对 象 ， 则 这 个 期 约会 成 为 它 返回 的 拒绝 期 约 的 理 


0, Promise.rejec 
Promise <resolved> 























setTimeout (console.1og, 
// Promise <rejected>: 


6. 同步 /异步 执行 的 二 元 性 











t (Promise.resolve())); 





Promise 的 设计 很 大 程度 上 会 导致 一 种 完全 不 同 于 JavaScript 的 计算 模式 。 下 面 的 例子 完美 地 展示 
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NS 


了 这 一 点 ， 其 中 包含 了 两 种 模式 下 抛 出 错误 的 情 


try { 
throw new Error('foo'); 
} catch(e) { 
console.log(e); // Error: foo 


} 


try { 

Promise.reject (new Error('bar')); 
} catch(e) { 

console.log(e); 
} 


// Uncaught (in promise) Error: bar 

第 一 个 try/catch 抛 出 并 捕获 了 错误 ， 第 二 个 try/catch 抛 出 错误 却 没有 捕获 到 。 乍 一 看 这 可 能 
有 点 违反 直觉 ， 因 为 代码 中 确实 是 同步 创建 了 一 个 拒绝 的 期 约 实例 ， 而 这 个 实例 也 抛 出 了 包含 拒绝 理由 
的 错误 。 这 里 的 同步 代码 之 所 以 没有 捕获 期 约 抛 出 的 错误 ， 是 因为 它 没 有 通过 异步 模式 捕获 错误 。 从 这 
里 就 可 以 看 出 期 约 真 正 的 异步 特性 : 它们 是 同步 对 象 (在 同步 执行 模式 中 使 用 )， 但 也 是 异步 执行 模式 
的 媒介 。 

在 前 面 的 例子 中 , 拒绝 期 约 的 错误 并 没有 抛 到 执行 同步 代码 的 线程 里 , 而 是 通过 浏览 器 异步 消息 队 
列 来 处 理 的 。 因 此 ，try/catch 块 并 不 能 捕获 该 错误 。 代 码 一 旦 开始 以 异步 模式 执行 ， 则 唯一 与 之 交互 
的 方式 就 是 使 用 异步 结构 一 一 更 具体 地 说 ， 就 是 期 约 的 方法 。 


11.2.3 ”期 约 的 实例 方法 


期 约 实例 的 方法 是 连接 外 部 同步 代码 与 内 部 异步 代码 之 间 的 桥梁 。 这 些 方 法 可 以 访问 异步 操作 返回 
的 数据 ， 处 理 期 约 成 功 和 失败 的 结果 ， 连 续 对 期 约 求 值 , 或 者 添加 只 有 期 约 进 入 终止 状态 时 才 会 执行 的 
代码 。 

1. 实现 Thenable 接口 

在 ECMAScript 暴露 的 异步 结构 中 ， 任 何 对 象 都 有 一 个 then () 方法 。 这 个 方法 被 认为 实现 了 
Thenable 接口 。 下 面 的 例子 展示 了 实现 这 一 接口 的 最 简单 的 类 : 


class MyThenable { 
then() {} 
} 


ECMAScript 的 Promi se 类 型 实现 了 Thenable 接口 。 这 个 简化 的 接口 跟 TypeScript 或 其 他 包 中 的 
接口 或 类 型 定义 不 同 ， 它 们 都 设 定 了 rhenapble 接口 更 具体 的 形式 。 












































































































































注意 本 章 后 面 再 介绍 异步 函数 时 还 会 再 谈 到 Thenable 接口 的 用 途 和 目的 。 





2. Promise.prototype.then() 

Promise.prototype.then () 是 为 期 约 实例 添加 处 理 程序 的 主要 方法 。 这 个 then () 方 法 接收 最 多 
两 个 参数 : onResolved 处 理 程序 和 onRejected 处 理 程序 。 这 两 个 参数 都 是 可 选 的 ， 如 果 提 供 的 话 ， 
则 会 在 期 约 分 别 进 入 “兑现 ”和 “拒绝 ”状态 时 执行 。 


function onResolved(id) { 
setTimeout (console.1log, 0, id, 'resolved'); 















































{ 


function onRejected(id) 


setTimeout (console.1og, 0, id, 'rejected'); 
} 
let pl = new Promise( (resolve, reject) => setTimeout (resolve, 3000)); 
let p2 = new Promise((resolve, reject) => setTimeout (reject, 3000)); 
pl.then(() => onResolved('p1'), 
() => onRejected('p1')); 
p2.then(() => onResolved('p2'), 
() => onRejected('p2')); 
// (3 秒 后 ) 


// pl resolved 
// p2 rejected 


因为 期 约 只 能 转换 为 最 终 状 态 一 次 ， 所 


以 这 两 个 操作 一 定 是 互 斥 的 。 
的 。 而 且 ， 传 给 then () 的 任何 非 函 数 类 型 的 参数 都 会 被 更 

















如 前 所 述 ， 两 个 处 理 程序 参数 都 是 可 选 
默 忽略 。 如 果 想 只 提供 onRejected 参数 ， 
样 有 助 于 避免 在 内 存 中 创建 多 余 的 对 象 ， 对 
{ 














function onResolved (id) 


那 就 要 在 onResolved 参数 的 位 置 上 传人 undefined。 这 
期 竺 函数 参数 的 类 型 系统 也 是 一 个 交代 。 




















setTimeout (console.log, 0, id, 'resolved'); 
} 
function onRejected(id) { 
setTimeout (console.1log, 0, id, 'rejected'); 
} 
let pl = new Promise((resolve, reject) => setTimeout (resolve, 3000)); 
let p2 = new Promise((resolve, reject) => setTimeout (reject, 3000)); 


// 非 汶 数 处 理 程 序 会 被 静默 忽略 ， 不 推荐 
pl.then('gobbeltygook'); 


// 不 传 onResolved 处 理 程序 的 规范 写法 
p2.then(null, 


// p2 rejecteqd (3 秒 后 ) 





() => onRejected('p2')); 


Promise.prototype.then () 方 法 返回 一 个 新 的 期 约 实例 : 


lJet pl new Promise(() => {}); 
let p2 pl.then(); 
setTimeout (console.1og, 


setTimeout (console.1og, p2) 


0， 
0， 
0， 





国 











// Promise <pending> 
// Promise <pending> 
// false 








二 


setTimeout (console.1og, pl 
文 个 


这 个 新 期 约 实例 基于 onResovled 处 
Promise.resolve() 包 装 来 生成 新 期 约 。 





刀 











加 时 


程序 的 返回 值 构建 。 换 名 话说 , 该 处 理 程序 的 返回 值 会 通过 
没有 提供 这 个 处 理 程序 ， 则 Promise.resolve() 就 会 




















包装 上 一 个 期 约 解决 之 后 的 值 。 如 果 没 有 显 
值 undefined。 
Jet pl = Promise.resolve('foo'); 


式 的 返回 语句 ， 则 Promise.resolve () 会 包装 默认 的 返回 





// 若 调用 then () 时 不 传 处 理 程序 ， 则 原样 向 后 传 


let p2 pl.then(); 
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setTimeout (Console.1og，0，Pp2); // Promise <resolved>: foo 

// 这 些 者 一 样 

let p3 = pl.then(() => undefined); 

let p4 = pl.then(() => {}); 

let p5 = pl.then(() => Promise.resolve()); 

setTimeout (console.log, 0, p3); // Promise <resolved>: undefined 
setTimeout (console.log, 0, p4); // Promise <resolved>: undefined 
setTimeout (console.log, 0, p5); // Promise <resolved>: undefined 








如 果 有 显 式 的 返回 值 ， 则 Promise .resolve() 会 包装 这 个 值 : 











// 这 些 都 一 样 

leb, Be Spl .tienm((), es. ar. ys 

let p7 = pl.then(() => Promise.resolve('bar')); 

setTimeout (console.log, 0, p6); // Promise <resolved>: bar 
setTimeout (console.1log, 0, p7); // Promise <resolved>: bar 


// Promise.resolve() 保 留 返 回 的 期 约 

let p8 = pl.then(() => new Promise(() => {})); 
let p9 = pl.then(() => Promise.reject()); 

// Uncaught (in promise): undefined 


setTimeou 
setTimeou 


抛 出 异常 会 返回 拒绝 的 期 约 : 


(console.log, 0, p8); // Promise <pending> 
(console.log, 0, p9); // Promise <rejected>: undefined 








let pl0 = pl.then(() => { throw 'baz'; });} 
// Uncaught (in promise) baz 


setTimeout (console.l1log, 0, p10); // Promise <rejected> baz 


意 ,返回 错误 值 不 会 触发 上 面 的 拒绝 行为 ， 而 会 把 错误 对 象 包装 在 一 个 解决 的 期 约 中 : 

















1 Dll = Bl thenttir er EEror{t gurl 
setTimeout (console.1log, 0, pl1); // Promise <resolved>: Error: qux Ce 
onRejected 处 理 程序 也 与 之 类 似 ， onRejected 处 理 程序 返回 的 值 也 会 被 Promise.resolve() 





包装 。 乍 一 看 这 可 能 有 点 违反 直觉 , 但 是 想 一 想 , onRejected 处 理 程序 的 任务 不 就 是 捕获 异步 错误 吗 ? 
因此 ， 人 期 约 的 行为 ， 应 该 返回 一 个 解决 期 约 。 
下 面 的 代码 片段 展示 了 用 Promi se .reject () 替 代 之 前 例子 中 的 Promise.resolve() 之 后 的 























结 
let pl = Promise.reject('foo'); 


// 调用 then() 时 不 传 处 理 程 序 则 原样 向 后 传 
let: 'p2 "=" pl. them( 
// Uncaught (in promise) foo 








setTimeout (console.log, 0, p2); // Promise <rejected>: foo 

// 这 些 都 一 样 

let p3 = pl.then(null, () => undaefined) 

let Bp4 = pl then(tnmill, () Ee. {}Yy 

let p5 = pl.then(null, () => Promise.resolve()); 

setTimeout (console.log, 0, p3); // Promise <resolved>: undefined 
setTimeout (console.log, 0, p4); // Promise <resolved>: undefined 
setTimeout (console.log, 0, p5); // Promise <resolved>: undefined 


// 这 些 都 一 样 
let p6 = pl.then(null, () => 'bar'); 
let p7 = pl.then(null, () => Promise.resolve('bar')); 


setTimeout (console.log, 0, p6); // Promise <resolved>: bar 
setTimeout (console.log, 0, p7); // Promise <resolved>: bar 


// Promise.resolve() 保 留 返回 的 期 约 

let p8 = pl.then(null, () => new Promise(() => {})); 
let p9 = pl.then(null, () => Promise.reject ()); 

// Uncaught (in promise): undefined 


setTimeout (console.1log, 0, p8); // Promise <pending> 
setTimeout (console.log, 0, p9); // Promise <rejected>: undefined 


let p10 = pl.then(null, () => { throw 'baz'; });} 
// Uncaught (in promise) baz 


setTimeout (console.l1log, 0, p10); // Promise <rejected>: baz 


let pll = pl.then(null, () => Error('qux')); 





setTimeout (console.l1log, 0, pl1); // Promise <resolved>: Error: qux 


3. Promise.prototype.catch() 

Promise.prototype.catch() 方 法 用 于 给 期 约 添 加 拒绝 处 理 程序 。 这 个 方法 只 接收 一 个 参数 : 
onRejected 处 理 程序 ,事实 上 ,这 个 方法 就 是 一 个 语法 糖 ,调用 它 就 相当 于 调用 Promi se.prototype. 
then(null, onRejected)。 

下 面 的 代码 展示 了 这 两 种 同样 的 情况 : 

let p = Promise.reject(); 

let onRejected = function(e) { 


setTimeout (console.1og, 0, 'rejected'); 
}3 


























// 这 两 种 添加 拒绝 处 理 程序 的 方式 是 一 样 的 : 
p.then(null, onRejected); // rejected 
p.catch(onRejected); // rejected 


Promise.prototype.catch() 返 回 一 个 新 的 期 约 实例 : 
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let pl = new Promise(() => {}); 

let p2 = pl.catch(); 

setTimeout (console.1log, 0, pl); // Promise <pending> 
setTimeout (console.log, 0, p2); // Promise <pending> 
setTimeout (console.log, 0, pl === p2); // false 





在 返回 新 期 约 实例 方面 , Promise.prototype.catch() 的 行为 与 Promise.prototype.then() 
的 onRejected 处 理 程序 是 一 样 的 。 

4. Promise.prototype.finally() 

Promise.prototype.finally() 方 法 用 于 给 期 约 添加 onFinally 处 理 程序 , 这 个 处 理 程序 在 期 
约 转换 为 解决 或 拒绝 状态 时 都 会 执行 。 这 个 方法 可 以 避免 onResolved 和 onRejected 处 理 程序 中 出 
现 宛 余 代 码 。 但 onFinally 处 理 程序 没有 办 法 知道 期 约 的 状态 是 解决 还 是 拒绝 ， 所 以 这 个 方法 主要 用 
于 添加 清理 代码 。 


let pl = Promise.resolve(); 
let p2 = Promise.reject(); 
let onFinally = function() { 
setTimeout (console.1log, 0, 'Finally!') 















































. 


pl.finally (onFinally); // Finally 
p2.finally (onFinally); // Finally 





Promise.prototype.finally () 方 法 返 个 新 的 期 约 实例 : 

let pl = new Promise(() => {}); 

let p2 = pl.finally(); 

setTimeout (console.1log, 0, pl); // Promise <pending> 
setTimeout (console.log, 0, p2); // Promise <pending> 
setTimeout (console.log, 0, pl === p2); // false 


这 个 新 期 约 实例 不 同 于 chen () 或 catch() 方 式 返 回 的 实例 。 因 为 onFinally 被 设计 为 一 个 状态 
无 关 的 方法 ， 所 以 在 大 多 数 情况 下 它 将 表现 为 父 期 约 的 传递 。 对 于 已 解决 状态 和 被 拒绝 状态 都 是 如 此 。 





HH 

















let pl = Promise.resolve('foo'); 

// 这 里 人 样 后 传 

let p2 pl .finally(); 

let p3 = pl.finally(() => undefined); 

let p4 = pl.finally(() => {}); 

let p5 = pl.finally(() => Promise.resolve()); 

let p6 = pl.finally(() => 'bar'); 

let p7 = pl.finally(() => Promise.resolve('bar')); 

let p8 = pl.finally(() => Error('gqux')); 

setTimeout (console.1og, ,， p2); // Promise <resolved>: foo 
setTimeout (console.1og, ,， p3); // Promise <resolved>: foo 


; // Promise <resolved>: foo 


) 

) 

setTimeout (consol 
,， Pp5); // Promise <resolved>: foo 

) 

) 

) 


t( 

t( 

Gl 
setTimeout (consol 

t( ; // Promise <resolved>: foo 

t( ; // Promise <resolved>: foo 

EGG ; // Promise <resolved>: foo 


setTimeout (consol 
setTimeout (consol 
setTimeout (consol 


如 果 返 回 的 是 一 个 待定 的 期 约 ， 或 者 onFinally 处 理 程序 抛 出 了 错误 ( 显 式 抛 出 或 返回 了 一 个 拒 
绝 期 约 )， 则 会 返回 相应 的 期 约 ( 待定 或 拒绝 )， 如 下 所 示 : 











moononn 
上 
O 
Q 








// Promise.resolve() 保 留 返回 的 期 约 

let p9 = pl.finally(() => new Promise(() => {})); 
let p10 = pl.finally(() => Promise.reject()); 

// Uncaught (in promise): undefined 


setTimeou 
setTimeou 


t(console.log, 0, p99); // Promise <pending> 

t (console.log, 0, p10); // Promise <rejected>: undefined 
Let PLL = pleinally(() a> { throw Das sl }): 

// Uncaught (in promise) baz 





setTimeout (console.l1log, 0, pl1l); // Promise <rejected>: baz 
返回 待定 期 约 的 情形 并 不 常见 ， 这 是 因为 只 要 期 约 一 解决 ， 新 期 约 仍然 会 原样 后 传 初始 的 期 约 : 


let pl = Promise.resolve('foo');} 












































// 忽略 解决 的 值 
Jet p2 = pl.finally( 
() => new Promise( (resolve, reject) => setTimeout(() => resolve('bar'), 100))); 


setTimeout (console.log, 0, p2); // Promise <pending> 





setTimeout(() => setTimeout (console.log, 0, p2), 200); 


// 200 毫秒 后 : 

// Promise <resolved>: foo 

5. 非 重 入 期 约 方法 

当期 约 进 入 落 定 状态 时 ， 与 该 状态 相关 的 处 理 程序 仅仅 会 被 排 期 ， 而 非 立 即 执行 。 跟 在 添加 这 个 处 




















理 程序 的 代码 之 后 的 同步 代码 一 定 会 在 处 理 程序 之 前 先 执行 。 即使 期 约 一 开始 就 是 与 附加 处 理 程序 关联 
的 状态 ， 执 行 顺序 也 是 这 样 的 。 这 个 特性 由 JavaScript 运行 时 保证 ， 被 称 为 “ 非 重 和 信 ”( non-reentrancy ) 
特性 。 下 面 的 例子 演示 了 这 个 特性 : 


处 至 








// 创建 解决 的 期 约 


let p = Promise.resolve(); 


// 添加 解决 处 理 程序 
// 直觉 上 ， 这 个 处 理 程序 会 等 期 约 一 解决 就 执行 
p.then(() => console.log('onResolved handler')); 


// 同步 输出 ， 证 明 then () 已 经 返回 
console.log('then() returns');} 


// 实际 的 输出 : 
// then() returns 
// onResolved handler 


在 这 个 例子 中 ,在 一 个 解决 期 约 上 调用 then () 会 把 onResolved 处 理 程序 推进 消息 队列 。 但 这 个 
LE 程序 在 当前 线程 上 的 同步 代码 执行 完成 前 不 会 执行 。 因 此 ， 跟 在 then () 后 面 的 同步 代码 一 定 先 于 






































处 理 程序 执行 。 


理 程 序 仍 然 会 基于 该 状态 变化 表现 出 非 重 入 特性 ,下 面 的 例子 展示 了 即使 先 添加 了 onResolved 处 理 程 























先 添加 处 理 程 序 后 解决 期 约 也 是 一 样 的 。 如 果 添 加 处 理 程 序 后 ,同步 代码 才 改 变 期 约 状 态 , 那么 处 
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序 ， 再 同步 调用 resolve () ， 处 理 程序 也 不 会 进入 同步 线程 执行 : 


let synchronousResolve; 











// 创建 一 个 期 约 并 将 解决 函数 保存 在 一 个 局 部 变量 中 


let p = new Promise((resolve) => { 


synchronousResolve = function() { 
console.log('1: invoking resolve()'); 
resolve(); 


console.1og('2: resolve() returns'); 
学 
3 


p.then(() => console.log('4: then() handler executes')); 


synchronousResolve(); 
console.1log('3: synchronousResolve() returns');} 


// 实际 的 输出 : 

// 1: invoking resolve() 

// 2: resolve() returns 

// 3: synchronousResolve() returns 
// 4: then() handler executes 


在 这 个 例子 中 ,即使 期 约 状态 变化 发 生 在 添加 处 理 程序 之 后 ， 处 理 程序 也 会 等 到 运行 的 消息 队列 让 
它 出 列 时 才 会 执行 。 

非 重 入 适用 于 onResolved/onRejected 处 理 程序 、catch () 处 理 程序 和 finally () 处理 程序 。 
下 面 的 例子 演示 了 这 些 处 理 程序 都 只 能 异步 执行 : 


let pl = Promise.resolve(); 
pl.then(() => console.log('pl.then() onResolved')); 
console.log('pl.then() returns'); 



































let p2 = Promise.reject (); 
p2.then(null, () => console.log('p2.then() onRejected')); 
console.log('p2.then() returns'); 








let p3 = Promise.reject(); 
p3.catch(() => console.log('p3.catch() onRejected')); 
console.log('p3.catch() returns'); 














let p4 = Promise.resolve(); 
p4.finally(() => console.log('p4.finally() onFinally')); 








console.log('p4.finally() returns'); 


// pl.then() returns 

// p2.then() returns 

// p3.catch() returns 

// p4.finally() returns 
// pl.then() onResolved 
// p2.then() onRejected 
// p3.catch() onRejected 
// p4.finally() onFinally 


6. 邻近 处 理 程序 的 执行 顺序 
如 果 给 期 约 添加 了 多 个 处 理 程 序 ， 当 期 约 状 态 变 化 时 ,相关 处 理 程 序 会 按照 添加 它们 的 顺序 依次 执 
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行 。 无 论 是 then () 、catch () 还 是 finally () 添 加 的 处 理 程序 都 是 如 此 。 


let pl = Promise.resolve(); 

let p2 = Promise.reject (); 

pl.then(() => setTimeout (console.1og, 0, 1)); 
pl.then(() => setTimeout (console.1og, 0, 2)); 

// 1 

// 2 

p2.then(null, () => setTimeout (console.1og, 0, 3)); 
p2.then(null, () => setTimeout (console.1log, 0, 4)); 
3 

// 4 

p2.catch(() => setTimeout (console.log, 0, 5)); 
p2.catch(() => setTimeout (console.log, 0, 6)); 

4 

6 

pl.finally(() => setTimeout (console.log, 0, 7)); 
pl.finally(() => setTimeout (console.1og, 0, 8)); 
/WY 

// 8 


7. 传递 解决 值 和 拒绝 理由 








到 了 落 定 状态 后 ， 期 约会 提供 其 解决 值 (如果 兑现 ) 或 其 拒绝 理由 ( 如 果 拒 绝 ) 给 相关 状态 的 处 理 








A 
be 


程序 。 拿 到 返回 值 后 ， 就 可 以 进一步 对 这 个 值 进行 操作 。 比 如 ， 第 一 次 网 络 请 求 返回 的 JSON 是 发 送 


和 5 





二 次 请 求 必需 的 数据 , 那么 第 一 次 请 求 返回 的 值 就 应 该 传 给 onResolved 处 理 程序 继续 处 理 。 当 然 , 失 





败 的 网 络 请 求 也 应 该 把 HTTP 状态 码 传 给 onRejected 处 理 程序 。 























在 执行 函数 中 ， 解 决 的 值 和 拒绝 的 理由 是 分 别 作为 resolve () 和 reject () 的 第 一 个 参数 往 后 传 
的 。 然 后 ， 这 些 值 又 会 传 给 它们 各 自 的 处 理 程序 ， 作 为 onResolved 或 onRejected 处 理 程序 的 唯一 

















参数 。 下 面 的 例子 展示 了 上 述 传递 过 程 : 


let pl = new Promise( (resolve, reject) => resolve('foo')); 
pl.then((value) => console.log(value)); // foo 














let p2 = new Promise((resolve, reject) => reject('bar')); 
p2.catch( (reason) => console.log(reason)); // bar 








Promise.resolve() 和 Promise.reject() 在 被 调用 时 就 会 接收 解决 值 和 拒绝 理由 。 同 样 地 , 它 








们 返回 的 期 约 也 会 像 执行 器 一 样 把 这 些 值 传 给 onResolved 或 onRejected 处 理 程序 : 


Jet pl = Promise.resolve('foo'); 
pl.then((value) => console.log(value)); // foo 


let p2 = Promise.reject('bar'); 
p2.catch( (reason) => console.log(reason)); // bar 


8. 拒绝 期 约 与 拒绝 错误 处 理 








拒绝 期 约 类 似 于 throw () 表达 式 ， 因 为 它们 都 代表 一 种 程序 状态 , 即 需要 中 断 或 者 特殊 处 理 。 在 期 
约 的 执行 函数 或 处 理 程序 中 抛 出 错误 会 导致 拒绝 ,对 应 的 错误 对 象 会 成 为 拒绝 的 理由 。 因 此 以 下 这 些 期 






































约 都 会 以 一 个 错误 对 象 为 由 被 拒绝 : 
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let pl = new Promise( (resolve, reject) => reject (Error('foo'))); 
let p2 = new Promise( (resolve, reject) => { throw Error('foo'); }); 
let p3 = Promise.resolve().then(() => { throw Error('foo'); }); 

let p4 = Promise.reject (Error('foo')); 

setTimeout (console.1log, 0, pl); // Promise <rejected>: Error: foo 
setTimeout (console.1log, 0, p2); // Promise <rejected>: Error: foo 
setTimeout (console.log, 0, p3); // Promise <rejected>: Error: foo 
setTimeout (console.1log, 0, p4); // Promise <rejected>: Error: foo 


// 也 会 抛 出 4 个 未 捕获 错误 
期 约 可 以 以 任何 理由 拒绝 ， 包 括 undefined， 但 最 好 统一 使 用 错误 对 象 。 这 样 做 主要 是 因为 创建 
错误 对 象 可 以 让 浏览 器 捕获 错误 对 象 中 的 栈 追 踪 信息 ， 而 这 些 信息 对 调试 是 非常 关键 的 。 例 如 ,前面 例 
子 中 抛 出 的 4 个 错误 的 栈 追 踪 信 息 如 下 : 


Uncaught (in promise) Error: foo 
at Promise (test.html:5) 

at new Promise (<anonymous>) 
at test.html:5 

Uncaught (in promise) Error: foo 
at Promise (test.html:6) 

at new Promise (<anonymous>) 
at test.html:6 

Uncaught (in promise) Error: foo 

at test.html:8 

Uncaught (in promise) Error: foo 

at Promise.resolve.then (test.html:7) 


所 有 错误 都 是 异步 抛 出 且 未 处 理 的 , 通过 错误 对 象 捕获 的 栈 追 踪 信 息 展示 了 错误 发 生 的 路 径 。 注 意 
错误 的 顺序 : Promi se .resolve() .then() 的 错误 最 后 才 出 现 ， 这 是 因为 它 需 要 在 运行 时 消息 队列 中 
添加 处 理 程序 ; 也 就 是 说 ， 在 最 终 抛 出 未 捕获 错误 之 前 它 还 会 创建 另 一 个 期 约 。 

这 个 例子 同样 揭示 了 异步 错误 有 意思 的 副作用 。 正 常情 况 下 ， 在 通过 hrow () 关 键 字 抛 出 错误 时 ， 
JavaScript 运行 时 的 错误 处 理 机 制 会 停止 执行 抛 出 错误 之 后 的 任何 指令 


throw DEror( too 
console.1log('bar'); // 这 一 行 不 会 执行 














| 













































































// Uncaught Error: foo 


但 是 , 在 期 约 中 抛 出 错误 时 ， 因 为 错误 实际 上 是 从 消息 队列 中 异步 抛 出 的 ， 所 以 并 不 会 阻止 运行 时 
续 执 行 同步 指令 


Promise.reject (Error('foo')); 
console.log('bar'); 
// bar 























// Uncaught (in promise) Error: foo 


如 本 章 前 面 的 Promi se .reject () 示 例 所 示 ， 异 步 错 误 只 能 通过 异步 的 onRejected 处 理 程序 
捕获 : 

// 正确 

Promise.reject (Error('foo')).catch((e) => {}); 





// 不 正确 
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try { 
Promise.reject (Error('foo')); 
} catch(e) {} 


这 不 包括 捕获 执行 函数 中 的 错误 ， 在 解决 或 拒绝 期 约 之 前 ， 仍 然 可 以 使 用 try/catch 在 执行 函数 
中 捕获 错误 : 
let p = new Promise( (resolve, reject) => { 
try { 


throw Error('foo'); 
} catch(e) {} 








resolve('bar'); 
en 


setTimeout (console.l1log, 0, p); // Promise <resolved>: bar 


then() 和 catch() 的 onRejected 处 理 程序 在 语义 上 相当 于 try/catch。 出 发 点 都 是 捕获 错误 之 
后 将 其 隔离 ， 同 时 不 影响 正常 逻辑 执行 。 为 此 ，onRejected 处 理 程序 的 任务 应 该 是 在 捕获 异步 错误 之 
后 返回 一 个 解决 的 期 约 。 下 面 的 例子 中 对 比 了 同步 错误 处 理 与 异步 错误 处 理 : 


console.log('begin synchronous execution'); 
Cry 
throw Error('foo'); 
} catchl(e) { 
console.log('caught error', e); 
} 


console.log('continue synchronous execution'); 









































// begin synchronous execution 
// caught error Error: foo 
// continue synchronous execution 


new Promise( (resolve, reject) => { 
console.log('begin asynchronous execution'); 
reject (Error('bar')); 

}).catch((e) => { 
console.log('caught error', e); 

}) .then(() => { 
console.log('continue asynchronous execution'); 


Ee 


// begin asynchronous execution 
// caught error Error: bar 
// continue asynchronous execution 


11.2.4 ”期 约 连锁 与 期 约 合成 

多 个 期 约 组 合 在 一 起 可 以 构成 强大 的 代码 逻辑 。 这 种 组 合 可 以 通过 两 种 方式 实现 : 期 约 连锁 与 期 约 
合成 。 前 者 就 是 一 个 期 约 接 一 个 期 约 地 拼接 ， 后 者 则 是 将 多 个 期 约 组 合 为 一 个 期 约 。 

1. 期 约 连锁 

把 期 约 逐 个 地 串联 起 来 是 一 种 非常 有 用 的 编程 模式 。 之 所 以 可 以 这 样 做 , 是 因为 每 个 期 约 实例 的 方 
法 (then() 、catch() 和 finally () ) 都 会 返回 一 个 新 的 期 约 对 象 ， 而 这 个 新 期 约 又 有 自己 的 实例 方 
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法 。 这 样 连 级 方法 调用 就 可 以 构成 所 谓 的 “期 约 连锁 ”"。 比 如 : 
let p = new Promise((resolve, reject) => { 
console.log('first'); 
resolve(); 
人 这 
p.then(() => console.log('second')) 
.then(() => console.log('third')) 
.then(() => console.log('fourth')); 
// first 
// second 
J EL 
// fourth 
这 个 实现 最 终 执行 了 一 连 串 同步 任务 。 正 因为 如 此 ,这 种 方式 执行 的 任务 没有 那么 有 用 ， 毕 竞 分 别 





使 用 4 个 同步 函数 也 可 以 做 到 : 


(() 'sS5''consolelog( "first"))();s 
(() => console.log('second'))(); 
(() => console.log('third'))(); 
((yneS CONsOLle..109("tourth")y) (0) 











要 真正 执行 异步 任务 ， 可 以 改写 前 面 的 例子 ， 让 每 个 执行 器 都 返回 一 个 期 约 实例 。 这 样 就 可 以 让 每 
个 后 续 期 约 都 等 待 之 前 的 期 约 ,也 就 是 串 行 化 异步 任务 。 比 如 ， 可 以 像 下 面 这 样 让 每 个 期 约 在 一 定时 间 
































后 解决 : 


let pl = new Promise( (resolve, 
console.log('pl executor'); 

setTimeout (resolve, 1000); 

和 过 


reject) 


pl.then(() => new Promise( (resol rej 
console.log('p2 executor'); 


setTimeout (resolve, 1000); 


ve, 


Promise( (resol rej 
p3 executor'); 


setTimeout (resolve, 1000); 


ve, 








.then(() Promise( (resol reject) 
console.1 p4 executor'); 


setTimeout (resolve, 1000); 


ve, 





























// pl executor ( ) 
// p2 executor (2 秒 后 ) 
// p3 executor ( ) 
// p4 executor ) 


把 生成 期 约 的 代码 提取 到 一 个 工厂 函数 中 ， 就 可 以 写成 这 样 : 


function delayedResolve(str) { 
return new Promise( (resolve, 
console.log(str); 
setTimeout (resolve, 1000); 
这 
} 


reject) => { 
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delayedResolve('pl executor 


) 
.then(() => delayedResolve('p2 executor ' ) ) 
.then(() => delayedResolve('p3 executor ' ) ) 
.then(() => delayedResolve('p4 executor')) 


// pl executor (1 秒 后 ) 
// p2 executor (2 oe 
// p3 executor (3 秒 后 ) 
// p4 executor (4 秒 后 ) 
早 序 





每 个 后 续 的 处 理 和 














序 都 会 等 待 前 一 个 期 约 解决 , 然后 实例 化 一 个 新 期 约 并 返回 它 。 这 种 结构 可 以 简 


洁 地 将 异步 任务 串 行 化 , 解决 之 前 依赖 回调 的 难题 。 假 如 这 种 情况 下 不 使 用 期 约 ， 那么 前 面 的 代码 可 能 
就 要 这 样 写 了 : 
function delayedExecute(str, callback = null) { 
SetTimeout (() => { 


console.log(str); 
callback && callback(); 
}, 1000) 
} 


delayedExecute('pl callback', () = 
delayedExecute('p2 callback', () = 
delayedExecute('p3 callback', () 
delayedExecute('p4 callback'); 
上 
3 
}); 


// pl callback (1 秒 后 ) 
// p2 callback ee 
// p3 callback (3 秒 后 ) 
// p4 callback (4 秒 后 ) 


心 明 眼 亮 的 开发 者 会 发 现 ， 这 不 正 是 期 约 所 要 解决 的 回调 地 狱 问题 吗 ? 








因为 then () 、catch() 和 finally() 都 返回 期 约 , 所 以 串联 这 些 方法 也 很 直观 。 下 面 的 例子 同时 








使 用 这 3 个 实例 方法 : 








let p = new Promise( (resolve, reject) => { 
console.log('initial promise rejects'); 
reject (); 

党 

p.catch(() => console.log('reject handler')) 
.then(() => console.log('resolve handler')) 
.finally(() => console.log('finally handler')); 


// initial promise rejects 
// reject handler 

// resolve handler 

// finally handler 


2. 期 约 图 





因为 一 个 期 约 可 以 有 任意 多 个 处 理 程序 ， 所 以 期 约 连锁 可 以 构建 有 向 非 循环 图 的 结构 。 这 样 














， 每 个 


期 约 都 是 图 中 的 一 个 节点 ,而 使 用 实例 方法 添加 的 处 理 程序 则 是 有 向 顶点 。 因 为 图 中 的 每 个 节点 都 会 等 














待 前 一 个 节点 落 定 ， 所 以 图 的 方向 就 是 期 约 的 解决 或 拒绝 顺序 。 
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下 面 的 例子 展示 了 一 种 期 约 有 向 图 ， 也 就 是 二 又 树 : 


// A 
6 J 
// B @ 
A NR AN 


let A = new Promise((resolve, reject) => { 
console.l1og('A'); 


resolve(); 
ee 
let B = A.then(() => console.log('B')); 
let C = A.then(() => console.log('C')); 
B.then(() => console.log('D')); 
B.then(() => console.log('E')); 
C.then(() => console.log('F')); 
C.then(() => console.10g('G')); 
// A 
太太 十 
Vs WE 
// D 
A 
// FF 
// SG 











注意 , 日 志 的 输出 语句 是 对 二 叉 树 的 层 序 遍历 。 如 前 所 述 ， 期 约 的 处 理 程序 是 按照 它们 添加 的 顺序 
执行 的 。 由 于 期 约 的 处 理 程序 是 先 添 加 到 消息 队列 ， 然 后 才 逐 个 执行 ， 因 此 构成 了 层 序 遍历 。 

树 只 是 期 约 图 的 一 种 形式 。 考 虑 到 根 节 点 不 一 定 唯 一 ， 且 多 个 期 约 也 可 以 组 合成 一 个 期 约 (通过 下 
一 节 介 绍 的 Promise.all() 和 Promise.race() )， 所 以 有 向 非 循环 图 是 体现 期 约 连锁 可 能 性 的 最 准 
确 表 达 。 

3. Promise.all() 和 Promise.race() 

Promise 类 提供 两 个 将 多 个 期 约 实例 组 合成 一 个 期 约 的 静态 方法 : Promise.all() 和 Promise.race()。 
而 合成 后 期 约 的 行为 取决 于 内 部 期 约 的 行为 。 

@ Promise.all() 

Promise.all () 静 态 方法 创建 的 期 约会 在 一 组 期 约 全 部 解决 之 后 再 解决 。 这 个 静态 方法 接收 一 个 
可 迭代 对 象 ， 返 回 一 个 新 期 约 : 


let pl = Promise.al1l([ 
Promise.resolve(), 
Promise.resolve() 


| 













































































// 可 迭代 对 象 中 的 元 素 会 通过 Promise.resolve() 转 换 为 期 约 
let p2 = Promise.all([3, 4]); 


// 空 的 可 选 代 对 象 等 价 于 Promise.resolve() 
let p3 = Promise.all([]); 


// 无 效 的 语法 
let p4 = Promise.all (); 
// TypeError: cannot read Symbol.iterator of undefined 
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合成 的 期 约 只 会 在 每 个 包含 的 期 约 都 解决 之 后 才 解 决 : 

let p = Promise.all([ 

Promise.resolve()， 

new Promise( (resolve, reject) => setTimeout (resolve, 1000)) 
| 
setTimeout (console.1log, 0, p); // Promise <pending> 





p.then(() => setTimeout (console.1log, 0, 'all() resolved!')); 

// all() resolved! (大 约 1 秒 后 ) 

如 果 至 少 有 一 个 包含 的 期 约 待定 ， 则 合成 的 期 约 也 会 待定 。 如 果 有 一 个 包含 的 期 约 拒绝 ， 则 合成 的 
期 约 也 会 拒绝 : 


// 永远 待定 
let pl = Promise.all([new Promise(() => {})]); 
setTimeout (console.log, 0, pl); // Promise <pending> 












































// 一 次 拒绝 会 导致 最 终 期 约 拒 绝 
let p2 = Promise.all1([ 
Promise.resolve(), 
Promise.reject(), 
Promise.resolve() 
] 0 
setTimeout (console.log, 0, p2); // Promise <rejected> 


// Uncaught (in promise) undefined 


如 果 所 有 期 约 都 成 功 解决 , 则 合成 期 约 的 解决 值 就 是 所 有 包含 期 约 解决 值 的 数组 , 按照 兴 代 咒 顺 序 : 


let p = Promise.all([ 
Promise.resolve(3), 
Promise.resolve(), 
Promise.resolve(4) 


] 0 





























p.then((values) => setTimeout (console.log, 0, values)); // [3, undefined, 4] 


如 果 有 期 约 拒绝 ， 则 第 一 个 拒绝 的 期 约会 将 自己 的 理由 作为 合成 期 约 的 拒绝 理由 。 之 后 再 拒绝 的 期 
约 不 会 影响 最 终 期 约 的 拒绝 理由 。 不 过 ,这 并 不 影响 所 有 包含 期 约 正常 的 拒绝 操作 。 合 成 的 期 约会 静默 
处 理 所 有 包含 期 约 的 拒绝 操作 ， 如 下 所 示 : 


// 虽然 只 有 第 一 个 期 约 的 拒绝 理由 会 进入 
// 拒绝 处 理 程序 ， 第 二 个 期 约 的 拒绝 也 
// 会 被 静默 处 理 ， 不 会 有 错误 跑 掉 
let p = Promise.all([ 
Promise.reject (3), 
new Promise( (resolve, reject) => setTimeout (reject, 1000)) 
J] 













































































p.catch( (reason) => setTimeout (console.log, 0, reason)); // 3 

// 没有 未 处 理 的 错误 

@ Promise.racel() 

Promise.race() 静 态 方法 返回 一 个 包装 期 约 ， 是 一 组 旨 
方法 接收 一 个 可 迭代 对 象 ， 返 回 一 个 新 期 约 : 



































合 中 最 先 解决 或 拒绝 的 期 约 的 镜像 。 这 个 


Cy 
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let pl = Promise.race([ 
Promise.resolve()， 
Promise.resolve() 


由 


// 可 和 迭代 对 象 中 的 元 素 会 通过 Promise.resolve () 转换 为 期 约 


let p2 = Promise.race([3, 4]); 


// 空 的 可 选 代 对 象 等 价 于 new Promise(() => {})) 
let p3 = Promise.race([]); 


// 无 效 的 语法 
let p4 = Promise.race(); 
// TypeError: cannot read Symbol.iterator of undefined 


Promise.race() 不 会 对 解决 或 拒绝 的 期 约 区 别 对 待 。 无 论 是 解决 还 是 拒绝 ， 只 要 是 第 一 个 落 定 的 
期 约 ，Promise.race() 就 会 包装 其 解决 值 或 拒绝 理由 并 返回 新 期 约 : 
// 解决 先 发 生 ， 超 时 后 的 拒绝 被 忽略 


let pl = Promise.race([ 

Promise.resolve(3), 

new Promise( (resolve, reject) => setTimeout (reject, 1000)) 
je 
setTimeout (console.1log, 0, pl); // Promise <resolved>: 3 

















// 拒绝 先 发 生 ， 超 时 后 的 解决 被 忽略 

let p2 = Promise.race([ 

Promise.reject (4), 

new Promise( (resolve, reject) => setTimeout (resolve, 1000)) 
这 
setTimeout (Console.1og，0，p2); // Promise <rejected>: 4 


// 过 代 顺序 决定 了 落 定 顺序 
let p3 = Promise.race([ 
Promise.resolve(5), 
Promise.resolve(6), 

Promise.resolve(7) 


1)3 
setTimeout (console.l1log, 0, p3); // Promise <resolved>: 5 


如 果 有 一 个 期 约 拒绝 ， 只 要 它 是 第 一 个 落 定 的 ， 就 会 成 为 拒绝 合成 期 约 的 理由 。 之 后 再 拒绝 的 期 约 
不 会 影响 最 终 期 约 的 拒绝 理由 。 不 过 ， 这 并 不 影响 所 有 包含 期 约 正常 的 拒绝 操作 。 与 Promise.all1() 
类 似 ， 合 成 的 期 约会 静默 处 理 所 有 包含 期 约 的 拒绝 操作 ， 如 下 所 示 : 
// 虽然 只 有 第 一 个 期 约 的 拒绝 理由 会 进入 [ 
// 拒绝 处 理 程序 ， 第 二 个 期 约 的 拒绝 也 
// 会 被 静默 处 理 ， 不 会 有 错误 跑 掉 
let p = Promise.race([ 
Promise.reject (3), 


new Promise( (resolve, reject) => setTimeout (reject, 1000)) 
] 















































p.catch( (reason) => setTimeout (console.l1log, 0, reason)); // 3 
// 没有 未 处 理 的 错误 


4. 串 行 期 约 合成 
到 目前 为 止 ,我 们 讨论 期 约 连锁 一 直 围 绕 期 约 的 串 行 执行 ,忽略 了 期 约 的 另 一 个 主要 特性 : 异步 产 








A 
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生 值 并 将 其 传 给 人 处理 程序 。 基 于 后 续 
函数 合成 ， 即 将 多 个 函数 合成 为 一 个 函数 ， 比 如 : 


addTwo (x) 
addThree (x 
addFive (x) 








function 
function 
function 


{return x + 2;} 
) 汪 交 加 攻 亲人 3 六 
{return x + 5;} 


function 
return 


} 


addTen (x) { 


addFive (addTwo (addThree (x) ) ) 


console.log(addTen(7)); // 17 


在 这 个 例子 中 ， 有 3 个 函数 基于 一 个 值 合成 为 一 个 函 
进 地 消费 一 个 值 ， 并 返回 一 个 结果 : 


function 
function 
function 





adqdTwo (x 
addThree 


) {return x + 2;} 
( 
addFive (x 


x) {return x + 3;} 
) {return x + 5;} 


function addTen(x) { 
return Promise.resolve (x) 
.then (addTwo) 
.then (addThree) 
.then(addFive); 
3 
addTen (8) 


.then(console.l1og); // 18 














期 约 使 用 之 前 期 约 的 返回 值 来 串联 期 约 是 期 约 的 基本 功能 。 这 很 像 





类 似 地 ， 期 约 也 可 以 像 这 样 合 成 起 来 ， 浙 





.reduc 





) 可 以 写成 更 简洁 的 


{return x + 2;} 
x) {return x + 3;} 
) {Heturnm, x .57} 


使 用 Array .prototyp 


addTwo (x 
addThree 


function 
( 
addFive (x 


function 
function 


function 
return 
.reduce( (promise, 


addTen (x) { 

[addTwo, addThree, addFivel] 
fn) 
} 


addTen (8) 
这 种 模式 可 以 提炼 出 
这 个 通用 的 合成 函数 可 以 这 样 实现 : 


function addTwo (x) 
function addThreel( 
function addFivel(x 


.then(console.l1og); // 18 























锁 。 

















{return x + 2;} 
x) {return x + 3;} 
) {return x + 5;} 


function compose(...fns) { 
return (x) => fns.reduce( (promise, 


} 
let addTen = compose(addTwo, addThree, addFive); 
addTen(8) .then(console.log); // 18 


注意 ”本章 后 面 的 11.3 节 在 讨论 异步 








=> promise.then (fn), 


个 通用 函数 , 可 以 把 任意 多 个 函数 作为 处 理 程序 合成 一 个 连续 





Promise.resolve (x 


) 





起 传 值 的 期 约 连 


fn) => promise.then(fn), Promise.resolve(x)) 


会 涉及 这 个 概念 。 
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11.2.5 ”期 约 扩展 


ES6 期 约 实现 是 很 可 靠 的 , 但 它 也 有 不 足 之 处 。 比 如 , 很 多 第 三 方 期 约 库 实现 中 具备 而 ECMAScript 
规范 却 未 涉及 的 两 个 特性 : 期 约 取 消 和 进度 追踪 。 

1. 期 约 取 消 

我 们 经 常会 遇 到 期 约 正在 处 理 过 程 中 , 程序 却 不 再 需要 其 结果 的 情形 。 这 时 候 如 果 能 够 取消 期 约 就 
好 了 。 某 些 第 三 方 库 , 比如 Bluebird, 就 提供 了 这 个 特性 。 实 际 上 , TC39 委员 会 也 曾 准备 增加 这 个 特性 ， 
但 相关 提案 最 终 被 撤回 了 。 结 果 ，ES6 期 约 被 认为 是 “激进 的 ”: 只 要 期 约 的 逻辑 开始 执行 ， 就 没有 办 
法 阻止 它 执行 到 完成 。 

实际 上 , 可 以 在 现 有 实现 基础 上 提供 一 种 临时 性 的 封装 , 以 实现 取消 期 约 的 功能 。 这 可 以 用 到 Kevin 
Smith 提 到 的 “取消 令 牌 ”( cancel token )。 生 成 的 令 牌 实例 提供 了 一 个 接口 ， 利 用 这 个 接口 可 以 取消 期 
约 ; 同时 也 提供 了 一 个 期 约 的 实例 ， 可 以 用 来 触发 取消 后 的 操作 并 求 值 取消 状态 。 

下 面 是 cancelToken 类 的 一 个 基本 实例 : 


class CancelToken { 
constructor(cancelFn) { 
this.promise = new Promise( (resolve, reject) => { 
cancelFn (resolve); 
}); 
} 
} 


这 个 类 包装 了 一 个 期 约 , 把 解决 方法 暴露 给 了 cancelFn 参数 。 这样， 外 部 代码 就 可 以 向 构造 函数 
中 传 和 一 个 函数 ， 从 而 控制 什么 情况 下 可 以 取消 期 约 。 这 里 期 约 是 令 牌 类 的 公共 成 员 ， 因 此 可 以 给 它 添 
加 处 理 程序 以 取消 期 约 。 

这 个 类 大 概 可 以 这 样 使 用 : 

<button id="start">Start</button> 

<button id="cancel">Cancel</button> 

































































































































































<script> 
class CancelToken { 
constructor(cancelFn) { 


this.promise = new Promise( (resolve, reject) => { 
cancelFn(() => { 
setTimeout (console.1log, 0, "delay cancelled"); 


resolve(); 
记 
其 这 
} 
} 


const startButton = document .querySelector('#start'); 
const cancelButton = document .querySelector('#cancel'); 


function cancellableDelayedResolve(delay) { 
setTimeout (console.1og, 0, "set delay"); 





return new Promise( (resolve, reject) => { 
const id = setTimeout((() => { 
setTimeout (console.1log, 0, "delayed resolve"); 
resolve(); 


}), delay); 








const cancelToken = new CancelToken( (cancelCallback) => 
cancelButton.addEventListener("click", cancelCallback)); 


cancelToken.promise.then(() => clearTimeout (id)); 
> 
} 
startButton.addEventListener("click", () => cancellableDelayedResolve(1000)); 
</script> 





每 次 单 击 “Start” 按 钮 都 会 开始 计时 ， 并 实例 化 一 个 新 的 cancelToken 的 实例 。 此 时 , “Cancel” 
按钮 一 旦 被 点 击 ， 就 会 触发 令 牌 实例 中 的 期 约 解决 。 而 解决 之 后 ， 单 击 “Start” 按 钮 设置 的 超时 也 会 被 
取消 。 

2. 期 约 进 度 通 知 

执行 中 的 期 约 可 能 会 有 不 少 离散 的 “阶段 ”"， 在 最 终 解 决 之 前 必须 依次 经 过 。 某 些 情况 下 ， 监 控 期 
约 的 执行 进度 会 很 有 用 。ECMAScript 6 期 约 并 不 支持 进度 追踪 ,但 是 可 以 通过 扩展 来 实现 。 

一 种 实现 方式 是 扩展 Promi se 类 ， 为 它 添加 notify () 方 法 ， 如 下 所 示 : 


class TrackablePromise extends Promise { 
constructor (executor) { 
const notifyHandlers = []; 












































super((resolve, reject) => { 
return executor(resolve, reject, (status) => { 
notifyHandlers.map((handler) => handler(status)); 
}); 
3 


this.notifyHandlers = notifyHandlers; 


} 


notify(notifyHandler) { 
this.notifyHandlers.push (notifyHandler); 
return this; 
} 
} 


这 样 , TrackablePromise 就 可 以 在 执行 函数 中 使 用 notify () 函数 了 。 可 以 像 下 面 这 样 使 用 这 个 
函数 来 实例 化 一 个 期 约 : 
let p = new TrackablePromise( (resolve, reject, notify) => { 
function countdown (x) { 
于 后 0 
Dotity(`S$f20 * x}% remaining. ); 
SetTimeout (() => countdown(x - 1), 1000); 


} else { 
resolve(); 
































} 
countdown (5); 
) 
这 个 期 约会 连续 5$ 次 递归 地 设置 1000 毫秒 的 超时 。 每 个 超时 回调 都 会 调用 notify () 并 传人 状态 值 。 
假设 通知 处 理 程序 简单 地 这 样 写 : 

















伍 





let p = new TrackablePromise( (resolve, reject, notify) => { 
function countdown(x) { 
Tf "(S00 并 
notify(`${20 * x}% remaining.); 
setTimeout(() => countdown(x - 1), 1000); 
} else { 
resolve(); 
} 
} 


countdown (5) ; 
本 


p.notify((x) => setTimeout (console.log, 0, 'progress:', x)); 


p.then(() => setTimeout (console.log, 0, 'completed')); 


// ”( 约 1 秒 后 ) 80% remaining 
// ”( 约 2 秒 后 ) 60% remaining 
// ”( 约 3 秒 后 ) 40% remaining 
// ”( 约 4 秒 后 ) 20% remaining 


// ”( 约 5 秒 后 ) completed 


notify () 函数 会 返回 期 约 ， 所 以 可 以 连 级 调用 ， 连 续 添加 处 理 程序 。 多 个 处 理 程 序 会 针对 收 到 的 














条 消息 分 别 执行 一 遍 ， 如 下 所 示 : 


p.notify((x) => setTimeout (console.log, 0, 'a:', Xx)) 
.notify((x) => setTimeout (console.log, 0, 'b:', x)); 





























p.then(() => setTimeout (console.1og, 0, 'completed')); 
// ” ( 约 1 秒 后 ) a: 80% remaining 

// ”( 约 1 秒 后 ) b: 80% remaining 

// ”( 约 2 秒 后 ) a: 60% remaining 

// ( 约 2 秒 后 ) b: 60% remaining 

// ( 约 3 秒 后 ) a: 40% remaining 

// ( 约 3 秒 后 ) b: 40% remaining 

// ”( 约 4 秒 后 ) a: 20% remaining 

// ”( 约 4 秒 后 ) b: 20% remaining 

// ( 约 5 秒 后 ) completed 

总 体 来 看 ， 这 还 是 一 个 比较 粗糙 的 实现 ， 但 应 该 可 以 演示 出 如 何 使 用 通知 报告 进度 了 。 





注意 ES6 不 支持 取消 期 约 和 进度 通知 ， 一 个 主要 原因 就 是 这 样 会 导致 期 约 连锁 和 期 约 合成 
对 碾 证 2 比如 在 一 个 期 0 中 ， 如 果菜 个 被 其 他 期 约 依 赖 的 期 约 被 取消 了 或 者 发 出 了 


通知 ,那么 接 下 来 应 该 发 生 什么 完全 说 不 清楚 。 毕 竟 es 了 Promise.all() 中 的 一 个 
期 约 ， ns 前 a 一 个 通知 ， 那 么 接 下 来 应 该 怎么 办 才 比 较 合 理 呢 ? 





11.3 ”异步 函数 





异步 函数 ， 也 称 为 et (语法 关键 字 )， 是 ES6 期 约 模式 在 ECMAScript 函数 中 的 应 用 。 








async/await 是 ES8 规范 新 增 的 。 这 个 特性 从 行为 和 语法 上 都 增强 了 JavaScript， 让 以 同步 方式 写 的 代码 











能 够 异步 执行 。 下 面 来 看 一 个 最 简单 的 例子 ， 


let p = new Promisel( (resolve, 











reject) 














这 个 期 约 在 1000 上 毫秒 之 后 解决 为 数值 3。 如果 程序 
写 一 个 解决 处 理 程序 : 


let p = new Promisel( (resolve, 








reject) 


p.then((x) => console.log(x)); // 3 


是 很 不 方便 的 ,因为 其 他 代码 都 必须 





这 其 实 
函数 : 


function handler(x) { console.log(x); } 


let p = new Promise( (resolve, reject) 


p.then (handler); // 3 





=> setTimeout (resolve, 


! 的 其 他 代码 要 在 这 个 值 可 用 时 访问 它 


=> setTimeout (resolve, 


塞 到 期 约 处 到 


这 个 期 约 在 超时 之 后 会 解决 为 一 个 值 : 


1000，3) ) 


, 则 需要 


1000, 3)); 





=> setTimeout (resolve, 


程序 中 。 不 过 可 以 把 处 理 程序 定义 为 一 个 


1000, 3)); 


这 个 改进 其 实 也 不 大 。 这 是 因为 任何 需要 访问 这 个 期 约 所 产生 值 的 代码 ,都 需要 以 处 理 程序 的 形式 


来 接收 这 个 值 。 也 就 是 说 ， 代 码 照 样 还 是 要 放 到 处 理 程序 里 











11.3.1 异步 函数 


ES8 的 async/await 则 在 解决 利用 异步 结构 组 织 代码 的 问题 。 为 此 ,ECMAScript 对 函数 进 和 





为 其 增加 了 两 个 新 关键 字 : async 和 await。 


1. async 


。ES8 为 此 提供 了 async/await 关键 字 。 


了 了 扩展 ， 








async 关键 字 用 于 声明 异步 孙 数 。 这 个 关键 字 可 以 


async function foo() {} 











let bar = async function() {}; 


let baz = async () => {}; 
lases QUux { 
async qux() {} 


} 





















































) 函数 仍然 会 


使 用 async 关键 字 可 以 让 函数 具有 异步 特征 ， 但 总 体 上 其 代码 仍然 是 同步 求 值 的 。 而 在 参数 或 闭 
包 方面 ， 异步 函数 仍然 具有 普通 JavaScript 函数 的 正常 行为 。 正 如 下 面 的 例子 所 示 ，foo ( 
在 后 面 的 指令 之 前 被 求 值 : 

async function foo() { 


console.1log(1) ; 


} 


foo(); 
console.1o0g(2); 


// 1 
包罗 用 











不 过 ， 异 步 函数 如 果 使 用 return 关键 字 返 回 了 值 ( 如 果 没 有 return 则 会 返回 undefined )， 








个 值 ) 包 装 成 一 个 期 约 对 象 。 


会 被 Promise .resolve( 


这 
异步 函数 始终 返回 期 约 对 象 。 在 函数 外 部 调用 这 





个 





函数 可 以 得 到 它 返 回 的 期 约 : 





async function foo() { 
console.1og(1); 
return 3; 


} 


// 给 返回 的 期 约 添 加 一 个 解决 处 理 程序 


foo() .then(console.1og); 
console.10g(2); 


a 
Wali 
aA 


当然 ， 直 接 返 回 一 个 期 约 对 象 也 是 一 样 的 : 


async function foo() { 
console.1og(1); 
return Promise.resolve(3); 


} 








// 给 返回 的 期 约 添 加 一 个 解决 处 理 程 序 


foo() .then(console.1log) : 
console.1o0g(2); 

这 

/2 

/3 


异步 函数 的 返回 值 期 待 (但 实际 上 并 不 要 求 ) 一 个 实现 thenable 接口 的 对 象 , 但 常规 的 值 也 可 以 。 























如 果 返 回 的 是 实现 thenaple 接口 的 对 象 , 则 这 个 对 象 可 以 由 提供 给 then () 的 处 理 程序 “ 解 包 ”。 如 果 


A 














不 是 ， 则 返回 值 就 被 当 作 已 经 解决 的 期 约 。 下 面 的 代码 演示 了 这 些 情 况 : 





// 返回 一 个 原始 值 

async function foo() { 
return 'foo'; 

} 

foo() .then(console.1log) : 

// foo 


// 返回 一 个 没有 实现 thenable 接口 的 对 象 
async function bar() { 
return ['bar']; 
} 
bar() .then(console.1og); 
// ['bar'] 


// 返回 一 个 实现 了 thenable 接口 的 非 期 约 对 象 
async function baz() { 
const thenable = { 
then(callback) { callback('baz'); } 
}; 
return thenable; 
} 
baz() .then(console.1og) ; 
// baz 
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// 返回 一 个 期 约 
async function Gux() { 
return Promise.resolve('qux'); 
} 
gqux() .then(console.1o0og); 
// qux 


与 在 期 约 处 理 程序 中 一 样 ， 在 异步 函数 中 抛 出 错误 会 返回 拒绝 的 期 约 : 


async function foo() { 
console.1o0g(1); 
throw 3; 

} 


// 给 返回 的 期 约 添 加 一 个 拒绝 处 理 程 序 
foo().catch(console.1o0g); 
console.1o0g(2);} 


XA 1 
A 2 
A 


不 过 ， 拒 绝 期 约 的 错误 不 会 被 异步 函数 捕获 : 


async function foo() { 
console.1og(1);} 
Promise.reject (3); 


} 

















// Attach a rejected handler to the returned promise 
foo() .catch(console.1og); 
console.1o0g(2);} 


[A 
A 
// Uncaught (in promise): 3 


2. await 
因为 异步 函数 主要 针对 不 会 马上 完成 的 任务 , 所 以 自然 需要 一 种 暂停 和 恢复 执行 的 能 力 。 使 用 await 
关键 字 可 以 暂停 异步 函数 代码 的 执行 ， 等 待 期 约 解 决 。 来 看 下 面 这 个 本 章 开 始 就 出 现 过 的 例子 : 


let p = new Promise( (resolve, reject) => setTimeout (resolve, 1000, 3)); 















































p.then( (x) => console.log(x)); // 3 
使 用 async/await 可 以 写成 这 样 : 


async function foo() { 
let p = new Promise( (resolve, reject) => setTimeout (resolve, 1000, 3)); 
console.log(await p); 


} 








foo(); 
// 3 


注意 ，await 关键 字 会 暂停 执行 异步 函数 后 面 的 代码 ， 让 出 JavaScript 运行 时 的 执行 线程 。 这 个 行 
为 与 生成 器 函数 中 的 yiela 关键 字 是 一 样 的 。await 关键 字 同 样 是 尝试 “ 解 包 ”对 象 的 值 ， 然 后 将 这 
个 值 传 给 表达 式 ， 再 异步 恢复 异步 函数 的 执行 。 

await 关键 字 的 用 法 与 JavaScript 的 一 元 操作 一 样 。 它 可 以 单独 使 用 ， 也 可 以 在 表达 式 中 使 用 ， 如 
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下 面 的 例子 所 示 : 


// 异步 打印 "foo" 
async function foo() { 
console.log(await Promise.resolve('foo')); 
; 
fo00(); 
// foo 











// 异步 打印 "bar" 
async function bar() { 
return await Promise.resolve('bar'); 


} 
bar() .thenl(console.1og); 
// bar 


// 1000 毫秒 后 异步 打印 "baz" 

async function baz() { 
await new Promise( (resolve, reject) => setTimeout (resolve, 1000)); 
console.log('baz'); 

} 

baz(); 

// baz (1000 毫秒 后 ) 


await 关键 字 期 待 ( 但 实际 上 并 不 要 求 ) 一 个 实现 thenable 接口 的 对 象 , 但 常规 的 值 也 可 以 。 如 
果 是 实现 thenapble 接口 的 对 象 ， 则 这 个 对 象 可 以 由 await 来 “ 解 包 ”。 如 果 不 是 ， 则 这 个 值 就 被 当 作 
已 经 解决 的 期 约 。 下 面 的 代码 演示 了 这 些 情况 : 

// 等 待 一 个 原始 值 

async function foo() { 

console.log(await 'foo'); 
} 


foO6.(); 
// foo 








// 等 待 一 个 没有 实现 thenable 接口 的 对 象 

async function bar() { 
console.log(await ['bar']); 

} 

bar(); 

// ['bar'] 


// 等 待 一 个 实现 了 thenable 接口 的 非 期 约 对 象 
async function baz() { 
const thenable = { 
then(callback) { callback('baz'); } 
}; 
console.log(await thenable); 
} 
baz (); 
// baz 





// 等 待 一 个 期 约 
async function Gux() { 
console.log(await Promise.resolve('qux')); 
} 
qux(); 
// qux 
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等 待 会 抛 出 错误 的 同步 操作 ， 会 返回 拒绝 的 期 约 : 





async function foo() { 
console.1og(1); 
await (() => { throw 3; })(); 
} 


// 给 返回 的 期 约 添 加 一 个 拒绝 处 理 程 序 
foo().catch(console.1og); 
console.1o0g(2); 


A 
#2 
3 








如 前 面 的 例子 所 示 ， 单独 的 Promi se.reject () 不 会 被 异步 函数 捕获 ， 而 会 抛 出 未 捕获 错误 。 不 





对 拒绝 的 期 约 使 用 await 则 会 释放 ( 


async function foo() { 
console.1o0g(1); 
await Promise.reject (3); 

















unwrap ) 错误 值 ( 将 拒绝 期 约 返 回 ): 


console.log(4); // 这 行 代码 不 会 执行 


} 


// 给 返回 的 期 约 添 加 一 个 拒绝 处 理 程 序 
foo() .catch(console.1og); 
console.1o0g(2);} 


Vl 
A 2 
// 3 


3. await 的 限制 
await 关键 字 必 须 在 异步 函数 中 使 用 


























， 不 能 在 顶级 上 下 文 如 <script> 标 签 或 模块 中 使 用 。 不 过 ， 




















定义 并 立即 调用 异步 函数 是 没 问 题 的 。 下 夯 





i 两 段 代码 实际 是 相同 的 : 














async function foo() { 
console.log(await Promise.reso 

} 

foo(); 

A 3 


// 立即 调用 的 异步 函数 表达 式 

(async function() { 
console.log(await Promise.reso 

}) (); 

£7 


lve(3)); 


lve(3) ); 








此 外 ， 异步 函数 的 特质 不 会 扩展 到 向 套 函 数 。 因 此 ，await 关键 字 也 只 能 直接 出 现在 异步 函数 的 定 
义 中 。 在 同步 函数 内 部 使 用 await 会 抛 出 syntaxError。 





下 面 展 示 了 一 些 会 出 错 的 例子 : 
// 不 允许 : await 出 现在 了 箭头 函数 中 


function foo() { 
const SyncEn = () => { 
return await Promise.resolve 
多 
console.log(syncFn()); 


























('fo0'); 
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} 


// 不 允许 : await 出 现在 了 同步 函数 声明 中 
function bar() { 
function syncFn() { 
return await Promise.resolve('bar'); 
} 
console.logl(syncrFn()); 


} 


// 不 允许 : await 出 现在 了 同步 函数 表达 式 中 


function baz() { 
const syncFn = function() { 
return await Promise.resolve('baz'); 
} 


console.log(syncFn()); 


} 


// 不 允许 : IIFE 使 用 同步 济 数 表 达 式 或 往 头 沁 数 

function qux() { 
(function () { console.log(await Promise.resolve('gux')); })(); 
(() => console.log(await Promise.resolve('gqux')))(); 


} 


11.3.2 ”停止 和 恢复 执行 











使 用 await 关键 字 之 后 的 区 别 其实 比 看 上 去 的 还 要 微妙 一 些 。 比 如 , 下 面 的 例子 中 按 顺序 调用 了 3 











个 函数 ， 但 它们 的 输出 结果 顺序 是 相反 的 : 


async function foo() { 
console.log(await Promise.resolve('foo')); 


} 


async function bar() { 
console.log(await 'bar'); 


} 


async function baz() { 
console.log('baz'); 


} 








foo()3 
bar (); 
baz(); 
// baz 


// bar 
// foo 























async/await 中 真正 起 作用 的 是 await。async 关键 字 ， 无 论 从 哪 方面 来 看 ， 都 不 过 是 一 个 标识 符 。 














毕 况 ， 异 步 孙 数 如 果 不 包 含 await 关键 字 ， 其 执行 基本 上 跟 普通 函数 没有 什么 区 别 : 
async function foo() { 


console.1og(2) ; 


} 


console.1o0g(1); 
fo00(); 
console.1o0g(3); 
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// 1 
// 2 
A 














要 完全 理解 await 关键 字 ， 必 须知 道 它 并 非 只 是 等 待 一 个 值 可 用 那么 简单 。JavaScript 运行 时 在 碰 
到 await 关键 字 时 , 会 记录 在 哪里 暂停 执行 。 等 到 await 右边 的 值 可 用 了 ，JavaScript 运行 时 会 向 消息 





队列 中 推送 一 个 任务 ， 这 个 任务 会 恢复 异步 函数 的 执行 。 








因此 ， 即 使 await 后 面 跟 着 一 个 立即 可 用 的 值 ， 函 数 的 其 余部 分 也 会 被 异步 求 值 。 下 面 的 例子 演 





示 了 这 一 点 : 


async function foo() { 
console.1o0g(2);} 
await null; 
console.1og(4);} 


} 


console.1og(1);} 
foo(); 
console.1o0g(3);} 


ew 
// 2 
A 
// 4 


控制 台中 输出 结果 的 顺序 很 好 地 解释 了 运行 时 的 工作 过 程 : 
(1) 打印 1; 

(2) 调用 异步 函数 foo () ; 

(3) (在 fo00() 中 ) 打印 2; 















































(4) (在 foo() 中 ) await 关键 字 暂 停 执行 ,为 立即 可 用 的 值 nu11 向 消息 队列 中 添加 一 个 任务 ; 











(5) foo () 退 出; 

(6) 打印 3; 

(7) 同步 线程 的 代码 执行 完毕 ; 

(8) JavaScript 运行 时 从 消息 队列 中 取出 任务 ,恢复 异步 函数 执行 ; 
(9) (在 foo() 中 ) 恢复 执行 ，await 取得 null 值 (这 里 并 没有 使 
(10) (在 foo() 中 ) 打印 4; 

(11) foo () 返 回 。 






































用 ); 




















如 果 await 后 面 是 一 个 期 约 ， 则 问题 会 稍微 复杂 一 些 。 此 时 ,为 了 执行 异步 函数 ， 实 际 上 会 有 两 个 
任务 被 添加 到 消息 队列 并 被 异步 求 值 。 下 面 的 例子 虽然 看 起 来 很 反 直 觉 ， 但 它 演示 了 真正 的 执行 顺序 : ” 

















async function foo() { 
console.1o0g(2);} 
console.log(await Promise.resolve (8)); 
console.1o0g(9);，;} 


} 


async function bar() { 














DTC39 对 await 后 面 是 期 约 的 情况 如 何 处 理 做 过 一 次 修改 。 修 改 后 ， 本 例 中 的 Promise.resolve(8) 只 会 生成 一 个 




















更 关注 结果 ， 而 不 依赖 执行 顺序 。 一 一 译 者 注 











异步 任务 。 因 此 在 新 版 浏览 器 中 ， 这 个 示例 的 输出 结果 为 123458967。 实 际 开发 中 ， 对 于 并 行 的 异步 





操作 我 们 通常 





console.1log(4) ; 
console.log(await 6); 
console.10g(7); 


} 


console.1o0g(1); 
foOO(); 
console.1o0g(3); 
bar(); 
console.1og(5) ; 


// 
// 
// 
7 
// 
Zi 
J 
// 
Ll 


运行 时 会 像 这 样 执 行 上 面 的 例子 : 

(1) 打印 1; 

(2) 调用 异步 函数 foo ( ) ; 

(3) (在 foo() 中 ) 打印 2; 

(4) (在 foo() 中 ) await 关键 字 和 暂停 执行 ， 向 消息 队列 中 添加 一 个 期 约 在 落 定之 后 执行 的 任务 ; 
(5) 期 约 立 即 落 定 ， 把 给 await 提供 值 的 任务 添加 到 消息 队列 ; 

(6) foo () 退出 ; 

(7) 打印 3; 

(8) 调用 异步 函数 bar () ; 

(9) (在 bar() 中 ) 打印 4; 

(10) (在 bar() 中 ) await 关键 字 暂 停 执行 ,为 立即 可 用 的 值 6 向 消息 队列 中 添加 一 个 任务 ; 
(11) bar () 退出; 

(12) 打印 5; 

(13) 顶级 线程 执行 完毕 ; 

(14) JavaScript 运行 时 从 消息 队列 中 取出 解决 await 期 约 的 处 理 程序 ， 并 将 解决 的 值 8 提供 给 它 ; 
(15) JavaScript 运行 时 向 消息 队列 中 添加 一 个 恢复 执行 foo () 函数 的 任务 ; 

(16) JavaScript 运行 时 从 消息 队列 中 取出 恢复 执行 bar () 的 任务 及 值 6; i 
(17) (在 bar() 中 ) 恢复 执行 ，await 取得 值 6; 

(18) (在 bar() 中 ) 打印 6; 

(19) (在 bar() 中 ) 打印 7; 

(20) bar () 返回; 

(21) 异步 任务 完成 ，JavaScript 从 消息 队列 中 取出 恢复 执行 foo () 的 任务 及 值 8; 

(22) (在 foo() 中 ) 打印 8; 

(23) (在 foo() 中 ) 打印 9; 

(24) foo () 返回 。 


\D oo ~ OU 性 wwN 情 
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11.3.3 ”异步 函数 策略 


因为 简单 实用 ， 
函数 时 ， 还 是 有 些 问 题 要 注意 
1. 实现 sleep () 




















所 以 异步 函数 很 快 成 为 JavaScript 项 目 使 用 最 广泛 的 特性 之 一 。 不 过 





很 多 人 在 刚 开 始 学 习 JavaScript 时 , 想 找 到 一 个 类 似 Java 中 Thread.sl 
序 中 加 入 非 阻塞 的 暂停 。 以 前 ， 这 个 需求 基本 上 都 通过 
实现 的 。 

有 了 异步 函数 之 后 ， 就 不 一 样 了 。 


async function sleep(delay) { 
return new Promise( (resolve) 


} 


setTimeout () 利 用 We 





一 个 简单 的 箭头 函数 就 可 以 实现 sleep () : 


=> setTimeout (resolve, delay)); 


async function foo() { 
const t0 = Date.now(); 
await sleep(1500); // 暂停 约 1500 毫秒 
console.log(Date.now() - t0); 

} 

foo(); 

YX L502 


2. 利用 平行 执行 
如 果 使 用 await 时 不 留心 ， 
个 随机 的 超时 : 


async function randomDelay (id) { 
// 延迟 0~1000 毫秒 
const delay = Math.random() * 1000; 
return new Promise( (resolve) => setTimeout(() => { 
console.log(‘s$s{id} finished.); 
resolve(); 
}, delay)); 
} 








则 很 可 能 错过 平行 加 速 的 机 会 


async function foo() { 

const t0 = Date.now(); 
await randomDelay (0); 
await randomDelay (1); 
await randomDelay (2); 
await randomDelay (3); 
await randomDelay (4); 
console.log(.s$s{Date.now!() 


} 


- toO}ms elapsed. ); 


fo0()’; 

// 0 finished 

// 1 finished 

// 2 finished 

// 3 finished 

// 4 finished 

// 877ms elapsed 


用 一 个 for 循环 重 写 ， 就 是 : 


。 来 看 下 面 的 例子 ， 其 中 | 











， 在 使 用 异步 





() 之 类 的 函数 , 好 在 程 


云 行 时 的 行为 来 


顺序 等 待 了 5 





async function randomDelay (id) { 
// 延迟 0~1000 毫秒 
const delay = Math.random() * 1000; 


return new Promise((resolve) => setTimeout(() => { 
console.log(“ $s{id} finished.); 
resolve(); 

delay)): 


} 


async function foo() { 
const t0 = Date.now(); 
for (let i = 0; i < 5; ++i) { 
await randomDelay (i); 


} 
console.log(‘$s{Date.now() - tO}ms elapsed. ); 
} 
fot()s 
// 0 finished 
// 1 finished 
// 2 finished 
// 3 finished 
// 4 finished 
// 877ms elapsed 


就 算 这 些 期 约 之 间 没 有 依赖 , 异步 函数 也 会 依次 暂停 , 等 待 每 个 超时 完成 。 这 样 可 以 保证 执行 顺序 ， 
但 总 执行 时 间 会 变 长 。 
如 果 顺 序 不 是 必需 保证 的 , 那么 可 以 先 一 次 性 初始 化 所 有 期 约 , 然后 再 分 别 等 待 它们 的 结果 。 比如: 


async function randomDelay (id) { 
// 延迟 0~1000 毫秒 
const delay = Math.random() * 1000; 








return new Promise((resolve) => setTimeout(() => { 
setTimeout (console.log, 0, ‘$s{id} finished.); 
resolve(); 

}» delay)); 


async function foo() { 











const t0 = Date.now(); 
const p0 = randomDelay (0); 
const pl = randomDelay (1); 
const p2 = randomDelay (2); 
const p3 = randomDelay (3); 
const p4 = randomDelay (4); 
await pO0; 
await pl; 
await p2; 
await p3; 
await p4; 
setTimeout (console.1log, 0, ‘S${Date.now() - tO0O}ms elapsed.); 
} 
fo00(); 


// 1 finished 





// 4 finished 
// 3 finished 
// 0 finished 
// 2 finished 


// 877ms elapsed 


用 数组 和 for 循环 再 包装 一 下 就 是 : 


async function randomDelay (id) { 
// 延迟 0~1000 毫秒 
const delay = Math.random() * 1000; 
return new Promise((resolve) => setTimeout(() => { 
console.log(“s$s{id} finished.); 
resolve(); 
Fdelav})}s 
} 


async function foo() { 
const t0 = Date.now(); 


const promises = Array(5) .fill(null) .map((_, i) => randomDelay (i)); 


for (const p of promises) { 














await p; 

} 

console.log(‘s${Date.now() - tO}ms elapsed.); 
} 
foOG:()3 
// 4 finished 
// 2 finished 
// 1 finished 
// 0 finished 
// 3 finished 
// 877ms elapsed 
注意 ， 虽 然 期 约 没 有 按照 顺序 执行 ,但 await 按 顺序 收 到 了 每 个 期 约 的 值 : 





async function randomDelay (id) { 
// 延迟 0~1000 毫秒 
const delay = Math.random() * 1000; 
return new Promise( (esolve) => setTimeout(() => { 
console.log(“s$s{id} finished.); 
resolve (id); 
上 ea 


async function foo() { 
const t0 = Date.now(); 


const promises = Array(5) .fill(null) .map((_, i) => randomDelay (i)); 


for (const p of promises) { 
console.log(‘awaited S$tawait p}.); 


} 


console.log(‘s${Date.now() - tO}ms elapsed.); 
} 


foo(); 





1 finished 
2 finished 
// 4 finished 
3 finished 
0 finished 
// awaited 0 
// awaited 1 
// awaited 2 
// awaited 3 
// awaited 4 
// 645ms elapsed 


3. 串 行 执行 期 约 
在 11.2 节 , 我 们 讨论 过 如 何 串 行 执行 期 约 并 把 值 传 给 后 续 的 期 约 。 使 用 async/await， 期 约 连 
得 很 简单 : 


function addTwo (x) 
function addThreel( 
function addFive (x 


误 
bb 
并 


{return x + 2;} 
x) {return x + 3;} 
) {return x + 5;} 


async function addTen(x) { 
for (const fn of [addTwo, addThree, addFive]) { 
x = await fn(x); 
} 


return x; 


} 


addTen(9) .then(console.l1log); // 19 


这 里 , await 直接 传递 了 每 个 函数 的 返回 值 , 结果 通过 迭代 产生 。 当 然 , 这 个 例子 并 没有 使 用 期 约 ， 
如 果 要 使 用 期 约 ， 则 可 以 把 所 有 函数 都 改 成 异步 函数 。 这 样 它们 就 都 返回 期 约 了 : 


async function addTwo (x) 
async function addThreel( 
async function addFive(x 









































{return x + 2;} 
x) {return x + 3;} 
) LetUrFN .让 5 





async function addTen(x) { 
for (const fn of [addTwo, addThree, addFive]) { 
x = await fn(x); 


return x; 


} 


addTen(9) .then(console.l1log); // 19 oS 


4. 栈 追 踪 与 内 存 管理 
期 约 与 异步 函数 的 功能 有 相当 程度 的 重 全 ,但 它们 在 内 存 中 的 表示 则 差别 很 大 。 看 看 下 面 的 例子 ， 
它 展 示 了 拒绝 期 约 的 栈 追 踪 信息 : 


function fooPpromiseExecutor(resolve, reject) { 
setTimeout (reject, 1000, 'bar'); 


} 

















function foo() { 
new Promise(fooPpromiseExecutor); 


} 
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foON() 

// Uncaught (in promise) bar 
4 setTimeout 

// setTimeout (async) 

// fooPromiseExecutor 

// foo 


根据 对 期 约 的 不 同 理解 程度 ， 以 上 栈 追 踪 信 息 可 能 会 让 某 些 读 考 不 解 。 栈 追踪 信息 应 该 相当 直接 地 























表现 JavaScript 引擎 当前 栈 内 存 中 函数 调用 之 间 的 藤 套 关系 。 在 超时 处 理 程序 执行 时 和 拒绝 期 约 时 ,我 
们 看 到 的 错误 信息 包含 找 套 函数 的 标识 符 ,， 那 是 被 调用 以 创建 最 初期 约 实例 的 函数 。 可 是 ,我 们 知道 这 
些 函 数 已 经 返回 了 ， 因 此 栈 追 踪 信 息 中 不 应 该 看 到 它们 。 


调 
全 
3 






































答案 很 简单 ， 这 是 因为 JavaScript 引擎 会 在 创建 期 约 时 尽 可 能 保留 完整 的 调用 栈 。 在 抛 出 错误 时 ， 














用 栈 可 以 由 运行 时 的 错误 处 理 逻 辑 获 取 ， 因 而 就 会 出 现在 栈 追 踪 信 息 中 。 当 然 ， 这 意味 着 栈 追 踪 信息 











占用 内 存 ， 从 而 带 来 一 些 计算 和 存储 成 本 。 











如 果 在 前 面 的 例子 中 使 用 的 是 异步 函数 ， 那 义 会 怎样 呢 ? 比 如 : 


function fooPpromiseExecutor(resolve, reject) { 
setTimeout (reject, 1000, 'bar'); 


} 





async function foo() { 
await new Promise(fooPpromiseExecutor); 


} 


foo(); 


// Uncaught (in promise) bar 


// foo 
// async function (async) 
// foo 























这 样 一 改 ， 栈 追踪 信息 就 准确 地 反映 了 当前 的 调用 栈 。fooPromiseExecutor () 已 经 返回 ， 所 以 























它 不 在 错误 信息 中 。 但 foo () 此 时 被 挂 起 了 ， 并 没有 退出 。JavaScript 运行 时 可 以 简单 地 在 租 套 函数 中 
存储 指向 包含 函数 的 指针 ， 就 跟 对 待 同步 函数 调用 栈 一 样 。 这 个 指针 实际 上 存储 在 内 存 中 ， 可 用 于 在 出 
错时 生成 栈 追 踪 信 息 。 这 样 就 不 会 像 之 前 的 例子 那样 带 来 额外 的 消耗 ,因此 在 重视 性 能 的 应 用 中 是 可 以 
优先 考虑 的 。 


11.4 小结 














































































































长 期 以 来 ， 掌 握 单线 程 JavaScript 运行 时 的 异步 行为 一 直 都 是 个 艰巨 的 任务 。 随 着 ES6 新 增 了 期 约 


和 ES8 新 增 了 异步 函数 ，ECMAScript 的 异步 编程 特性 有 了 长 足 的 进步 。 通 过 期 约 和 async/await， 不 仅 























可 以 实现 之 前 难以 实现 或 不 可 能 实现 的 任务 , 而 且 也 能 写 出 更 清晰 、 简洁 , 并 且 容 易 理解 、 调 试 的 代码 。 















































期 约 的 主要 功能 是 为 异步 代码 提供 了 清晰 的 抽象 。 可 以 用 期 约 表示 异步 执行 的 代码 块 , 也 可 以 用 期 





约 表示 异步 计算 的 值 。 在 需要 串 行 异步 代码 时 ,期 约 的 价值 最 为 突出 。 作 为 可 塑性 极 强 的 一 种 结构 ， 期 
约 可 以 被 序列 化 、 连 锁 使 用 、 复 合 、 扩 展 和 重组 。 

















异步 函数 是 将 期 约 应 用 于 JavaScript 函数 的 结果 。 异 步 函数 可 以 暂停 执行 ， 而 不 阻塞 主线 程 。 无 论 














是 编写 基于 期 约 的 代码 ,还 是 组 织 囊 行 或 平行 执行 的 异步 代码 ,使 用 异步 函数 都 非常 得 心 应 手 。 异 步 函 



































数 可 以 说 是 现代 JavaScript 工具 箱 中 最 重要 的 工具 之 一 。 





第 了 人 章 
BOM 


本 章 内 容 

口 理解 BOM 的 核心 
口 控制 窗口 及 弹 窗 
口 通过 location 对 象 获取 页 面 信息 
口 使 用 navigator 对 象 了 解 浏览 

口 通过 hi story 对 象 操作 浏览 器 历史 


window 对 象 

















虽然 ECMAScript 把 浏览 器 对 象 模型 ( BOM，Browser Object Model ) 描述 为 JavaScript 的 核心 ， 但 
实际 上 BOM 是 使 用 JavaScript 开发 Web 应 用 程序 的 核心 。BOM 提供 了 与 网 页 无 关 的 浏览 器 功能 对 象 。 
多 年 来 ，BOM 是 在 缺乏 规范 的 背景 下 发 展 起 来 的 ， 因 此 既 充满 乐趣 又 问题 多 多 。 毕 况 ， 浏 览 器 开发 商 
都 按照 自己 的 意愿 来 为 它 添砖加瓦 。 最 终 ， 浏 览 器 实现 之 间 共 通 的 部 分 成 为 了 事实 标准 ， 为 Web 开发 
提供 了 浏览 絮 间 互 操作 的 基础 。HTML5 规范 中 有 一 部 分 涵盖 了 BOM 的 主要 内 容 ， 因 为 W3C 希望 将 
JavaScript 在 浏览 器 中 最 基础 的 部 分 标准 化 。 


12.1 window 对 象 
BOM 的 核心 是 window 对 象 ， 表 示 浏 览 器 的 实例 。window 对 象 在 浏览 器 中 有 两 重 身份 ， 一 个 是 


ECMAScript 中 的 Global 对 象 , 另 一 个 就 是 浏览 器 窗口 的 JavaScript 接口 。 这 意味 着 网 页 中 定义 的 所 有 
对 象 、 变 量 和 函数 都 以 winqovw 作为 其 Global 对 象 , 都 可 以 访问 其 上 定义 的 parseInt () 等 全 局 方法 。 













































































注意 因为 window 对 象 的 属性 在 全 局 作用 域 中 有 效 , 所 以 很 多 浏览 器 API 及 相关 构造 函数 
都 以 window 对 象 属性 的 形式 暴露 出 来 。 这 些 API 将 在 全 书 各 章 中 介绍 ， 特 别 是 第 20 章 。 


另外 ， 由 于 实现 不 同 ， 某 些 window 对 象 的 属性 在 不 同 浏览 器 间 可 能 差异 很 大 。 本 章 不 会 
介绍 已 经 废弃 的 、 非 标准 化 或 特定 于 浏览 器 的 window 属性 。 





12.1.1 Global 作用 域 


因为 window 对 象 被 复 用 为 ECMAScript 的 Global 对 象 , 所 以 通过 var 声明 的 所 有 全 局 变量 和 郴 
数 都 会 变 成 winaqow 对 象 的 属性 和 方法 。 比 如 : 

var age = 29; 

var sayAge = () => alert (this.age); 








alert (window.age); // 29 
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sayAge (); // 29 
window.sayAge(); Xi 


这 里 ， 变 量 age 和 了 国 数 sayAge () 被 定义 在 全 局 作用 域 中 ， 它 们 自动 成 为 了 window 对 象 的 成 员 。 
因此 , 变量 age 可 以 通过 window.age 来 访问 , 而 函数 sayAge () 也 可 以 通过 winqow.sayage () 来 访问 。 
因为 sayAge () 存在 于 全 局 作用 域 ，this .age 映射 到 wingow.age， 所 以 就 可 以 显示 正确 的 结果 了 。 

如 果 在 这 里 使 用 let 或 const 替代 var， 则 不 会 把 变量 添加 给 全 局 对 象 


let age = 29; 















































const sayAge = () => alert (this.age); 

alert (window.age); // undefined 

sayAge (); // undefined 

window.sayAge (); // TypeError: window.sayAge is not a function 











另外 , 访问 未 声明 的 变量 会 抛 出 错误 , 但 是 可 以 在 wingow 对 象 上 查询 是 否 存在 可 能 未 声明 的 变量 。 
比如 : 


// 这 会 导致 抛 出 错误 ， 因 为 oldValue 没有 声明 
Var newValue = oldValue; 

// 这 不 会 抛 出 错误 ， 因 为 这 里 是 属性 查询 

// newValue 会 被 设置 为 undefined 

Var newValue = window.oldValue; 


记 住 ，JavaScript 中 有 很 多 对 象 都 暴露 在 全 局 作用 域 中 ， 比 如 location 和 navigator (本 章 后 面 
都 会 讨论 )， 因 而 它们 也 是 wingdow 对 象 的 属性 。 


12.1.2 ”窗口 关系 


top 对 象 始终 指向 最 上 层 〈 最 外 层 ) 窗口 ， 即 浏览 器 窗口 本 身 。 而 parent 对 象 则 始终 指向 当前 窗 
口 的 父 窗口 。 如 果 当 前 窗口 是 最 上 层 窗 口 ， 则 parent 等 于 top (都 等 于 window )。 最 上 层 的 window 
如 果 不 是 通过 window.open () 打开 的 ,那么 其 name 属性 就 不 会 包含 值 ， 本 章 后 面 会 讨论 。 

还 有 一 个 self 对 象 ， 它 是 终极 window 属性 ， 始 终 会 指向 window。 实 际 上 ，self 和 wingow 就 
是 同一 个 对 象 。 之 所 以 还 要 暴露 self， 就 是 为 了 和 top、parent 保持 一 致 。 

这 些 属性 都 是 window 对 象 的 属性 ， 因 此 访问 window.parent、window.top 和 window.self 
都 可 以 。 这 意味 着 可 以 把 访问 多 个 窗口 的 window 对 象 串 联 起 来 ， 比 如 window.parent .parent。 


12.1.3 ”窗口 位 置 与 像素 比 


window 对 象 的 位 置 可 以 通过 不 同 的 属性 和 方法 来 确定 。 现 代 浏 览 器 提供 了 screenLeft 和 
screenTop 属性 ， 用 于 表示 窗口 相对 于 屏幕 左 侧 和 顶部 的 位 置 ， 返 回 值 的 单位 是 CSS 像素 。 

可 以 使 用 moveTo () 和 moveBy () 方 法 移动 窗口 。 这 两 个 方法 都 接收 两 个 参数 ， 其 中 moveTo () 接 
收 要 移动 到 的 新 位 置 的 绝对 坐标 x 和 y; 而 moveBy () 则 接收 相对 当前 位 置 在 两 个 方向 上 移动 的 像素 数 。 
比如 : 

// 把 窗口 移动 到 左上 角 


window.moveTo(0,0); 












































































































































// 把 窗口 向 下 移动 100 像素 
window.moveBy (0, 100); 
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// 把 窗口 移动 到 坐标 位 置 (200，300) 
window.moveTo(200, 300); 


// 把 窗口 向 左 移动 50 像素 


window.moveBy (-50, 0); 

依 浏览 器 而 定 ， 以 上 方法 可 能 会 被 部 分 或 全 部 禁用 。 

像素 比 

CSS 像素 是 Web 开发 中 使 用 的 统一 像素 单位 。 这 个 单位 的 背后 其 实 是 一 个 角度 : 0.0213"。 如 果 屏 
幕 距 离 人 眼 是 一 臂 长 ， 则 以 这 个 角度 计算 的 CSS 像素 大 小 约 为 1196 英寸 。 这 样 定义 像素 大 小 是 为 了 在 
不 同 设备 上 统一 标准 。 比 如 ， 低 分 辨 率 平板 设备 上 12 像素 (CSS 像素 ) 的 文字 应 该 与 高 清 4K 屏幕 下 
12 像素 (CSS 像素 ) 的 文字 具有 相同 大 小 。 这 就 带 来 了 一 个 问题 ， 不 同 像素 密度 的 屏幕 下 就 会 有 不 同 的 
缩放 系数 ， 以 便 把 物理 像素 ( 屏幕 实际 的 分 辨 率 ) 转换 为 CSS 像素 〈 浏览 器 报告 的 虚拟 分 辨 率 )。 

举 个 例子 ， 手 机 屏幕 的 物理 分 辨 率 可 能 是 1920x1080， 但 因为 其 像素 可 能 非常 小 ,所 以 浏览 器 就 需 
要 将 其 分 辨 率 降 为 较 低 的 逻辑 分 辩 率 ， 比 如 640x320。 这 个 物理 像素 与 CSS 像素 之 间 的 转换 比率 由 
window.devicePixelRatio 属性 提供 。 对 于 分 辨 率 从 1920x1080 转换 为 640x320 的 设备 ，window. 
devicePixelRatio 的 值 就 是 3。 这 样 一 来 ，12 像素 〈CSS 像素 ) 的 文字 实际 上 就 会 用 36 像素 的 物理 
像素 来 显示 。 

window.devicePixelRatio 实际 上 与 每 英寸 像素 数 (DPI，dots per inch ) 是 对 应 的 。DPI 表示 单 
位 像素 密度 ， 而 window .devicePixelRatio 表示 物理 像素 与 逻辑 像素 之 间 的 缩放 系数 。 






















































































12.1.4 窗口 大 小 
在 不 同 浏览 器 中 确定 浏览 器 窗口 大 小 没有 想象 中 那么 容易 。 所 有 现代 浏览 器 都 支持 4 个 属性 : 


innerWiadth、innerHeight、outerWidth 和 outerHeight。outerWiath 和 outerHeignt 返回 浏 
览 絮 窗口 自身 的 大 小 (不管 是 在 最 外 层 window 上 使 用 ， 还 是 在 窗 格 <frame> 中 使 用 )。innerwiath 
和 ijnnerHeight 返回 浏览 带 窗 口中 页 面 视 口 的 大 小 (不 包含 浏览 器 边框 和 工具 栏 )。 
document .documentElement .clientWidth 和 document .documentElement.clientHeight 
返回 页 面 视 口 的 宽度 和 高 度 。 
浏览 器 窗口 自身 的 精确 尺寸 不 好 确定 ,但 可 以 确定 页 面 视 口 的 大 小 ， 如 下 所 示 : 

















































































































let pageWidth = window.innerWidth, 
pageHeight = window.innerHeight; 
if (typeof pageWidth != "number") { 
if (document .compatMode == "CSSlCompat")t{ 
pageWidth = document .documentElement.clientWidth; 
pageHeight = document .documentElement.clientHeight; 
和 cm 
pageWidth = document .body.clientWidth; 
pageHeight = document .body.clientHeight; 


这 里 ， 先 将 pagewidath 和 pageHeight 的 值 分 别 设置 为 windqow.innerwidth 和 window. 
innerHeight。 然 后 ， 检 查 pagewidtn 是 不 是 一 个 数值 ， 如 果 不 是 则 通过 document .compatMode 
来 检查 页 面 是 否 处 于 标准 模式 。 如 果 是 ， 则 使 用 document .documentElement .clientWiath 和 
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document .documentElement .clientHeight; 否则 ， 就 使 用 document .body.clientwidth 和 








document .body.clientHeight。 

在 移动 设备 上 ，window.innerwidth 和 window.innerHeight 返回 视 口 的 大 小 ， 也 就 是 屏幕 上 
页 面 可 视 区 域 的 大 小 。Mobile Internet Explorer 支持 这 些 属性 ,但 在 document .documentElement. 
clientWidth 和 document .documentElement .clientHeight 中 提供 了 相同 的 信息 。 在 放大 或 缩小 
页 面 时 ， 这 些 值 也 会 相应 变化 。 

在 其 他 移动 浏览 器 中 ,aqocument .documentElement .clientWiath 和 document .documentElement. 
clientHeight 返回 的 布局 视 口 的 大 小 ， 即 泻 染 页 面 的 实际 大 小 。 布 局 视 口 是 相对 于 可 见 视 口 的 概念 ， 
可 见 视 口 只 能 显示 整个 页 面 的 一 小 部 分 。Mobile Internet Explorer 把 布局 视 口 的 信息 保存 在 
document .body .clientWidth 和 document .body.clientHeignt 中 。 在 放大 或 缩小 页 面 时 ， 这 些 
值 也 会 相应 变化 。 

因为 桌面 浏览 器 的 差异 ， 所 以 需要 先 确 定 用 户 是 不 是 在 使 用 移动 设备 ， 然 后 再 决定 使 用 哪个 属性 。 















































































































































注意 手机 视 口 的 概念 比较 复杂 ， 有 各 种 各 样 的 问题 。 如 果 读 者 在 做 移动 开发 ， 推 荐 阅读 


Peter-Paul Koch 发 表 在 QuirksMode 网 站 上 的 文章 “A Tale of Two Viewports 一 Part Two”。 











可 以 使 用 resizeTo() 和 resizeBy () 方 法 调整 窗口 大 小 Ba 
接收 新 的 宽度 和 高 度 值 ， 而 resizeBy () 接收 宽度 和 高 度 各 要 缩放 多 少 。 下 面 看 个 例子 : 


// 缩放 到 100x100 
window.resizeTo(100, 100); 























// 缩放 到 200x150 
window.resizeBy (100, 50); 


// 缩放 到 300x300 
window.resizeTo(300, 300); 


与 移动 窗口 的 方法 一 样 , 缩放 窗口 的 方法 可 能 会 被 浏览 器 禁用 , 而且 在 某 些 浏 览 器 中 默认 是 禁用 的 。 
同样 ， 缩 放 窗 口 的 方法 只 能 应 用 到 最 上 层 的 window 对 象 。 























12.1.5 视 口 位 置 


浏览 需 窗 口 尺寸 通常 无 法 满足 完整 显示 整个 页 面 ， 为 此 用 户 可 以 通过 滚动 在 有 限 的 视 口中 查看 文 
档 。 度 量 文档 相对 于 视 口 滚动 上 距离 的 属性 有 两 对 ， 返 回 相 等 的 值 : window.pageXoffset/window. 
scrol1X 和 window.pageYoffset/window.scrollYy。 

可 以 使 用 scroll()、scrollTo() 和 scrollBy () 方 法 滚动 页 面 。 这 3 个 方法 都 接收 表示 相对 视 口 距 
离 的 zx 和? 坐标， 这 两 个 参数 在 前 两 个 方法 中 表示 要 滚动 到 的 坐标 ， 在 最 后 一 个 方法 中 表示 滚动 的 距离 。 


// 相对 于 当前 视 口 向 下 滚动 100 像素 
window.scrollBy (0, 100); 









































// 相对 于 当前 视 口 向 右 滚动 40 像素 
window.scrollBy (40, 0); 


// 滚动 到 页 面 左 上 角 


window.scrollTo(0, 0); 
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// 滚动 到 距离 屏幕 左边 及 项 边 各 100 像素 的 位 置 


window.scrollTo( 


这 几 个 方法 也 都 接收 一 个 scrollTooptions 字典 , 除了 提供 偏 移 值 , 还 
是 否 平滑 滚动 。 





告诉 浏览 


// 正常 滚动 
window.scrollTo( 
left: 100, 
toOp® TOQ 
behavior: 


// 平滑 滚动 


100, 100); 


{ 


'auto' 


window.scrollTo({ 


left: 100, 
top: 100, 
behavior: 


小 ) 子 


'smooth' 


12.1.6 ”导航 与 打开 新 窗口 


window.open!l 


个 参数 : 要 加 载 的 URL、 目标 
常 ， 调 用 这 个 方法 时 只 


通 











面 的 布尔 值 。 











如 果 window.open ( 





向 






































() 方 法 可 以 用 于 导航 到 指定 URL， 也 可 
国明 a i ln en 


以 用 于 打开 新 浏览 右 窗 口 














() 的 第 二 





窗口 或 窗 格 中 打开 URL。 下 面 是 一 个 例子 : 





// 与 <a href="ht 
windqow.open ( 


执行 这 


性 为 "topFrame" 的 链接 。 
会 打开 一 个 新 窗口 并 将 
































“htt 


代码 的 结果 就 如 同 用 户 点 击 了 一 
如 果 有 一 个 窗口 名 叫 "topFrame"， 则 这 个 窗口 


tp://Wwww.wrox.com" 
Dp://www.wrox.com/", 


























其 命名 为 "topFrame"。 




















专 前 3 个 参数 ， 最 后 一 个 


参数 只 有 在 不 打开 3 





target="topFrame"/> 相 同 


"topFrame"); 


A 





个 href 属性 为 "http://www.wrox.com", target 属 
就 会 打开 这 个 URL; 否则 就 
品名 ， 比 如 _self、 





第 二 个 参数 也 可 以 是 一 个 特殊 的 窗 














以 通过 benavior 属性 





。 这 个 方法 接收 4 











新 窗口 时 才 会 使 用 。 





个 参数 是 一 个 已 经 存在 的 窗口 或 窗 格 (frame ) 的 名 字 ， 则 会 在 对 应 的 


I 








dl 


























_parent、_top 或 _plank。 
1. 弹出 窗口 
如 果 wingdow.open() 的 第 二 个 参数 不 是 已 有 窗口 ， 则 会 打开 一 个 新 窗口 或 标签 页 。 第 三 个 参数 ， 
即 特性 字符 串 ， 用 于 指定 新 窗口 的 配置 。 如 果 没 有 传 第 三 个 参数 ， 则 新 窗口 (或 标签 页 ) 会 带 有 所 有 默 
认 的 浏览 器 特性 (工具 栏 、 地 址 栏 、 状 态 栏 等 都 是 默认 配置 )。 如 果 打 开 的 不 是 新 窗口 ， 则 忽略 第 三 个 
参数 。 
特性 字符 串 是 一 个 逗号 分 隔 的 设置 字符 串 ， 用 于 指定 新 窗口 包含 的 特性 。 下 表 列 出 了 一 些 选 项 。 2 
设 置 值 说 明 
fullscreen yes'" 或 "no" 表示 新 窗口 是 否 最 大 化 。 仅 限 下 支持 
height 数值 新 窗口 高 度 。 这 个 值 不 能 小 于 100 
left 数值 新 窗口 的 x 轴 坐 标 。 这 个 值 不 能 是 负 值 
location yes" 或 "no 表示 是 否 显示 地 址 栏 。 不 同 浏览 器 的 默认 值 也 不 一 样 。 在 设置 为 "no" 时 ， 地 址 栏 
可 能 隐藏 或 禁用 ( 取决 于 浏览 器 ) 
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( 续 ) 
设 置 值 说 ” 明 
Menubar yes" 或 "no 表示 是 否 显示 菜单 栏 。 默 认为 "no" 
resizable yes" 或 "no 表示 是 否 可 以 拖 动 改变 新 窗口 大 小 。 默 认为 "no" 
scrollbars yes" 或 "no 表示 是 否 可 以 在 内 容 过 长 时 滚动 。 默 认为 "no" 
status yes" 或 "no 表示 是 否 显示 状态 栏 。 不 同 浏览 器 的 默认 值 也 不 一 样 
toolbar yes" 或 "rno 表示 是 和 否 显示 工具 栏 。 默 认为 "no" 
top 数值 新 窗口 的 y 轴 坐标 。 这 个 值 不 能 是 负 值 
width 数值 新 窗口 的 宽度 。 这 个 值 不 能 小 于 100 
这 些 设 置 需要 以 逗号 分 隔 的 名 值 对 形式 出 现 ， 其 中 名 值 对 以 等 号 连接 。( 特性 字符 串 中 不 能 包含 空 





格 。) 来 看 下 面 的 例子 : 


window.open ("http://www.wrox.com/", 
"wroxWindow", 


"height=400,width=400,top=10,1left=10,resizable=yes");} 




















这 行 代 码 会 打开 一 个 可 缩放 的 新 窗口 ， 大 小 为 400 像素 x400 像素 ,位 于 离 屏幕 左边 及 顶 边 各 10 像 





素 的 位 置 。 





window.open () 方 法 返回 一 个 对 新 建 窗口 的 引 j 
控制 新 窗口 提供 了 方便 。 例 如 ， 某 些 议 
window.open() 创 建 的 窗口 。 跟 使 用 任何 window 对 


http://www.wrox.com/", 


Jet wroxWin = 


// 缩放 


wroxWin.resizeTo(500, 


// 移动 


wroxWin.moveTo(100, 











window.open(" 


























"wroxWindow", 
"height=400,width=400,top=10,1left=10,resizable=yes");} 


L000 


500); 


览 器 默认 不 允许 缩放 或 移动 主 窗 
象 一 样 ， 可 以 使 用 

















还 可 以 使 用 close () 方 法 像 这 样 关闭 新 打开 的 窗口 : 


wroxWin.close(); 











这 个 方法 只 能 
弹出 窗口 可 以 调用 
其 closed 属性 了 : 


























用 于 window .open () 创建 的 弹 
top.close() 来 关闭 自 


wroxWin.close(); 


alert 





























f 出 窗口 。 虽 然 不 可 能 不 经 


pp 




















用 户 确 








用 








(wroxWin.closed); // true 








己 。 关 闭 窗口 














以 后 ,窗口 的 引 








认 就 关闭 3 





]。 这 个 对 象 与 普通 window 对 象 没有 区 别 , 只 是 为 
口 , 但 可 能 允许 缩放 或 移动 通过 
这 个 对 象 操纵 新 打开 的 窗 





加 5 


窗口 ， 但 








虽然 还 在 ,但 只 能 用 于 检查 


新 创建 窗口 的 window 对 象 有 一 个 属性 opener， 指 向 打开 它 的 窗口 。 这 个 属性 只 在 弹出 窗口 的 最 


上 层 window 对 象 (top ) 有 定义 ， 是 指向 调用 window.open () 打开 它 的 窗口 或 窗 格 的 指针 。 例 如 : 


let wroxWin = 


window.open(" 





"wroxWindow", 
"height=400,width=400,top=10,1left=10,resizable=yes");} 


alert (wroxWin.opener === window); // true 


http://www.wrox.com/", 
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虽然 新 建 窗口 中 有 指向 打开 它 的 窗口 的 指针 , 但 反之 则 不 然 。 窗 口 不 会 跟踪 记录 自己 打开 的 新 窗口 ， 


因此 开发 者 需要 自己 记录 。 





























在 某 些 浏览 需 中 ， 每 个 标签 页 会 运行 在 独立 的 进程 中 。 如 曙 














一 个 标签 页 打开 了 另 一 个 ， 而 window 


对 象 需要 跟 另 一 个 标签 页 通信 , 那么 标签 便 不 能 运行 在 独立 的 进程 中 。 在 这 些 浏览 器 中 ， 可 以 将 新 打开 











的 标签 页 的 opener 属性 设置 为 null1， 表 示 新 打开 的 标签 页 可 








以 运行 在 独立 的 进程 中 。 比 如 : 





let wroxWin = window.open("http://www.wrox.com/", 
"wroxWindow", 
"height=400,width=400,top=10,1eft=10 


wroxWin.opener = null; 


,resizable=yes"); 








把 opener 设置 为 null 表示 新 打开 的 标签 页 不 需要 与 打开 它 的 标签 页 通信 ， 因 此 可 以 在 独立 进程 


中 运行 。 这 个 连接 一 旦 切断 ， 就 无 法 恢复 了 。 
2. 安全 限制 


























弹出 窗口 有 段 时 间 被 在 线 广告 用 滥 了 。 很 多 在 线 广告 会 把 弹出 窗口 伪装 成 系统 对 话 框 ， 诱 导 用 户 点 











台 对 弹 窗 施加 限制 。 




















击 。 因 为 长 得 像 系 统 对 话 框 ， 所 以 用 户 很 难 分 清 这 些 弹 窗 的 来 源 。 为 了 让 用 户 能 够 区 分 清楚 ,浏览 器 开 











IE 的 早期 版 本 实现 针对 弹 窗 的 多 重 安全 限制 , 包括 不 允许 创建 弹 窗 或 把 弹 窗 移 出 屏幕 之 外 ,以 及 不 














允许 隐藏 状态 栏 等 。 从 IE7 开始， 地 址 栏 也 不 能 隐藏 了， 而 且 弹 窗 默认 是 不 能 移动 或 缩放 的 。Firefox 1 





禁用 了 隐藏 状态 栏 的 功能 , 因此 无 论 windqow.open () 的 特性 字 








符 串 是 什么 , 都 不 会 隐藏 弹 窗 的 状态 栏 。 














Firefox 3 强制 弹 窗 始终 显示 地 址 栏 。Opera 只 会 在 主 窗 口中 打开 新 窗口 ， 但 不 允许 它们 出 现在 系统 对 话 























框 的 位 置 。 





此 外 , 浏览 器 会 在 用 户 操作 下 才 人 允许 创建 弹 窗 。 在 网 页 加 载 过程 中 调用 window.open () 没有 效 细 





















































7 也 


而 且 还 可 能 导致 向 用 户 显示 错误 。 弹 窗 通 常 可 能 在 鼠标 点 击 或 按 下 键盘 中 某 个 键 的 情况 下 才能 打开 。 

















注意 卫 对 打开 本 地 网 页 的 窗口 再 弹 窗 解除 了 某 些 限制 。 同 样 的 代码 如 果 来 自 服务 器 ， 则 


会 施加 弹 窗 限制 。 





3. 弹 窗 屏 蔽 程序 








所 有 现代 浏览 器 都 内 置 了 屏蔽 弹 窗 的 程序 ,因此 大 多 数 意料 之 外 的 弹 窗 都 会 被 屏蔽 。 在 浏览 吉 屏 项 














弹 窗 时 ， 可 能 会 发 生 一 些 事 。 如 果 浏 览 器 内 置 的 弹 窗 屏蔽 程序 阻止 了 弹 窗 ,那么 windaow.open () 很 可 























能 会 返回 nul1。 此 时 ， 只 要 检查 这 个 方法 的 返回 值 就 可 以 知道 


let wroxWin = window.open("http://www.wrox.com", 
if (wroxWin == null)t{ 

alert ("The popup was blocked!"); 
} 


在 浏览 器 扩展 或 其 他 程序 屏蔽 弹 窗 时 ，window .open() 通 常会 抛 出 错误 。 因 此 要 准确 检测 弹 窗 是 








否 被 屏蔽 ， 除 了 检测 wingdow .open () 的 返回 值 ， 还 要 把 它 用 


let blocked = false; 





try { 
let wroxWin = window.open ("http://www.wrox.com", 
if (wroxWin == null)t 








弹 窗 是 否 被 屏蔽 了 ， 比 如 : 





区 < 全 





ry/catch 包装 起 来 ， 像 这 样 : 


"_pblank"); 
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blocked = true; 

} 
} catch (ex){ 

blocked = true; 
} 
if (blocked){ 

alert ("The popup was blocked!"); 
} 


无 论 弹 窗 是 用 什么 方法 屏蔽 的 , 以 上 代码 都 可 以 准确 判断 调用 windqow.open () 的 弹 窗 是 否 被 屏蔽 了 。 





























注意 检查 弹 窗 是 否 被 屏 菩 ， 





12.1.7 ”定时 器 


JavaScript 在 浏览 器 中 是 单线 程 执行 的 ， 但 允许 使 用 定时 器 指定 在 某 个 时 间 之 后 或 每 隔 -一 段 时 间 就 
执行 相应 的 代码 。setTimeout () 用 于 指定 在 一 定时 间 后 执行 某 些 代码 ,而 setInterval () 用 于 指定 
每 隔 一 段 时 间 执行 某 些 代码 。 

setTimeout () 方 法 通常 接收 两 个 参数 : 要 执行 的 代码 和 在 执行 回调 函数 前 等 待 的 时 间 ( 毫秒 ) 第 
一 个 参数 可 以 是 包含 JavaScript 代码 的 字符 串 〈 类似 于 传 给 eval () 的 字符 串 ) 或 者 一 个 函数 ， 比 如 : 


// 在 1 秒 后 显示 警告 框 
SetTimeout (() => alert ("Hello world!"), 1000); 


第 二 个 参数 是 要 等 待 的 毫秒 数 ， 而 不 是 要 执行 代码 的 确切 时 间 。JavaScript 是 单线 程 的 ， 所 以 每 次 
只 能 执行 一 段 代码 。 为 了 调度 不 同 代 码 的 执行 ，JavaScript 维护 了 一 个 任务 队列 。 其 中 的 任务 会 按照 添 
加 到 队列 的 先后 顺序 执行 。setTimeout () 的 第 二 个 参数 只 是 告诉 JavaScript 引擎 在 指定 的 毫秒 数 过 后 
把 任务 添加 到 这 个 队列 。 如 果 队 列 是 空 的 ， 则 会 立即 执行 该 代码 。 如 果 队 列 不 是 空 的 ， 则 代码 必须 等 待 
前 面 的 任务 执行 完 才能 执行 。 

调用 setTimeout () 时 , 会 返回 一 个 表示 该 超时 排 期 的 数值 ID。 这 个 超时 ID 是 被 排 期 执行 代码 的 
唯一 标识 符 , 可 用 于 取消 该 任务 。 要 取消 等 待 中 的 排 期 任务 , 可 以 调用 clearTimeout () 方 法 并 传 入 超 
时 ID， 如 下 面 的 例子 所 示 : 


// 设置 超时 任务 
let timeoutId = setTimeout(() => alert("Hello world!"), 1000); 




































































// 取消 超时 任务 


clearTimeout (timeoutId); 
只 要 是 在 指定 时 间 到 达 之 前 调用 clearTimeout () ， 就 可 以 取消 超时 任务 。 在 任务 执行 后 再 调用 


clearTimeout () 没 有 效果 。 























注意 ”所 有 超时 执行 的 代码 (函数 ) 都 会 在 全 局 作用 域 中 的 一 个 匿名 函数 中 运行 ， 因 此 函 
数 中 的 this 值 在 非 严格 模式 下 始终 指向 windqow， 而 在 严格 模式 下 是 undefined。 如 果 


给 setTimeout () 提 供 了 一 个 箭头 函数 ,那么 this 会 保留 为 定义 它 时 所 在 的 词汇 作用 域 。 














setInterval() 与 setTimeout () 的 使 用 方法 类 似 ， 只 不 过 指定 的 任务 会 每 隔 指定 时 间 就 执行 一 
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次 ， 直 到 取消 循环 定时 或 者 页 面 邱 载 。setInterval () 同样 可 以 接收 两 个 参数 : 要 执行 的 代码 (字符 
串 或 函数 )， 以 及 把 下 一 次 执行 定时 代码 的 任务 添加 到 队列 要 等 待 的 时 间 ( 毫秒 )。 下 面 是 一 个 例子 : 


SetInterval(() => alert ("Hello world!"), 10000); 














注意 这 里 的 关键 点 是 ,第 二 个 参数 ， 也 就 是 间隔 时 间 ， 指 的 是 向 队列 添加 新 任务 之 前 等 
待 的 时 间 。 比 如 ， 调 用 setInterval() 的 时 间 为 01:00:00, 间隔 时 间 为 3000 毫秒 。 这 意 
味 着 01:00:03 时 ， 浏 览 器 会 把 任务 添加 到 执行 队列 。 浏 览 器 不 关心 这 个 任务 什么 时 候 执行 


或 者 执行 要 花 多 长 时 间 。 因 此 ， 到 了 01:00:06， 它 会 再 向 队列 中 添加 一 个 任务 。 由 此 可 看 
出 ， 执 行 时 间 短 、 非 阻塞 的 回调 函数 比较 适合 set Interval ()。 





setInterval () 方 法 也 会 返回 一 个 循环 定时 ID ， 可 以 用 于 在 未 来 某 个 时 间 点 上 取消 循环 定时 。 要 
取消 循环 定时 ,可 以 调用 clearInterval () 并 传人 定时 ID。 相 对 于 setTimeout () 而 言 , 取消 定时 的 
能 力 对 set Interval () 更 加 重要 。 毕 竟 ， 如 果 一 直 不 管 它 ， 那 么 定时 任务 会 一 直 执 行 到 页 面 秃 载 。 下 
面 是 一 个 常见 的 例子 : 
































let num = 0，intervalId = null; 

let max = 10; 

let incrementNumber = function() { 
nuUum++; 


// 如 果 达 到 最 大 值 ， 则 取消 所 有 未 执行 的 任务 
if (num == max) { 
clearIinterval (intervallId); 
alert ("Done"); 
} 
} 


intervalId = setInterval (incrementNumber, 500); 
在 这 个 例子 中 , 变量 num 会 每 半 秒 递增 一 次 ,直至 达到 最 大 限制 值 。 此 时 循环 定时 会 被 取消 。 这 个 
模式 也 可 以 使 用 setTimeout () 来 实现 ， 比 如 : 








let num = 0; 

let max = 10; 

let incrementNumber = function() { 
NUmtt? 


// 如 果 还 没有 达到 最 大 值 ， 再 设置 一 个 超时 任务 
if (num < max) { 
setTimeout (incrementNumber, 500); 


} else { 
alert ("Done"); 2 
} 


} 

setTimeout (incrementNumber, 500); 

注意 在 使 用 setTimeout () 时 ,不 一 定 要 记录 超时 ID ， 因 为 它 会 在 条 件 满足 时 自动 停止 ， 和 否则 会 
自动 设置 另 一 个 超时 任务 。 这 个 模式 是 设置 循环 任务 的 推荐 做 法 。setIntervale () 在 实践 中 很 少 会 在 
生产 环境 下 使 用 , 因为 一 个 任务 结束 和 下 一 个 任务 开始 之 间 的 时 间 间 隔 是 无 法 保证 的 ,有 些 循环 定时 任 
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务 可 能 会 因此 而 被 跳 过 。 而 像 前 面 这 个 例子 中 一 样 使 用 setTimeout () 则 能 确保 不 会 出 现 这 种 情况 。 一 
般 来 说 ,最 好 不 要 使 用 setInterval ()。 


12.1.8 ”系统 对 话 框 


使 用 alert ()、confirm() 和 prompt () 方 法 , 可 以 让 浏览 器 调用 系统 对 话 框 向 用 户 显 示 消 息 。 这 
些 对 话 框 与 浏览 器 中 显示 的 网 页 无 关 ， 而且 也 不 包含 HTML。 它 们 的 外 观 由 操作 系统 或 者 浏览 器 决定 ， 
无 法 使 用 CSS 设置 。 此 外 , 这 些 对 话 框 都 是 同步 的 模 态 对 话 框 , 即 在 它们 显示 的 时 候 , 代码 会 停止 执行 ， 
在 它们 消失 以 后 ， 代 码 才 会 恢复 执行 。 

alert () 方 法 在 本 书 示例 中 经 常用 到 。 它 接收 一 个 要 显示 给 用 户 的 字符 串 。 与 console.1og 可 以 
接收 任意 数量 的 参数 上 且 能 一 次 性 打印 这 些 参 数 不 同 ,alert () 只 接收 一 个 参数 。 调 用 alert () 时 , 传人 
的 字符 串 会 显示 在 一 个 系统 对 话 框 中 。 对 话 框 只 有 一 个 “OK”( 确定 ) 按钮 。 如 果 传 给 alert ( ) 的 参数 
不 是 一 个 原始 字符 串 ， 则 会 调用 这 个 值 的 tostring () 方 法 将 其 转换 为 字符 串 。 

警告 框 (alert ) 通常 用 于 向 用 户 显 示 一 些 他 们 无 法 控制 的 消息 ， 比 如 报错 。 用 户 唯一 的 选择 就 是 在 
看 到 警告 框 之 后 把 它 关 闭 。 图 12-1 展示 了 一 个 警告 框 。 












































































































































WWW.WIOX.COm says 


Hello world 





图 12-1 
第 二 种 对 话 框 叫 确认 框 ， 通 过 调用 confirnm() 来 显示 。 确 认 框 跟 警 告 框 类 似 ， 都 会 向 用 户 显示 消 
息 。 但 不 同 之 处 在 于 , 确认 框 有 两 个 按钮 :“Cancel”( 取消 ) 和 “OK”( 确定 )。 用 户 通 过 单 击 不 同 的 按 
钮 表明 希望 接 下 来 执行 什么 操作 。 比 如 ，confirm("Are you sure?") 会 显示 图 12-2 所 示 的 确认 框 。 





































































































WWW.WIOX.COM says 


Are you sure? 


El| ee 





图 12-2 


要 知道 用 户 单 击 了 OK 按钮 还 是 Cancel 按钮 ,可 以 判断 confirm() 方 法 的 返回 值 : true 表示 单 击 
了 OK 按钮，false 表示 单 击 了 Cancel 按钮 或 者 通过 单 击 某 一 角 上 的 X 图 标 关 闭 了 确认 框 。 确 认 框 的 
典型 用 法 如 下 所 示 : 


if (confirm("Are you sure?")) { 
alert("I'm so glad you're sure!"); 
} else { 
alert ("I'm sorry to hear you're not sure."); 











肌 























} 
在 这 个 例子 中 , 第 一 行 代码 向 用 户 显 示 了 确认 框 , 也 就 是 if 语句 的 条 件 。 如 果 用 户 单 击 了 OK 按钮 ， 
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则 会 弹出 警告 框 显示 "I'm so glad you're sure!"。 如 果 单 击 了 Cancel， 则 会 显示 "I'm sorry to 
hear you're not sure."。 确认 框 通常 用 于 让 用 户 确 认 执 行 某 个 操作 ， 比 如 删除 邮件 等 。 因 为 这 种 
对 话 框 会 完全 打 断 正在 浏览 网 页 的 用 户 ， 所 以 应 该 在 必要 时 再 使 用 。 

最 后 一 种 对 话 框 是 提示 框 ， 通 过 调用 prompt () 方 法 来 显示 。 提 示 框 的 用 途 是 提示 用 户 输入 消息 。 
除了 OK 和 Cancel 按钮 ,提示 框 还 会 显示 一 个 文本 框 , 让 用 户 输入 内 容 。prompt () 方 法 接收 两 个 参数 : 
要 显示 给 用 户 的 文本 , 以 及 文本 框 的 默认 值 ( 可 以 是 空 字符 串 ), 调用 prompt ("What is your name?"， 
"Jake") 会 显示 图 12-3 所 示 的 提示 框 。 





















































WWW.WIrOX.CoM says 


What is your name? 





Jake| | 


EE Ca 











图 12-3 


如 果 用 户 单 击 了 OK 按钮 ， 则 prompt () 会 返回 文本 框 中 的 值 。 如 果 用 户 单 击 了 Cancel 按钮 , 或 者 
对 话 框 被 关闭 ， 则 prompt () 会 返回 nul1。 下 面 是 一 个 例子 : 


let result = prompt ("What is your name? ", ""); 
if (result !== null) { 
alert ("Welcome, " + result); 











} 

这 些 系统 对 话 框 可 以 向 用 户 显 示 消 息 、 确 认 操 作 和 获取 输入 。 由 于 不 需要 HTML 和 CSS， 所 以 系 
统 对 话 框 是 Web 应 用 程序 最 简单 快捷 的 沟通 手段 。 

很 多 浏览 器 针对 这 些 系统 对 话 框 添加 了 特殊 功能 。 如 果 网 页 中 的 脚本 生成 了 两 个 或 更 多 系统 对 话 
框 ， 则 除 第 一 个 之 外 所 有 后 续 的 对 话 框 上 都 会 显示 一 个 复 选 框 ， 如 果 用 户 选中 则 会 禁用 后 续 的 弹 框 ， 直 
到 页 面 刷新 。 

如 果 用 户 选 中 了 复 选 框 并 关闭 了 对 话 框 ， 在 页 面 刷 新 之 前 ， 所 有 系统 对 话 框 ( 警告 杠 、 确 认 框 、 
示 框 ) 都 会 被 屏蔽 。 开 发 者 无 法 获悉 这 些 对 话 框 是 否 显示 了 。 对 话 框 计数 器 会 在 浏览 ea 
此 如 果 两 次 独立 的 用 户 操作 分 别 产生 了 两 个 警告 框 ， 则 两 个 警告 框 上 都 不 会 显示 屏蔽 复 选 框 。 如 果 一 次 
独立 的 用 户 操作 连续 产生 了 两 个 警告 框 ， 则 第 二 个 警告 框 会 显示 复 选 框 。 

JavaScript 还 可 以 显示 另外 两 种 对 话 框 : finda() 和 print()。 这 两 种 对 话 框 都 是 异步 显示 的 ， 即 控 
制 权 会 立即 返回 给 脚本 。 用 户 在 浏览 器 菜单 上 选择 “查找 ”(find ) 和 “打印 ”( print ) 时 显示 的 就 是 这 
两 种 对 话 框 。 通 过 在 window 对 象 上 调用 find() 和 print() 可 以 显示 它们 ， 比 如 : 

te 2 


window.print (); 
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和 男 滞 



































































































































// 显示 查找 对 话 框 

window.find(); 

这 两 个 方法 不 会 返回 任何 有 关 用 户 在 对 话 框 中 执行 了 什么 操作 的 信息 ， 因 此 很 难 加 以 利用 。 此 外 ， 
因为 这 两 种 对 话 框 是 异步 的 , 所 以 浏览 器 的 对 话 框 计数 器 不 会 涉及 它们 ,而 且 用 户 选择 禁用 对 话 框 对 它 
们 也 没有 影响 。 
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12.2 location 对 象 
































location 是 最 有 用 的 BOM 对 象 之 











， 提 供 了 当前 窗口 


:加载 文档 的 信息 ， 以 及 通常 的 导航 功能 。 

















这 个 对 象 独 特 的 地 方 在 于 ， 它 既是 window 的 属性 ， 也 是 document 的 属性 。 也 就 是 说 ， 
window.1location 和 document .1location 指向 同一 个 对 象 。1location 对 象 不 仅 保存 着 当前 加 载 文 
档 的 信息 ， 也 保存 着 把 URL 解析 为 离散 片段 后 能 够 通过 属性 访问 的 信息 。 这 些 解析 后 的 属性 在 下 表 中 





有 详细 说 明 ( location 前 级 是 必需 的 )。 




















假设 浏览 器 当前 加 载 的 URL 是 http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q= 
javascript#contents，location 对 象 的 内 容 如 下 表 所 示 。 




































































属 性 值 说 明 
location.hash "#contents" URL 散 列 值 ( 井 号 后 跟 零 或 多 个 字符 ), 如 果 没 有 则 
为 空 字符 串 
location.host "WWW.WIrOX.com:80" 服务 器 名 及 端口 号 
location.hostname "Wwww.wrox.com" 服务 器 名 
location.href "http://www.wrox.com:80/WileyCDA/ 当前 加 载 页 面 的 完整 URL。,1ocation 的 tostring () 
?dq=javascript#contents" 方法 返回 这 个 值 
location.pathname "/WileyCDA/" URL 中 的 路 径 和 (或 ) 文件 名 
location.port 0180" 请 求 的 端口 。 如 果 URL 中 没有 端口 ， 则 返回 空 字 符 串 
location.protocol "nttp:" 页 面 使 用 的 协议 。 通 常 是 "http:" 或 "https:" 


location.search "?gq=javascript" 


location.username "foouser" 


location.password "barpassword" 





location.origin "http://www.wrox.com" 


12.2.1 查询 字符 串 











location 的 多 数 信 息 都 可 以 通过 上 面 的 属 怕 






































这 个 字符 串 以 问号 开头 





URL 的 查询 字符 串 。 
域名 前 指定 的 用 户 名 
成 名 前 指定 的 密码 

URL 的 源 地 址 。 只 读 














E 获 取 。 但 是 URL 中 的 查询 字符 串 并 不 容易 使 用 。 虽然 








location.search 返回 了 从 问号 开始 直到 URL 末尾 的 所 有 内 容 ， 但 没有 办 法 逐个 访问 每 个 查询 参数 。 
下 面 的 函数 解析 了 查询 字符 串 ， 并 返回 一 个 以 每 个 查询 参数 为 属性 的 对 象 : 








let getQueryStringArgs = function() 
// 取得 没有 开头 问号 的 查询 字符 串 








let qs = (location.search.length > 0 ? location.search.substring(1) : ""), 


// 保存 数据 的 对 象 


args = {}; 


// 把 每 个 参数 添加 到 args 对 象 


for (let item of qs.split("&") .map(kv => kv.split("="))) { 
let name = decodeURIComponent (item[0]), 
value = decodeURIComponent (item[1]); 


if (name.length) { 
args[name] = value; 
} 
} 
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return args; 


} 

这 个 函数 首先 删除 了 查询 字符 串 开 头 的 问号 ， 当 然 前 提 是 location.search 必须 有 内 容 。 解析 后 
的 参数 将 被 保存 到 args 对 象 ， 这 个 对 象 以 字面 量 形式 创建 。 接 着 ， 先 把 查询 字符 串 按 照 & 分 割 成 数组 ， 
每 个 元 素 的 形式 为 name=value。for 循环 迭代 这 个 数组 ， 将 每 一 个 元 素 按 照 = 分 割 成 数组 ， 这 个 数组 
第 一 项 是 参数 名 ， 第 二 项 是 参数 值 。 人 参数 名 和 参数 值 在 使 用 decodeURIComponent () 解码 后 〈 这 是 因为 
查询 字符 串通 常 是 被 编码 后 的 格式 ) 分 别 保存 在 name 和 value 变量 中 。 最 后 ，name 作为 属性 而 value 
作为 该 属性 的 值 被 添加 到 args 对 象 。 这 个 函数 可 以 像 下 面 这 样 使 用 : 


// 假设 查询 字符 串 为 2q=javascript&num=10 

































































let args = getQueryStringArgs (); 















































alert (args["q"]); // "javascript" 

alert(args["num"]); // "10" 

现在 ， 查 询 字 符 串 中 的 每 个 参数 都 是 返回 对 象 的 一 个 属性 ， 这 样 使 用 起 来 就 方便 了 。 
URLSearchParams 

URLSearchParams 提供 了 一 组 标准 API 方法 ,通过 它们 可 以 检查 和 修改 查询 字符 串 。 给 


URLSearchParams 构造 函数 传人 一 个 查询 字符 串 ， 就 可 以 创建 一 个 实例 。 这 个 实例 上 暴露 了 get ()、 
set() 和 delete () 等 方法 ， 可 以 对 查询 字符 串 执行 相应 操作 。 下 面 来 看 一 个 例子 : 


let qs = "?q=javascript&num=10"; 





let searchParams = new URLSearchParams (qs); 


alert (searchParams.toString()); // " q=javascript&num=10" 
searchParams.has ("num"); // true 

searchParams .get ("num"); // 10 

searchParams.set ("page", "3"); 

alert (searchParams.toString()); // " qdq=javascript&num=10&page=3" 


searchParams .delete("q"); 














alert (searchParams.toString()); // " num=10&page=3" 
大 多 数 支持 URLSearchParams 的 浏览 器 也 支持 将 URLSearchParams 的 实例 用 作 可 迭代 对 象 : 
let qs = "?q=javascript&num=10"; 


let searchParams = new URLSearchParams (qs); 


for (let param of searchpParams) { 
console.log (param); 





// ["q", "javascript"] 
// | | 


12.2.2 ”操作 地 址 


可 以 通过 修改 1ocation 对 象 修改 浏览 费 的 地 址 。 首 先 ， 最 常见 的 是 使 用 assign () 方 法 并 传人 一 
个 URL， 如 下 所 示 : 


location.assign ("http://www.wrox.com"); 
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这 行 代码 会 立即 启动 导航 到 新 URL 的 操作 ， 同 时 在 浏览 器 历史 记录 中 增加 一 条 记录 。 如 果 给 


location.href 或 windqow.location 设置 一 个 URL, 也 会 以 同一 个 URL 值 调用 assign () 方 法 。 比 
如 ， 下 面 两 行 代码 都 会 执行 与 显 式 调用 assign () 一 样 的 操作 : 








window.location = "http://www.wrox.com"; 
location.href = "http://www.wrox.com"; 


在 这 3 种 修改 浏览 器 地 址 的 方法 中 ,设置 location.href 是 最 常见 的 。 
修改 1ocation 对 象 的 属性 也 会 修改 当前 加 载 的 页 面 。 其 中 , hash、search、 hostname、 pathname 


FE 











和 port 属性 被 设置 为 新 值 之 后 都 会 修改 当前 URL， 如 下 面 的 例子 所 示 : 





// 假设 当前 URL 为 http://www.wrox.com/WileyCDA/ 


// 把 URL 修改 为 http://www.wrox.com/WileyCDA/#sectionl 
location.hash = "#sectionl",; 


// 把 URL 修改 为 http://www.wrox.com/WileyCDA/?q=javascript 
location.search = "?gq=javascript"; 


// 把 URL 修改 为 http://www.somewhere.com/WileyCDA/ 
location.hostname = "Wwww.somewhere.com"; 


// 把 URL 修改 为 http://www.somewhere.com/mydir/ 
location.pathname = "mydir"; 























// 把 URL 修改 为 http://www.somewhere.com:8080/WileyCDA/ 
location.port = 8080; 


除了 hash 之 外 ， 只 要 修改 1ocation 的 一 个 属性 ， 就 会 导致 页 面 重新 加 载 新 URL。 











注意 ”修改 hash 的 值 会 在 浏览 器 历史 中 增加 一 条 新 记录 。 在 早期 的 了 理 中 ， 点击“ 后 退 ” 


和 “前 进 ” 按 钮 不 会 更 新 hash 属性 ， 只 有 点 击 包含 散 列 的 URL 才 会 更 新 hash 的 值 。 





在 以 前 面 提 到 的 方式 修改 URL 之 后 ,浏览 器 历史 记录 中 就 会 增加 相应 的 记录 。 当 用 户 单 击 “后 退 ” 














按钮 时 ， 就 会 导航 到 前 一 个 页 面 。 如 果 不 希望 增加 历史 记录 ， 可 以 使 用 *eplace () 方 法 。 这 个 方法 接 
收 一 个 URL 参数 ， 但 重新 加 载 后 不 会 增加 历史 记录 。 调 用 *eplace () 之后, 用户 不 能 回 到 前 一 页 。 比 
如 下 面 的 例子 : 


返回 这 个 



































<!DOCTYPE html> 
<html> 
<head> 
<title>You won't be able to get back here</title> 
</head> 
<body> 
<p>Enjoy this page for a second, because you won't be coming back here.</p> 
<script> 
SetTimeout (() => location.replace("http://ww.wrox.com/"), 1000); 
</script> 
</body> 
</html> 


浏览 器 加 载 这 个 页 面 1 秒 之 后 会 重 定向 到 www.wrox.com。 此 时 ,“ 后 退 ” 按 钮 是 禁用 状态 ， 即 不 能 
示例 页 面 ， 除 非 手 动 输入 完整 的 URL。 
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最 后 一 个 修改 地 址 的 方法 是 reload () ， 它 能 重新 加 载 当 前 显示 的 页 面 。 调 用 reload () 而 不 传 参 
数 ， 页 面 会 以 最 有 效 的 方式 重新 加 载 。 也 就 是 说 ， 如 果 页 面 自 上 次 请 求 以 来 没有 修改 过 ,浏览 器 可 能 会 
从 缓存 中 加 载 页 面 。 如 果 想 强制 从 服务 器 重新 加 载 ， 可 以 像 下 面 这 样 给 reload () 传 个 true: 


location.reload(); // 重新 加 载 ， 可 能 是 从 缓存 加 载 
location.reload(true); // 重新 加 载 ， 从 服务 器 加 载 


脚本 中 位 于 reload() 调 用 之 后 的 代码 可 能 执行 也 可 能 不 执行 ,这 取决 于 网 络 延迟 和 系统 资源 等 因 
素 。 为 此 ， 最 好 把 reloag () 作为 最 后 一 行 代码 。 
























































上 本 
全 





12.3 ”navigator 对 象 


navigator 是 由 Netscape Navigator 2 最 早 引 入 浏览 器 的 ， 现 在 已 经 成 为 客户 端 标识 浏览 器 的 标准 。 
只 要 浏览 器 启用 JavaScript，navigator 对 象 就 一 定 存 在 。 但 是 与 其 他 BOM 对 象 一 样 ， 每 个 浏览 器 都 
支持 自己 的 属性 。 








注意 navigator 对 象 中 关于 系统 能 力 的 属性 将 在 第 13 章 详细 介绍 。 





navigator 对 象 实现 了 NavigatorID 、NavigatorLanguage 、NavigatorOnLine 、 
NavigatorContentUtils 、 NavigatorStorage 、 NavigatorStorageUtils 、 Navigator- 
ConcurrentHardware、NavigatorPlugins 和 NavigatorUserMedia 接口 定义 的 属性 和 方法 。 

下 表 列 出 了 这 些 接口 定义 的 属性 和 方法 : 










































































属性 /方法 说 明 
activeVrDisplays 返回 数组 ， 包 含 ispresenting 属性 为 true 的 VRDisplay 实例 
appCodeName 即使 在 非 Mozilla 浏 览 器 中 也 会 返回 "Mozilla" 
appName 浏览 器 全 名 
appVersion 浏览 器 版 本 。 通 常 与 实际 的 浏览 器 版 本 不 一 致 
battery 返回 暴露 Battery Status API 的 BatteryManager 对 象 
buildId 浏览 器 的 构建 编号 
connection 返回 暴露 Network Information API 的 NetworkInformation 对 象 
cookieEnabled 返回 布尔 值 ， 表 示 是 否 启用 了 cookie 
credentials 返回 暴露 Credentials Management API 的 CredentialsContainer 对 象 
deviceMemory 返回 单位 为 GB 的 设备 内 存 容量 
doNot Track 返回 用 户 的 “不 跟踪 ”( do-not-track ) 设置 
geolocation 返回 暴露 Geolocation API 的 Geolocation 对 象 
getVRDisplays () 返回 数组 ， 包 含 可 用 的 每 个 VRDisplay 实例 
getUserMedia () 返回 与 可 用 媒体 设备 硬件 关联 的 流 
hardwareConcurrency 返回 设备 的 处 理 器 核心 数量 
javaEnabled 返回 布尔 值 ， 表 示 浏 览 右 是 否 启用 了 Java 
language 返回 浏览 器 的 主语 言 





languages 返回 浏览 器 偏好 的 语言 数组 
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( 续 ) 
属性 方法 说 明 
locks 回 暴 露 Web Locks API 的 LockManager 对 象 
mediaCapabilities 回 暴 露 Media Capabilities API 的 MediaCapabilities 对 象 
mediaDevices 回 可 用 的 媒体 设备 
maxTouchPoints 回 设备 触摸 屏 支 持 的 最 大 触 点 数 
mimeTypes 回 浏览 器 中 注册 的 MIME 类 型 数组 
onLine 回 布尔 值 ， 表 示 浏 览 器 是 否 联网 
oscpu 回 浏览 器 运行 设备 的 操作 系统 和 (或) CPU 
permissions 回 暴露 Permissions API 的 Permissions 对 象 
platform 回 浏览 器 运行 的 系统 平台 
plugins 回 浏览 器 安 装 的 插件 数组 。 在 下 中， 这 个 数组 包含 页 面 中 所 有 <embed> 元 素 
product 回 产品 名 称 ( 通常 是 "Gecko" ) 
productSub 回 产品 的 额外 信息 (通常 是 Gecko 的 版 本 ) 





一 个 网 站 注 


registerProtocolHandler () 



















































































E 册 为 特定 协议 的 处 型 


LE 程序 





requestMediaKeySystemAccess () 回 一 个 期 约 ， 解 决 为 MediaKeySystemAccess 对 象 
sendBeacon () 步 传输 一 些小 数据 
serviceWorker 回 用 来 与 Serviceworker 实例 交互 的 ServiceWorkerContainer 
share () 回 当前 平台 的 原生 共享 机 制 
storage 可 暴露 Storage API 的 StorageManager 对 象 
userAgent 回 济 览 器 的 户 代理 可 符 串 
vendor 回 浏览 器 的 厂商 名 称 
vendorSub 回 浏览 器 厂商 的 更 多 信息 
vibrate() 发 设备 振动 
webdriver 返回 浏览 器 当前 是 否 被 自动 化 程序 控制 
navigator 对 象 的 属性 通常 用 于 确定 浏览 器 的 类 型 。 
12.3.1 检测 插件 








检测 浏览 器 是 否 安装 了 某 个 插件 是 开 
过 plugins 数组 来 确定 。 这 个 数组 中 的 每 一 项 都 包含 如 
口 name: 插件 名 称 。 






























































口 description: 插件 介绍 

口 filename: 插件 的 文件 名 。 

口 length: 由 当前 插件 处 理 的 MIME 类 型 数量 。 

通常 ，name 属性 包含 识别 插件 所 需 的 必要 信息 ， 
可 用 的 插件 ， 并 逐个 比较 插件 的 名 称 ， 如 下 所 示 : 

// 插件 检测 ，IE10 及 更 低 版 本 无 效 


let hasPlugin function (name) 
name = name.toLowerCase(); 


{ 


尽管 不 是 特别 准确 。 


发 中 常见 的 需求 。 除 下 10 及 更 低 版 本 外 的 浏览 器 ， 都 可 以 通 





下 属性 


[e) 

















检测 插件 就 是 遍历 浏览 
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for (let plugin of window.navigator.plugins) 
if (plugin.name.toLowerCase().indexOf (name 
return true; 
} 
} 


{ 
) 人 全 和 


return false; 


} 


// 检测 Flash 
alert (hasPlugin ("Flash")); 


// 检测 QuickTime 
alert (hasPlugin ("QuickTime")); 


这 个 hasPlugin() 方 法 接收 一 个 参数 ， 即 待 检测 插件 的 名 称 。 第 一 步 是 把 
式 ， 以 便于 比较 。 然 后 ， 遍 历 plugins 数组 ， 通 过 inqexof () 方 法 检测 每 个 n 
称 是 不 是 存在 于 某 个 数组 中 。 比 较 的 字符 串 全 部 小 写 ， 可 以 避免 大 小 写 问题 。 传 









































插件 名 称 转换 为 小 写 
ame 属性 ， 看 传人 的 名 
和 人 的 参数 应 该 尽 可 能 独 





NS 











I, 以 避免 混淆 。 像 "Flash"、 "ouickTime" 这 样 的 字符 串 就 可 以 避免 混淆 。 这 个 方法 可 以 在 








Firefox 、Safari 、Opera 和 Chrome 中 检测 插件 。 


注意 plugins 数组 中 的 每 个 插件 对 象 还 有 一 个 MimeType 对 象 ， 可 以 通过 中 括号 访问 。 
每 个 MimeType 对 象 有 4 个 属性 : description 描述 MIME 类 型 ，ena 


指向 插件 对 象 的 指针 ,suffixes 是 该 MIME 类 型 对 应 扩展 名 的 过 号 分 隔 
是 完整 的 MIME 类 型 字符 串 。 


bledqPlugin 是 
的 字符 串 ,， type 














IE11 的 window.navigator 对 象 开 始 支持 plugins 和 mimeTypes 属性 。 











这 意味 着 前 面 定义 的 函 











数 可 以 适用 于 所 有 较 新 版 本 的 浏览 器 。 而 且 ，IE11 中 的 ActiveXobject 也 从 DOM 中 隐身 了 ,意味 着 








不 能 再 用 它 来 作为 检测 特性 的 手段 。 


旧版 本 IE 中 的 插件 检测 
IE10 及 更 低 版 本 中 检测 插件 的 问题 比较 多 ， 因 为 这 些 浏 览 器 不 支持 Netscap 





e 式 的 插件 。 在 这 些 下 








中 检测 插件 要 使 用 专 有 的 ActiveXobject， 并 尝试 实例 化 特定 的 插件 。IE 中 的 扣 

















的 ， 由 唯一 的 字符 串 标识 。 因 此 ， 要 检测 某 个 插件 就 必须 知道 其 COM 标识 符 。 例 如 ，Flash 的 标识 符 是 











"ShockwaveFlash.ShockwaveFlash"。 知 道 了 这 个 信息 后 ,就 可 以 像 这 样 检测 
// 在 旧版 本 IE 中 检测 插件 


function hasIEPlugin (name) { 
try { 
new ActivexObject (name); 
return true; 
} catch (ex) { 
return false; 
} 
} 


// 检测 Flash 
alert (hasIEPlugin ("ShockwaveFlash.ShockwaveFlash")); 


// 检测 QuickTime 
alert (hasIEPlugin ("QuickTime.QuickTime")); 


件 是 实现 为 COM 对 象 





IE 中 是 否 安装 了 Flash: 
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在 这 个 例子 中 , hasIEPlugin() 国 数 接收 一 个 DOM 标识 符 参 数 。 为 检测 插件 ,这 个 函数 会 使 用 传 
入 的 标识 符 创建 一 个 新 Activexobject 实例 。 相 应 代码 封装 在 一 个 try/catch 让 因此 如 果 创 
建 的 插件 不 存在 则 会 抛 出 错误 。 如 果 创 建成 功 则 返回 true， 如 果 失 败 则 在 catch 块 中 返回 false。 上 
面 的 例子 还 演示 了 如 何 检测 Flash 和 QuickTime 插件 。 

因为 检测 插件 涉及 两 种 方式 ， 所 以 一 般 要 针对 特定 插件 写 一 个 限 数 ， 而 不 是 使 用 通常 的 检测 函数 。 
比如 下 面 的 例子 : 

// 在 所 有 浏览 器 中 检测 Flash 

function hasFlash() { 

Var result = hasPlugin("Flash"); 


if (!result)t 

result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");} 
} 
return result; 


} 




























































































// 在 所 有 浏览 器 中 检测 QuickTime 
function hasQuickTime() { 
Var result = hasPlugin("QuickTime"); 
if (!result)t 
result = hasIEPlugin("QuickTime.QuickTime"); 
} 
return result; 


} 


// 检测 Flash 
alert (hasFlash()); 


// 检测 QuickTime 
alert (hasQuickTime()); 


以 上 代码 定义 了 两 个 函数 hasFlash() 和 hasouickTime () 。 每 个 函数 都 先 尝试 使 用 非 IE 插件 检 
测 方式 ， 如 果 返 回 false (对 下 可 能 会 )， 则 再 使 用 正 插件 检测 方 式 。 如 果 正 插件 检测 方式 再 返回 false， 
整个 检测 方法 也 返回 false。 只 要 有 一 种 方式 返回 true， 检 测 方法 就 会 返回 true。 












































注意 plugins 有 一 个 refresh() 方 法 ， 用 于 刷新 plugins 属性 以 反映 新 安装 的 插件 。 
这 个 方法 接收 一 个 布尔 值 参数 ， 表 示 刷 新 时 是 否 重 新 加 载 页 面 。 如 果 传 入 true， 则 所 有 


包含 插件 的 页 面 都 会 重新 加 载 。 否 则 ， 只 有 plugins 会 更 新 ， 但 页 面 不 会 重新 加 载 。 





12.3.2 ”注册 处 理 程 序 


现代 浏览 器 支持 navigator 上 的 (在 HTML5 中 定义 的 ) registerProtocolHandler () 方 法 。 
这 个 方法 可 以 把 一 个 网 站 注册 为 处 理 某 种 特定 类 型 信息 应 用 程序 。 随 着 在 线 RSS 阅读 器 和 电子 邮件 客户 
端的 流行 ， 可 以 借助 这 个 方法 将 Web 应 用 程序 注册 为 像 桌面 软件 一 样 的 默认 应 用 程序 。 

要 使 用 registerProtocolHandler () 方 法 ,必须 传人 3 个 参数 : 要 处 理 的 协议 (如 "mailto" 或 
"ftp" )、 处 理 该 协议 的 URL， 以 及 应 用 名 称 。 比 如 ， 要 把 一 个 Web 应 用 程序 注册 为 默认 邮件 客户 端 ， 
可 以 这 样 做 : 
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navigator.registerProtocolHandler ("mailto", 
"http://www.somemailclient.com?cmd=%s", 
"Some Mail Client"); 


这 个 例子 为 "mailto" 协 议 注册 了 一 个 处 理 程序 ， 这样 邮件 地 址 就 可 以 通过 指定 的 Web 应 用 程序 打 
开 。 注 意 ， 第 二 个 参数 是 负责 处 理 请 求 的 URL，%s 表示 原始 的 请 求 。 


12.4 screen 对 象 
window 的 男 一 个 属性 screen 对 象 , 是 为 数 不 多 的 几 个 在 编程 中 很 少 用 的 JavaScript 对 象 。 这 个 对 


象 中 保存 的 纯粹 是 客户 端 能 力 信息 ,也 就 是 浏览 器 窗口 外 面 的 客户 端 显示 器 的 信息 ， 比 如 像素 宽度 和 像 
素 高 度 。 每 个 浏览 器 都 会 在 screen 对 象 上 暴露 不 同 的 属性 。 下 表 总 结 了 这 些 属性 。 





































































































































































































属 性 说 明 
availHeight 屏幕 像素 高 度 减 去 系统 组 件 高 度 ( 只 读 ) 
availLeft 没有 被 系统 组 件 占 用 的 屏幕 的 最 左 侧 像素 ( 只 读 ) 
availTop 没有 被 系统 组 件 占 用 的 屏幕 的 最 顶端 像素 〈 只 读 ) 
availWidth 异 幕 像素 宽度 减 去 系统 组 件 宽度 ( 只 读 ) 
colorDepth 表示 屏幕 颜色 的 位 数 ; 多数 系统 是 32 ( 只 读 ) 
height 屏幕 像素 高 度 
left 当前 屏幕 左边 的 像素 距离 
pixelDepth 屏幕 的 位 深 ( 只 读 ) 
top 当前 屏幕 项 端的 像素 距离 
width 屏幕 像素 宽度 
orientation 返回 Screen Orientation API 中 屏幕 的 朝向 

















12.5 history 对 象 


history 对 象 表示 当前 窗口 首次 使 用 以 来 用 户 的 导航 历史 记录 。 因 为 history 是 window 的 属性 ， 
所 以 每 个 window 都 有 自己 的 history 对 象 。 出 于 安全 考虑 ， 这 个 对 象 不 会 暴露 用 户 访问 过 的 URL， 
但 可 以 通过 它 在 不 知道 实际 URL 的 情况 下 前 进 和 后 退 。 


12.5.1 导航 


go () 方 法 可 以 在 用 户 历史 记录 中 沿 任何 方向 导航 ,可 以 前 进 也 可 以 后 退 。 这 个 方法 只 接收 一 个 参数 ， 
这 个 参数 可 以 是 一 个 整数 , 表示 前 进 或 后 退 多 少 步 。 负 值 表示 在 历史 记录 中 后 退 ( 类 似 点 击 浏览 器 的 “后 
退 ” 按 钮 )， 而 正 值 表示 在 历史 记录 中 前 进 〈 类 似 点 击 浏览 器 的 “前 进 ” 按 钮 )。 下 面 来 看 儿 个 例子 : 


// 后 退 一 页 
history.go(-1); 














































































































// 前 进 一 页 
history.go(1); 


// 前 进 两 页 
history.go(2); 
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在 旧版 本 的 一 些 浏览 器 中 ，go () 方 法 的 参数 也 可 以 是 一 个 字 这 种 情况 下 浏览 融会 导航 到 历 
史 中 包 含 该 字符 串 的 第 一 个 位 置 。 最 接近 的 位 置 可 能 涉及 后 退 , 也 可 能 涉及 前 进 。 如 果 历 史记 录 中 没有 
匹配 的 项 ， 则 这 个 方法 什么 也 不 做 ， 如 下 所 示 : 


// 导航 到 最 近 的 wrox.com 页 面 
history.go ("wrox.com"); 























// 导航 到 最 近 的 nczonline.net 页 面 
history.go("nczonline.net"); 


go () 有 两 个 简写 方法 : back () 和 forward() 。 顾 名 思 义 ， 这 两 个 方法 模拟 了 浏览 器 的 后 退 按钮 和 
前 进 按钮 : 


// 后 退 一 页 
history.back(); 








// 前 进 一 页 
history.forward(); 
history 对 象 还 有 一 个 length 属性 , 表示 历史 记录 中 有 多 个 条 目 。 这 个 属性 反映 了 历史 记录 的 数 
量 , 包括 可 以 前 进 和 后 退 的 页 面 。 对 于 窗口 或 标签 页 中 加 载 的 第 一 个 页 面 ，history .1length 等 于 1。 
通过 以 下 方法 测试 这 个 值 ， 可 以 确定 用 户 浏览 器 的 起 点 是 不 是 你 的 页 面 : 

if (history.length == 1)f{ 

// 这 是 用 户 窗口 中 的 第 一 个 页 面 

} 

history 对 象 通常 被 用 于 创建 “后 退 ” 和 和 “前进” 按钮 ， 以 及 确定 页 面 是 不 是 用 户 历 史记 录 中 的 第 
一 条 记录 。 




































































注意 ”如果 页 面 URL 发生 变化， 则 会 在 历史 记录 中 生成 一 个 新 条 目 。 对 于 2009 年 以 来 发 
布 的 主流 浏览 器 ， 这 包括 改变 URL 的 散 列 值 (因此 ， 把 location.hash 设置 为 一 个 新 


值 会 在 这 些 浏 览 器 的 历史 记录 中 增加 一 条 记录 )。 这 个 行为 常 被 单 页 应 用 程序 框架 用 来 模 
拟 前 进 和 后 退 ， 这 样 做 是 为 了 不 会 因 导 航 而 触发 页 面 刷新 。 





12.5.2 历史 状态 管 


现代 Web 应 用 程序 开发 中 最 难 的 环节 之 一 就 是 历史 记录 管理 。 用 户 每 次 点 击 都 会 触发 页 面 刷 新 的 
时 代 早 已 过 去 ,“ 后 退 ” 和 “前 进 ” 按 钮 对 用 户 来 说 就 代表 “ 帮 有 我 切换 一 个 状态 ”的 历史 也 就 随 之 结 
了 。 为 解决 这 个 问题 ， 首 先 出 现 的 是 hashchange 事件 (第 17 章 介 绍 事件 时 会 讨论 ) HTML5 也 为 
history 对 象 增加 了 方便 的 状态 管理 特性 。 

hashchange 会 在 页 面 URL 的 散 列 变化 时 被 触发 ， 开 发 者 可 以 在 此 时 执行 某 些 操作 。 而 状态 管理 
API 则 可 以 让 开发 者 改变 浏览 器 URL 而 不 会 加 载 新 页 面 。 为 此 ， 可 以 使 用 history.pushState () 方 
法 。 这 个 方法 接收 3 个 参数 : 一 个 state 对 象 、 一 个 新 状态 的 标题 和 一 个 〈 可 选 的 ) 相对 URL。 例如 : 


let stateObject = {foo: "bar"}; 



























































history.pushState(stateObject, "My title", "baz.html"); 


pushState() 方 法 执行 后 , 状态 信息 就 会 被 推 到 历 史记 录 中 , 浏览 喜 地 址 栏 也 会 改变 以 反映 新 的 相 
对 URL。 除了 这 些 变化 之 外 , 即使 1ocation.href 返回 的 是 地 址 栏 中 的 内 容 , 浏览 絮 页 不 会 癌 服务 器 
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发 送 请 求 。 第 二 个 参数 并 未 被 当前 实现 所 使 用 ,因此 既 可 以 传 一 个 空 字符 串 也 可 以 传 一 个 短 标 题 。 第 一 
个 参数 应 该 包含 正确 初始 化 页 面 状态 所 必需 的 信息 。 为 防止 滥用 ,这 个 状态 的 对 象 大 小 是 有 限制 的 , 通 
常 在 500KB ~ 1MB 以 内 。 

因为 pushstate() 会 创建 新 的 历史 记录 ， 所 以 也 会 相应 地 启用 “后 退 ” 按 钮 。 此 时 单 击 “ 后 退 ” 
按钮 ,就 会 触发 window 对 象 上 的 popstate 事件 。 popstate 事件 的 事件 对 象 有 一 个 state 属性 ,其 
中 包含 通过 pushstate () 第 一 个 参数 传人 的 state 对 象 : 


window.addEventListener("popstate", (event) => { 
let state = event.state; 
if (state) { // 第 一 个 页 面 加 载 时 状态 是 null 
processState(state); 
; 
二 


基于 这 个 状态 ， 应 该 把 页 面 重 置 为 状态 对 象 所 表示 的 状态 〈 因 为 浏览 器 不 会 自动 为 你 做 这 些 )。 记 
住 , 页 面 初次 加 载 时 没有 状态 。 因 此 点 击 “ 后 退 ” 按 钮 直到 返回 最 初 页 面 时 , event .state 会 为 null。 

可 以 通过 history.state 获取 当前 的 状态 对 象 ， 也 可 以 使 用 replaceState() 并 传人 与 
pushstate() 同 样 的 前 两 个 参数 来 更 新 状态 。 更 新 状态 不 会 创建 新 历史 记录 ， 只 会 覆盖 当前 状态 : 

history.replaceState({newFoo: "newBar"}, "New title"); 

传 给 pushstate() 和 replacestate() 的 state 对 象 应 该 只 包含 可 以 被 序列 化 的 信息 。 因 此 ， 
DOM 元 素 之 类 并 不 适合 放 到 状态 对 象 里 保存 。 


























































































































注意 使 用 HTMLS5 状态 管理 时 ， 要 确保 通过 pushState() 创 建 的 每 个 “ 假 ”URL 背后 
都 对 应 着 服务 器 上 一 个 真实 的 物理 URL。 否则 ， 单 击 “ 人 


单 页 应 用 程序 (SPA，Single Page Application ) 框架 都 必须 通过 服务 器 或 客户 端的 某 些 配 
置 解决 这 个 问题 。 





12.6 小结 


| 览 器 对 象 模型 ( BOM，Browser Object Model ) 是 以 window 对 象 为 基础 的 ， 这 个 对 象 代表 了 浏 
i 口 和 页 面 可 见 的 区 域 。wingow 对 象 也 被 复 用 为 ECMAScript 的 Global 对 象 ， 因 此 所 有 全 局 变 
量 和 也 数 都 是 它 的 属性 ， 而 且 所 有 原生 类 型 的 构造 函数 和 普通 函数 也 都 从 一 开始 就 存在 于 这 个 对 象 之 
-Es ee 了 BOM 的 以 下 内 容 。 

要 引用 其 他 wingovw 对 象 ， 可 以 使 用 几 个 不 同 的 窗口 指针 。 
口 人 location 对 象 可 以 以 编程 方式 操纵 浏览 器 的 导航 系统 。 通 过 设置 这 个 对 象 上 的 属性 ， 可 
以 改变 浏览 器 URL 中 的 某 一 部 分 或 全 部 。 
口 使 用 replace() 方 法 可 以 蔡 换 浏览 器 历史 记录 中 当前 显示 的 页 面 ， 并 导航 到 新 URL。 
口 navigator 对 象 提供 关于 浏览 器 的 信息 。 提 供 的 信息 类 型 取决 于 浏览 器 ， 不 过 有 些 属性 如 
userAgent 是 所 有 浏览 器 都 支持 的 。 

BOM 中 的 另外 两 个 对 象 也 提供 了 一 些 功能 。screen 对 象 中 保存 着 客户 端 显示 器 的 信息 。 这 些 信 息 
通常 用 于 评估 浏览 网 站 的 设备 信息 。history 对 象 提供 了 操纵 浏览 器 历史 记录 的 能 力 ， 开 发 者 可 以 确 
定 历史 记录 中 包含 多 少 个 条 目 ， 并 以 编程 方式 实现 在 历史 记录 中 导航 ， 而 且 也 可 以 修改 历史 记录 。 












































































































































”1]3s 
客户 问 检 测 


本 章 内 容 

口 使 用 能 力 检测 

口 用 户 代 理 检 测 的 历史 
口 软件 与 硬件 检测 

口 检测 策略 




















虽然 浏览 器 厂商 齐心 协力 想 要 实现 一 致 的 接口 ， 但 事实 上 仍然 是 每 家 浏览 器 都 有 自己 的 长 处 与 不 
足 。 路 平台 的 浏览 器 尽管 版 本 相同 ， 但 总 会 存在 不 同 的 问题 。 这 些 差异 迫使 Web 开发 者 要 么 面向 最 大 
公约 数 而 设计 ， 要 么 ( 更 常见 地 ) 使 用 各 种 方法 来 检测 客户 端 ， 以 克服 或 避免 这 些 缺 陷 。 

客户 端 检 测 一 直 是 Web 开发 中 饱 受 争 议 的 话题 ， 这 些 话 题 普 遍 围绕 所 有 浏览 器 应 支持 一 系列 公共 
特性 ， 理 想 情况 下 是 这 样 的 。 而 现实 当中 , 浏览 器 之 间 的 差异 和 莫名 其 妙 的 行为 ， 让 客户 端 检 测 变 成 一 
种 补救 措施 ， 而 且 也 成 为 了 开发 策略 的 重要 一 环 。 如 今 ， 浏 览 喜 之 间 的 差异 相对 IE 大 溃败 以 前 已 经 好 
很 多 了 ， 但 浏览 器 间 的 不 一 致 性 依旧 是 Web 开发 中 的 常见 主题 。 

要 检测 当前 的 浏览 器 有 很 多 方法 ,每 一 种 都 有 各 自 的 长 处 和 不 足 。 问 题 的 关键 在 于 知道 客户 端 检测 
应 该 是 解决 问题 的 最 后 一 个 举措 。 任 何 时 候 ， 只 要 有 更 普 适 的 方案 可 选 ， 都 应 该 毫 不 犹 殉 地 选择 。 首 先 
要 设计 最 常用 的 方案 ， 然 后 再 考虑 为 特定 的 浏览 器 进行 补救 。 


13.1 ”能力 检测 


能 力 检测 〈 又 称 特性 检测 ) 即 在 JavaScript 运行 时 中 使 用 一 套 简单 的 检测 逻辑 ， 测 试 浏览 器 是 否 文 
持 某 种 特性 。 这 种 方式 不 要 求 事先 知道 特定 浏览 器 的 信息 ， 只 需 检 测 自己 关心 的 能 力 是 否 存在 即 可 。 能 
力 检测 的 基本 模式 如 下 : 


if (object.propertyInQuestion) { 
// 使 用 object.propertyInQuestion 


比如 ，IE5S 之 前 的 版 本 中 没有 document .getElementById() 这 个 DOM 方法 ,但 可 以 通过 
document .all 属性 实现 同样 的 功能 。 为 此 ， 可 以 进行 如 下 能 力 检 测 : 


function getElement (id) { 
if (document .getElementById) { 
return document .getElementById(id); 
} else if (document.all) { 
return document.all[id]; 
} else { 
throw new Error("No way to retrieve element!"); 












































































































































} 
} 
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这 个 getElement () 函数 的 目的 是 根据 给 定 的 ID 获取 元 素 。 因 为 标准 的 方式 是 使 用 aocument . 
getElementById()， 所 以 首先 测试 它 。 如 果 这 个 函数 存在 (不 是 undefined )， 那 就 使 用 这 个 方法 ; 
否则 检测 aocument .all 是 否 存在 ， 如 果 存 在 则 使 用 。 如 果 这 两 个 能 力 都 不 存在 (基本 上 不 可 能 )， 则 
抛 出 错误 说 明 功 能 无 法 实现 。 

能 力 检测 的 关键 是 理解 两 个 重要 概念 。 首 先 ， 如 前 所 述 ， 应 该 先 检 测 最 常用 的 方式 。 在 前 面 的 例子 
中 就 是 先 检 测 document .getElementById () 再 检测 aocument .al1。 测 试 最 常用 的 方案 可 以 优化 代 
码 执行 ， 这 是 因为 在 多 数 情况 下 都 可 以 避免 无 谓 检测 。 

其 次 是 必须 检测 切实 需要 的 特性 。 某 个 能 力 存 在 并 不 代表 别 的 能 力也 存在 。 比 如 下 面 的 例子 : 

function getWindowWidth() { 

if (document.all) { // 假设 IE 

return document .documentElement .clientWidth; // 不 正确 的 用 法 | 
} else { 

return window.innerWidth; 

) } 

这 个 例子 展示 了 不 正确 的 能 力 检 测 方式 。getwindowWidth() 函数 首先 检测 aocument .all 是 否 
存在 ， 如 果 存 在 则 返回 aocument .documentElement .clientwiqdth,， 理由 是 IE8 及 更 低 版 本 不 支持 
window.innerWidth。 这 个 例子 的 问题 在 于 检测 到 aocument .all 存在 并 不 意味 着 浏览 器 是 正 。 事 实 ， 
也 可 能 是 某 个 早期 版 本 的 Opera， 既 支持 document .all 也 支持 windown .innerWidth。 


13.1.1 安全 能 力 检 测 


能 力 检测 最 有 效 的 场景 是 检测 能 力 是 否 存在 的 同时 ， 验 证 其 是 否 能 够 展现 出 预期 的 行为 。 前 一 节 中 
的 例子 依赖 将 测试 对 象 的 成 员 转 换 类 型 ， 然 后 再 确定 它 是 否 存 在 。 昌 然 这 样 能 够 确定 检测 的 对 象 成 员 存 
在 ,但 不 能 确定 它 就 是 你 想 要 的 。 来 看 下 面 的 例子 ， 这 个 函数 尝试 检测 某 个 对 象 是 否 可 以 排序 : 

// 不 要 这 样 做 ! 错误 的 能 力 检测 ， 只 能 检测 到 能 力 是 否 存在 


function isSortable(object) { 
return !!object.sort; 


} 

这 个 函数 尝试 通过 检测 对 象 上 是 否 有 sort () 方 法 来 确定 它 是 否 支持 排序 。 问 题 在 于 ， 即 使 这 个 对 
象 有 一 个 sort 属性 ， 这 个 函数 也 会 返回 true: 

let result = isSortable({ sort: true }); 

简单 地 测试 到 一 个 属性 存在 并 不 代表 这 个 对 象 就 可 以 排序 。 更 好 的 方式 是 检测 sort 是 不 是 函数 : 


// 好 一 些 ， 检 测 sort 是 不 是 溃 数 
function isSortable (object) 
return typeof object.sort 


} 

上 面 的 代码 中 使 用 的 typeof 操作 符 可 以 确定 sort 是 不 是 函数 ， 从 而 确认 是 否 可 以 调用 它 对 数据 
进行 排序 。 

进行 能 力 检测 时 应 该 尽量 使 用 typeof 操作 符 , 但 光 有 它 还 不 够 。 尤 其 是 某 些 宿主 对 象 并 不 保证 对 
typeof 测试 返回 合理 的 值 。 最 有 和 名 的 例子 就 是 Internet Explorer ( IE ), 在 多 数 浏览 右 中 ,下 面 的 代码 都 
会 在 aocument .createBlement () 存 在 时 返回 true: 
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= "function"; 
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// 不 适用 于 IE8 及 更 低 版 本 
function hasCreateElement() { 
return typeof document.createElement == "function"; 


} 


但 在 IE8 及 更 低 版 本 中 ， 这 个 函数 会 返回 false。 这 是 因为 typeof document . createElement 
回 "object "而 非 "function"。 前 面 提 到 过 ，DOM 对 象 是 宿主 对 象 ， 而 宿主 对 象 在 IE8 及 更 低 版 本 
是 通过 COM 而 非 JScript 实现 的 。 因 此 ，document .createElement () 函数 被 实现 为 COM 对 象 ， 
typeof 返回 "object"。IE9 对 DOM 方法 会 返回 "function"。 
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注意 要 深入 了 解 JavaScript 能 力 检 测 ， 推 荐 阅读 Peter Michaux 的 文章 “Feature Detection 一 


State of the Art Browser Scripting” 。 





13.1.2 ”基于 能 力 检 测 进 行 浏 览 器 分 析 


虽然 可 能 有 人 觉得 能 力 检 测 类 似 于 黑 科 技 , 但 恰当 地 使 用 能 力 检 测 可 以 精准 地 分 析 运 行 代码 的 浏览 
器 。 使 用 能 力 检测 而 非 用 户 代理 检测 的 优点 在 于 ,伪造 用 户 代 理 字符 串 很 简单 ， 而 伪造 能 够 欺骗 能 力 检 
测 的 浏览 器 特性 却 很 难 。 

1. 检测 特性 

可 以 按照 能 力 将 浏览 器 归 类 。 如 果 你 的 应 用 程序 需要 使 用 特定 的 浏览 器 能 力 , 那么 最 好 集中 检测 所 
有 能 力 ， 而 不 是 等 到 用 的 时 候 再 重复 检测 。 比 如 : 


// 检测 浏览 器 是 否 支 持 Netscape 式 的 插件 
let hasNSPlugins = !! (navigator.plugins && navigator.plugins.length); 

































































// 检测 浏览 器 是 否 具 有 DOM Level 1 能 力 
let hasDOM1L = !! (document .getElementBylId && document.createElement && 
document .getElementsByTagName);} 


这 个 例子 完成 了 两 项 检测 :一 项 是 确定 浏览 器 是 否 支 持 Netscape 式 的 插件 ， 男 一 项 是 检测 浏览 
是 否 具有 DOM Level 1 能 力 。 保 存在 变量 中 的 布尔 值 可 以 用 在 后 面 的 条 件 语句 中 ， 这 样 比重 复 检测 省 
事 多 了 。 

2. 检测 浏览 

可 以 根据 对 浏览 器 特性 的 检测 并 与 已 知 特性 对 比 , 确认 用 户 使 用 的 是 什么 浏览 器 。 这 样 可 以 获得 比 
用 户 代 码 嗅 探 ( 稍 后 讨论 ) 更 准确 的 结果 。 但 未 来 的 浏览 器 版 本 可 能 不 适用 于 这 套 方案 。 

下 面 来 看 一 个 例子 , 根据 不 同 浏 览 器 独 有 的 行为 推断 出 浏览 器 的 身份 。 这 里 故意 没有 使 用 navigator. 
useragent 属性 ， 后 面 会 讨论 它 : 


Class BrowserDetector { 
constructor() { 
// 测试 条 件 编 译 

// IE6~10 支持 
this.isIE_Gte6Lte10 = /*@cc_on!@*/false; 









































// 测试 documentMode 
// IE7~11 支持 
this.isIE Gte7yLtell = !!document .documentMode; 
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// 测试 StyleMedia 构造 函数 
// Edge 20 及 以 上 版 本 支持 
this.isEdqge_Gte20 = !!window.StyleMedia; 


// 测试 Firefox 专 有 扩展 安装 API 
// 所 有 版 本 的 Firefox 都 支持 
this.isFirefox_ Gtel = typeof InstallTrigger !== 'undefined'; 





// 测试 chrome 对象 及 其 webstore 属性 
// Opera 的 某 些 版 本 有 window.chrome， 但 没有 window.chrome.webstore 
// 所 有 版 本 的 Chrome 都 支持 


this.isChrome_Gtel = !!window.chrome && !!window.chrome.webstore; 


// Safari 早期 版 本 会 给 构造 函数 的 标签 符 追 加 "Constructor" 字 样 ， 如 : 

// window.Element.toString(); // [object ElementConstructor] 

// Safari 3~9.1 支持 

this.isSafari_Gte3Lte9_1 = /constructor/i.test (window.Element); 


// 推送 通知 API 暴露 在 window 对 象 上 
// 使 用 默认 参数 值 以 避免 对 undefined 调用 toString () 
// Safari 7.1 及 以 上 版 本 支持 
this.isSafari_Gte7_1 = 
(({pushNotification = {}} = {}) => 
pushNotification.toString() == ' [obJject SafariRemoteNotification]' 
) (window.safari); 


// 测试 addons 属性 
// Opera 20 及 以 上 版 本 支持 


this.isOpera Gte20 = !!window.opr && !!window.opr.addons; 
} 
isIE() { return this.isIFE Gte6Ltel10 || this.isIFE Gte7yLtell; } 
isEdge() { return this.isEdge Gte20 && !this.isIE(); } 


isFirefox() { return this.isFirefox Gtel; } 

isChrome() { return this.isChrome Gtel; } 

isSafari() { return this.isSafari Gte3Lte9_ 1 || this.isSafari Gte7_1; } 
isOpera() { return this.isOpera Gte20; } 


























这 个 类 暴露 的 通用 浏览 需 检测 方法 使 用 了 检测 浏览 器 范围 的 能 力 测试 。 随 着 浏览 器 的 变迁 及 发 展 ， 
可 以 不 断 调 整 底层 检测 逻辑 ， 但 主要 的 API 可 以 保持 不 变 。 
能 力 检 测 的 局 限 
通过 检测 一 种 或 一 组 能 力 ， 并 不 总 能 确定 使 用 的 是 哪 种 浏览 器 。 以 下 “浏览 器 检测 ”代码 (或 其 他 
类 似 代码 ) 经 常 出 现在 很 多 网 站 中 ,但 都 没有 正确 使 用 能 力 检测 : 
// 不 要 这 样 做 | 不 够 特殊 


let isFirefox = !!(navigator.vendor && navigator.vendorSub); 











// 不 要 这 样 做 | 假设 太 多 
let isIE = !!(document.all && document .uniqueID); 
错误 使 用 能 力 检 测 的 典型 示例 。 过 去 ，Firefox 可 以 通过 navigator.vendor 和 navigator. 
vengdorSub 来 检测 ， 但 后 来 safari 也 实现 了 同样 的 属性 ， 于 是 这 段 代码 就 会 产生 误 报 。 为 确定 正 ， 
这 段 代码 检测 了 aocument .all 和 document. Von Ta 这 是 假设 全 将 来 的 版 本 中 还 会 继续 存在 这 
两 个 属性 ， 而且 其 他 浏览 器 也 不 会 实现 它们 。 不 过 这 两 个 检测 都 使 用 双重 否定 操作 符 来 产生 布尔 值 ( 这 
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样 可 以 生成 便于 存储 和 访问 的 结果 )。 


注意 ”能力 检 测 最 适合 用 于 决定 下 一 步 


该 怎么 做 ,而 不 一 定 能 够 作为 辨识 浏 
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用 户 代理 检测 通过 浏览 器 的 用 户 代 理 字符 串 确定 使 用 的 是 什么 浏览 器 。 用 户 代 理 字符 串 包含 在 每 个 
HTTP 请 求 的 头 部 ， 在 JavaScript 中 可 以 通过 navigator.userAgent 访问 。 在 服务 器 端 ， 常 见 的 做 法 
是 根据 接收 到 的 用 户 代理 字符 串 确 定 浏览 器 并 执行 相应 操作 。 而 在 客户 端 ， 用 户 代理 检测 被 认为 是 不 可 


























靠 的 ， 只 应 该 在 没有 其 他 选项 时 再 考虑 。 
用 户 代理 字符 串 最 受 争议 的 地 方 就 是 ， 


























的 历史 。 
13.2.1 用 户 代理 的 历史 


HTTP 规范 ( 1.0 和 1.1 ) 要 求 浏览 器 应 该 向 服务 器 发 送 包含 浏览 器 名 称 和 版 本 信息 的 简短 字符 中 


























在 很 长 一 段 时 间 里 ， 浏 览 器 都 通过 在 用 户 代 理 字符 串 包 含 
错误 或 误导 性 信息 来 欺骗 服务 器 。 要 理解 背后 的 原因 ， 必 须 回顾 一 下 自 Web 出 现 之 后 用 户 代理 字符 串 




















Ud 


RFC 2616 (HTTP 1.1 ) 是 这 样 描述 用 户 代理 字符 串 的 : 


产品 标记 用 于 通过 软件 名 称 和 版 本 来 标识 通信 产品 的 身份 。 多数 使 用 产品 标记 的 字段 也 允 
许 列 出 属于 应 用 主要 部 分 的 子 产品 ， 以 空格 分 隔 。 按 照 约 定 ， 产 品 按照 标识 应 用 重要 程度 的 先 





后 顺序 列 出 。 















































这 个 规范 进一步 要 求 用 户 代理 字符 串 应 该 是 “标记 /版 本 ”形式 的 产品 列表 。 但 现实 当中 的 用 户 代 








理 字符 串 远 没有 那么 简单 。 
1. 早期 浏览 


美国 国家 超级 计算 应 用 中 心 (NCSA，National Center for Supercomputing Applications ) 发 布 于 1993 








年 的 Mosaic 是 早期 Web 浏览 器 的 代表 ， 其 用 


Mosaic/0.9 














户 代 理 字 符 串 相当 简单 ， 类 似 于 : 














虽然 在 不 同 操作 系统 和 平台 中 可 能 会 有 所 不 同 , 但 基本 形式 都 是 这 么 简单 直接 。 斜 杠 前 是 产品 名 称 
(有 时 候 可 能 是 “NCSA Mosaic” 之 类 的 )， 和 斜 杠 后 是 产品 版 本 。 
在 网 景 公 司 准备 开发 浏览 器 时 ， 代 号 确定 为 “Mozilla”( Mosaic Killer 的 简写 )。 第 一 个 公开 发 行 版 























Netscape Navigator 2 的 用 户 代 理 字 符 串 是 这 样 的 : 


Mozilla/Version [Language] (Platform; Encryption) 


网 景 公司 遵守 了 将 产品 名 称 和 版 本 作为 用 户 代 理 字符 串 的 规定 ,但 又 在 后 面 添 加 了 如 下 信息 。 





























省 








口 Language: 语言 代码 ， 表 示 浏 览 器 的 目标 使 用 语言 。 














Mozilla/2.02 [fr] (WinNT; I) 


D Platform: 表示 浏览 器 所 在 的 操作 系统 和 /或 平台 。 
口 Encryption: 包含 的 安全 加 密 类 型 ， 可 能 的 值 是 U (128 位 加 密 )、I (40 位 加 密 ) 和 N (无 加 密 )。 
Netscape Navigator 2 的 典型 用 户 代 理 字符 串 如 下 所 示 : 
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这 个 字符 串 表示 Netscape Navigator 2.02， 在 主要 使 用 法 语 地 区 的 发 行 ， 运 行 在 Windows NT 上 ， 
40 位 加 密 。 总 体 上 看 ， 通 过 产品 名 称 还 是 很 容易 知道 这 是 什么 浏览 器 的 。 

2. Netscape Navigator 3 和 1IE3 

1996 年 ，Netscape Navigator 3 发 布 之 后 超过 Mosaic 成 为 最 受 欢迎 的 浏览 器 。 其 用 户 代 理 字符 串 也 
发 生 了 一 些小 变化 ， 删 除了 语言 信息 ， 并 将 操作 系统 或 系统 CPU 信息 ( OS-or-CPU description ) 等 列 为 
可 选 信 息 。 此 时 的 格式 如 下 : 

Mozilla/Version (Platform; Encryption [; OS-or-CPU description]) 

运行 在 Windows 系统 上 的 Netscape Navigator 3 的 典型 用 户 代 理 字 符 串 如 下 : 

Mozilla/3.0 (Win95; U) 

这 个 字符 串 表示 Netscape Navigator 3 运行 在 Windows 95 上 ， 采 用 了 128 位 加 密 。 注 意 在 Windows 
系统 上 ， 没 有 “OS-or-CPU” 部 分 。 
Netscape Navigator 3 发 布 后 不 久 ， 微 软 也 首次 对 外 发 布 了 IE3。 这 是 因为 当时 Netscape Navigator 是 
市 场 占有 率 最 高 的 浏览 器 ， 很 多 服务 器 在 返回 网 页 之 前 都 会 特意 检测 其 用 户 代理 字符 串 。 如 果 正 因此 
打 不 开 网 页 , 那么 这 个 当时 初出 茅 庐 的 浏览 器 就 会 遭受 重创 。 为 此 ,IE 就 在 用 户 代 理 字符 串 中 添加 了 兼 
容 Netscape 用 户 代理 字符 串 的 内 容 。 结 果 格 式 为 : 

Mozilla/2.0 (compatible; MSIE Version; Operating System) 

比如 ，Windows 95 平 台 上 的 IE3.02 的 用 户 代 理 字符 串 如 下 : 

Mozilla/2.0 (compatible; MSIE 3.02; Windows 95) 

当时 的 大 多 数 浏览 器 检测 程序 都 只 看 用 户 代 理 字 符 串 中 的 产品 名 称 ， 因 此 IE 成 功 地 将 自己 伪装 成 
了 Mozila， 也 就 是 Netscape Navigator。 这 个 做 法 引发 了 一 些 争 议 ， 因 为 它 违 反 了 浏览 器 标识 的 初衷。 
另外 ， 真 正 的 浏览 器 版 本 也 跑 到 了 字符 串 中 间 。 

这 个 字符 串 中 还 有 一 个 地 方 很 有 意思 ， 即 它 将 自己 标识 为 Mozilla 2.0 而 不 是 3.0。3.0 是 当时 市 面 上 
使 用 最 多 的 版 本 ,按理 说 使 用 这 个 版 本 更 合 逻 辑 。 背 后 的 原因 至 今 也 没有 揭 开 ,不 过 很 可 能 就 是 当事人 
一 时 大 意 造成 的 。 

3. Netscape Communicator 4 和 1E4~8 

1997 年 8 月 , Netscape Communicator 4 发布 (这 次 发 布 将 Navigator 改 成 了 Communicator ), Netscape 
在 这 个 版 本 中 仍然 沿用 了 上 一 个 版 本 的 格式 : 

Mozilla/Version (Platform; Encryption [; OS-or-CPU description]) 

比如 ，Windows 98 上 的 第 4 版 ， 其 用 户 代 理 字符 串 就 是 这 样 的 : 

Mozilla/4.0 (Win98; I) 

如 果 发 布 了 补丁 ， 则 相应 增加 版 本 号 ， 比 如 下 面 是 4.79 版 的 字符 串 ; 

Mozilla/4.79 (Win98; I) 

微软 在 发 布 IE4 时 只 更 新 了 版 本 ， 格 式 不 变 : 

Mozilla/4.0 (compatible; MSIE Version; Operating Systenm) 

比如 ，Windows 98 上 运行 的 IE4 的 字符 串 如 下 : 

Mozilla/4.0 (compatible; MSIE 4.0; Windows 98) 
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更 新 版 本 号 之 后 ，IE 的 版 本 号 跟 Mozilla 的 就 一 致 了 ， 识 别 同 为 第 4 代 的 两 于 











次 浏览 器 也 方便 了 。 可 


这 种 版 本 同步 就 此 打住 。 在 IE4.5( 只 针对 Mac ) 面世 时 ，Mozilla 的 版 本 号 还 是 4，IE 的 版 本 号 却 


变 了 : 
Mozilla/4 
直到 IE7， 


Mozilla/d4 


























.0 (compatible; MSIE 4.5; Mac_ PowerPC) 


Mozilla 的 版 本 号 就 没有 变 过 ， 比 如 : 


.0 (compatible; MSIE 7.0; Windows NT 5.1) 


IE8 在 用 户 代理 字符 串 中 添加 了 额外 的 标识 “Trident”， 就 是 浏览 器 泻 染 引擎 的 代号 。 格 





Mozilla/4 
比如 : 
Mozilla/4 
这 个 新 增 上 
版 本 会 变 成 7， 


Mozilla/d4 
































.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0) 

的 “Trident” 是 为 了 让 开发 者 知道 什么 时 候 IE8 运行 兼容 模式 。 在 兼容 模式 下 ， 
但 Trident 的 版 本 不 变 : 

.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0) 


式 变 成 : 


.0 (compatible; MSIE Version; Operating System; Trident/TridentVersion) 


MSIE 的 











添加 这 个 标识 之 后 ， 就 可 以 确定 浏览 器 究竟 是 了 7〈 没 有 “Trident”)， 还 是 IE8 运行 在 导 


IE9 稍微 升级 了 一 下 用 户 代理 


容 模 式 。 

















到 了 5.0。IE9 的 默认 用 户 代理 字符 串 是 这 样 的 : 
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0) 


如 果 IE9 运行 兼容 模式 ， 则 会 恢复 旧版 的 Mozilla 和 MSIE 版 本 号 , 但 Trident 的 版 本 号 还 



































如 ， 下 面 就 是 IE9 运行 在 正 7 兼容 模式 下 的 字符 串 : 
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0) 





所 有 这 些 改变 都 是 为 了 让 之 前 的 用 户 代理 检测 脚本 正常 运作 ,同时 还 能 为 新 脚本 提供 额外 的 信息 。 


4. Gecko 


Gecko 演 染 引 敬 是 Firefox 的 核心 。Gecko 最 初 是 作为 通 上 


一 部 分 开发 的 。 












































LE 字符 串 的 格式 。Mozilla 的 版 本 增加 到 了 5.0，Trident 的 版 本 号 也 增加 


是 5.0。 比 





] Mozilla 浏览 器 ( 即 后 来 的 Netscape . 


有 一 个 针对 Netscape 6 的 用 户 代 理 字符 串 规 范 ， 规 定 了 未 来 的 版 本 应 该 如 何 构造 这 
符 串 。 新 的 格式 与 之 前 一 直 沿用 到 4x 版 的 格式 有 了 很 大 出 入 


Mozilla/MozillaVersion (Platform; Encryption; OS-or-CPU; Language; 
PrereleaseVersion)Gecko/GeckoVersion 
ApplicationProduct/ApplicationProductVersion 


这 个 复杂 的 用 户 代 理 字符 串 包含 了 不 少 想法 。 下 表 列 出 了 其 中 每 一 部 分 的 含义 


















































字 符 串 是 否 必需 说 明 
MozillaVersion 是 Mozilla 版 本 
Bl attom 是 浏览 器 所 在 的 平台 。 可 能 的 值 包括 Windows、Mac 和 X11 (UNIX X- 
Windows ) 
Encryption 是 加 密 能 力 : U 表 示 128 位 ,I 表示 40 位 ，N 表示 无 加 密 
0s-or-CPU 是 。 浏览 器 所 在 的 操作 系统 或 计算 机 处 理 器 类 型 。 如 果 是 Windows 平台 ， 





则 这 里 是 Windows 的 版 本 (如 WinNT、Win95 )。 如 果 是 Mac 平 台 ， 则 
这 里 是 CPU 类 型 ( 如 68k、PPC for PowerPC 或 MacIntel )。 如 果 是 X11 
平台 ， 则 这 里 是 通过 uname -sm 命名 得 到 的 UNIX 操作 系统 名 
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( 续 ) 
字 符 串 是 否 必需 说 明 
Language 是 浏览 器 的 目标 使 用 语言 
Prerelease Version 否 最 初 的 设想 是 Mozilla 预 发 布 版 的 版 本 号 ,现在 表示 Gecko 引擎 的 版 本 号 
GeckoVersion 是 以 yyyymmdd 格式 的 日 期 表示 的 Gecko 泻 染 引擎 的 版 本 
ApplicationProduct 否 使 用 Gecko 的 产品 名 称 。 可 能 是 Netscape 、Firefox 等 
ApplicationProductVersion 否 ApplicationProduct 的 版 本 ， 区 别 于 MozillaVersion 和 GeckoVersion 











要 更 好 地 理解 Gecko 的 用 户 代 理 字符 串 ， 最 好 是 看 几 个 不 同 的 基于 Gecko 的 浏览 吉 返 回 的 字符 串 。 
Windowx XP 上 的 Netscape 6.21: 


Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9.4) Gecko/20011128 
Netscape6/6.2.1 


Linux 上 的 SeaMonkey 1.1a: 
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2) Gecko/20060823 SeaMonkey/1.1a 





Windows XP 上 的 Firefox 2.0.0.11: 


Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 
Firefox/2.0.0.11 


Mac OS 久 上 的 Camino 1.5.1: 


Mozilla/5.0 (Macintosh; U; Intel Mac OS XxX; en; rv:1.8.1.6) Gecko/20070809 
Camino/1.5.1 


所 有 这 些 字 符 串 都 表示 使 用 的 是 基于 Gecko 的 浏览 器 ( 只 是 版 本 不 同 ) 有 时 候 ， 相 比 于 知道 特定 
的 浏览 器 ， 知 道 是 不 是 基于 Gecko 才 更 重要 。 从 第 一 个 基于 Gecko 的 浏览 器 发 布 开 始 ，Mozilla 版 本 就 
是 5.0， 一 直 没 有 变 过 。 以 后 也 不 太 可 能 会 变 。 

在 Firefox 4 发布 时 ，Mozilla 简化 了 用 户 代 理 字符 串 。 主 要 变化 包括 以 下 几 方 面 。 
口 去 掉 了 语言 标记 ( 即 前 面 例子 中 的 "en-Us" )。 
口 在 浏览 器 使 用 强加 密 时 去 掉 加 密 标记 ( 因为 是 默认 了 )。 这 意味 着 工 和 还 可 能 出 现 , 但 U 不 可 
























































能 出 现 了 。 
口 去 掉 了 Windows 平台 上 的 平台 标记 ， 这 是 因为 跟 OS-or-CPU 部 分 重复 了 ， 否 则 两 个 地 方 都 会 有 
Windowso 





口 GeckoVersion 固定 为 "Gecko/20100101"。 
下 面 是 Firefox 4 中 用 户 代理 字符 串 的 例子 : 


Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox 4.0.1 

















5. WebKit 

2003 年 ， 苹 果 宣 布 将 发 布 自己 的 浏览 器 Safari。Safari 的 演 染 引擎 叫 WebKit， 是 基于 Linux 平台 浏 
览 器 Konqueror 使 用 的 泻 染 引擎 KHTML 开发 的 。 几 年 后 ，WebKit 又 拆 分 出 自己 的 开源 项 目 , 专注 于 演 
染 引擎 开发 。 

这 个 新 浏览 器 和 泻 染 引擎 的 开发 者 也 面临 与 当初 IE3.0 时 代 同 样 的 问题 : 怎样 才能 保证 浏览 器 不 被 
排除 在 流行 的 站 点 之 外 。 答 案 就 是 在 用 户 代理 字符 串 中 添加 足够 多 的 信息 , 让 网 站 知道 这 个 浏览 器 与 其 
他 浏览 器 是 兼容 的 。 于 是 Safari 就 有 了 下 面 这 样 的 用 户 代理 字符 串 : 
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Mozilla/5.0 (Platform; Encryption; OS-or-CPU; Language) 
AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Safari/SafariVersion 


下 面 是 一 个 实际 的 例子 : 


Mozilla/5.0 (Macintosh; U; PPC Mac OS XxX; en) AppleWebKit/124 (KHTML, like Gecko) 
Safari/125.1 


这 个 字符 串 也 很 长 ， 不 仅 包 括 苹果 WebKit 的 版 本 ， 也 包含 Safari 的 版 本 。 一 开始 还 有 是 否 需 要 将 
浏览 器 标识 为 Mozilla 的 争论 ， 但 考虑 到 兼容 性 很 快 就 达成 了 一 致 。 现 在 ， 所 有 基于 WebKit 的 浏览 
都 将 自己 标识 为 Mozilla 5.0， 与 所 有 基于 Gecko 的 浏览 器 一 样 。Safari 版 本 通常 是 浏览 器 的 构建 编号 ， 
不 一 定 表示 发 布 的 版 本 号 。 比 如 Safari 1.25 在 用 户 代理 字符 串 中 的 版 本 是 125.1， 但 也 不 一 定 始 终 这 样 
对 应 。 

Safari 用 户 代理 字符 串 中 最 受 争议 的 部 分 是 在 1.0 预 发 布 版 中 添加 的 " (KHTML,， 1ike Gecko)"。 由 
于 有 意 想 让 客户 端 和 服务 器 把 Safari 当成 基于 Gecko 的 浏览 器 (好像 光 添加 "Mozi1l1a/5.0" 还 不 够 )， 
苹果 也 招来 了 很 多 开发 者 的 反对 。 苹 果 的 回应 与 微软 当初 卫 遭受 质疑 时 一 样 : Safari 与 Mozilla 兼容 ， 
不 能 让 网 站 以 为 用 户 使 用 了 不 受 支持 的 浏览 器 而 把 Safari 排斥 在 外 。 

Safari 的 用 户 代 理 字符 串 在 第 3 版 时 有 所 改进 。 下 面 的 版 本 标记 现在 用 来 表示 Safari 实际 的 版 本 号 : 


Mozilla/5.0 (Macintosh; U; PPC Mac OS xXx; en) AppleWebKit/522.15.5 
(KHTML, like Gecko) Version/3.0.3 Safari/522.15.5 


注意 这 个 变化 只 针对 Safari 而 不 包括 WebKit。 因 此 ， 其 他 基于 WebKit 的 浏览 器 可 能 不 会 有 这 个 变 
化 。 一 般 来 说 ， 与 Gecko 一 样 ， 通 常识 别 是 不 是 WebKit 比 识别 是 不 是 Safari 更 重要 。 

6. Konqueror 

Konqueror 是 与 KDE Linux 桌面 环境 打包 发 布 的 浏览 器 ,基于 开源 演 染 引擎 KHTML。 虽 然 只 有 Linux 
平台 的 版 本 ，Konqueror 的 用 户 却 不 少 。 为 实现 最 大 化 兼容 ,Konqueror 决定 采用 Internet Explore 的 用 户 
代理 字符 串 格 式 : 

Mozilla/5.0 (compatible; Konqueror/Version; OS-or-CPU) 

不 过 ，Konqueror 3.2 为 了 与 WebKit 就 标识 为 KHTML 保持 一 致 ， 也 对 格式 做 了 一 点 修改 : 


Mozilla/5.0 (compatible; Konqueror/Version; OS-or-CPU) KHTML/KHTMLVersion 
(like Gecko) 


下 面 是 一 个 例子 : 

Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko) 

Konqueror 和 KHTML 的 版 本 号 通常 是 一 致 的 , 有 时 候 也 只 有 子 版 本 号 不 同 。 比 如 Konqueror 是 3.5， 
而 KHTML 是 3.5.1。 

7. Chrome 

谷歌 的 Chrome 浏览 器 使 用 Blink 作为 演 染 引擎 , 使 用 V8 作为 JavaScript 引擎 。Chrome 的 用 户 代理 
字符 串 包含 所 有 WebKit 的 信息 ， 另 外 又 加 上 了 Chrome 及 其 版 本 的 信息 。 其 格式 如 下 所 示 


Mozilla/5.0 (Platform; Encryption; OS-or-CPU; Language) 
AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) 
Chrome/ChromeVersion Safari/SafariVersion 


以 下 是 Chrome 7 完整 的 用 户 代理 字符 串 : 


Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.7 
KHTML, like Gecko) Chrome/7.0.517.44 Safari/534.7 
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其 中 的 Safari 版 本 和 WebKit 版 本 有 可 能 始终 保持 一 致 ， 但 也 不 能 肯定 。 

8. Opera 

在 用 户 代 理 字符 串 方 面 引 发 争议 最 大 的 一 个 浏览 器 就 是 Opera。Opera 默认 的 用 户 代 理 字符 串 是 所 
有 现代 浏览 器 中 最 符合 逻辑 的 ， 因 为 它 正 确 标识 了 自己 和 版 本 。 在 Opera 8 之 前 ， 其 用 户 代理 字符 串 都 
是 这 个 格式 : 


Opera/Version (0S-or-CPU Encryption) [Languagel] 


比如 ，Windows XP 上 的 Opera 7.54 的 字符 串 是 这 样 的 : 




































































pera/7.54 (Windows NT 5.1; U) [en] 


O 
Opera 8 发 布 后 ， 语 言 标记 从 括号 外 挪 到 了 括号 内 ， 目 的 是 与 其 他 浏览 器 保持 一 致 
O 


pera/Version (OS-or-CPU; Encryption; Language) 





Windows XP 上 的 Opera 8 的 字符 串 是 这 样 的 : 
Opera/8.0 (Windows NT 5.1; U; en) 
默认 情况 下 ，Opera 会 返回 这 个 简单 的 用 户 代 理 字 符 串 。 这 是 唯一 一 个 使 用 产品 名 称 和 版 本 完全 标 
识 自 身 的 主流 浏览 器 。 不 过 ， 与 其 他 浏览 器 一 样 ，Opera 也 直到 了 使 用 这 种 字符 串 的 问题 。 虽 然 从 技术 
自 度 看 这 是 正确 的 ,但 网 上 已 经 有 了 很 多 浏览 器 检测 代码 只 考虑 Mozilla 这 个 产品 名 称 。 还 有 不 少 代码 
专门 针对 正 或 Gecko。 为 了 不 让 这 些 检 测 代 码 判 断 错 误 ，Opera 坚持 使 用 唯一 标识 自身 的 字符 串 。 

从 Opera 9 开始 ，Opera 也 采用 了 两 个 策略 改变 自己 的 字符 串 。 一 是 把 自己 标识 为 别 的 浏览 器 ， 如 
Firefox 或 正 。 这 时 候 的 字符 串 跟 Firefox 和 了 的 一 样 , 只 不 过 末尾 会 多 一 个 "opera" 及 其 版 本 号 。 比如: 


Mozilla/5.0 (Windows NT 5.1; U; en; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 
Opera 9.50 






























































Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.50 
第 一 个 字符 串 把 Opera 9.5 标识 为 Firefox 2, 同时 保持 了 Opera 版 本 信息 。 第 二 个 字符 串 把 Opera 9.5 
标识 为 IE6， 也 保持 了 Opera 版 本 信息 。 虽 然 这些 字 符 串 可 以 通过 针对 Firefox 和 IE 的 测试 ， 但 也 可 以 
被 识别 为 Opera。 
另 一 个 策略 是 伪装 成 Firefox 或 下。 这 种 情况 下 的 用 户 代 理 字 符 串 与 Firefox 和 IE 返回 的 一 样 ， 末 
Opera" 及 其 版 本 信息 。 这 样 就 根本 没 办 法 区 分 Opera 与 其 他 浏览 器 了 。 更 严重 的 是 ，Opera 
会 根据 访问 的 网 站 不 同 设置 不 同 的 用 户 代理 字符 串 ， 却 不 通知 用 户 。 比 如 ， 导 航 到 My Yahoo 网 站 会 
Opera 将 自己 伪装 成 Firefox。 这 就 导致 很 难 通过 用 户 代理 字符 串 来 识别 Opera。 






























































注意 在 Opera7 之 前 的 版 本 中 ，Opera 可 以 解析 Windows 操作 系统 字符 串 的 含义 。 比 如 ， 
Windows NT 5.1 实际 上 表示 Windows XP。 因 此 Opera 6 的 用 户 代 理 字符 串 中 会 包含 


Windows XP 而 不 是 WindowsNT 5.1。 为 了 与 其 他 浏览 器 表现 更 一 致 ，Opera7 及 后 来 的 版 
本 就 改 为 使 用 官方 报告 的 操作 系统 字符 串 ， 而 不 是 自己 转换 的 了 。 














Opera 10 又 修改 了 字符 串 格式 ， 变 成 了 下 面 这 样 ; 

Opera/9.80 (0S-or-CPU” Encryption; Language) Presto/PrestoVersion Version/Version 

注意 开头 的 版 本 号 opera/9.80 是 固定 不 变 的 。Opera 没有 9.8 这 个 版 本 ,但 Opera 工程 师 担心 某 
些 浏览 器 检测 脚本 会 错误 地 把 Opera/10.0 当成 Opera 1 而 不 是 Opera 10。 因 此 ，Opera 10 新 增 了 额外 的 
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Presto 标识 ( Presto 是 Opera 的 泻 染 引擎 ) 和 版 本 标识 。 比 如 ， 下 面 是 Windows 7 上 的 Opera 10.63 的 字 
符 串 : 

Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63 

Opera 最 近 的 版 本 已 经 改 为 在 更 标准 的 字符 串 末尾 追加 "oOPR" 标 识 符 和 版 本 导 。 这 样 ， 除 了 未 尾 
的 "OPR" 标 识 符 和 版 本 号 ， 字 符 串 的 其 他 部 分 与 WebKit 浏览 髓 是 类 似 的 。 下 面 就 是 Windows 10 上 的 
Opera 52 的 用 户 代理 字符 串 : 


Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/65.0.3325.181 Safari/537.36 OPR/52.0.2871.64 











9. iOS 与 Android 
iOS 和 Android 移动 操作 系统 上 默认 的 浏览 器 都 是 基于 WebKit 的 , 因此 具有 与 相应 桌面 浏览 器 一 样 
的 用 户 代 理 字 符 串 。iOS 设备 遵循 以 下 基本 格式 : 


Mozilla/5.0 (Platform; Encryption; OS-or-CPU like Mac OS X; Language) 
AppleWebKRit/AppleWebKitVersion (KHTML, like Gecko) Version/BrowserVersion 
Mobile/MobileVersion Safari/SafariVersion 


意 其 中 用 于 辅助 判断 Mac 操作 系统 的 "1ike Mac os xX" 和 "Mobile" 相 关 的 标识 。 这 里 的 Mobile 
0 WebKit 之 外 并 没有 什么 用 。 平 台 可 能 是 "ipPhone"、"iPod" 或 "iPad"， 因 设备 
而 异 。 例如 : 


Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS XxX; en-us) 
AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16 


注意 在 iOS 3 以 前 ， 操 作 系 统 的 版 本 号 不 会 出 现在 用 户 代理 字符 串 
默认 的 Android 浏 览 器 通常 与 i0S 上 的 浏览 器 格式 相同 ,只 是 没有 Moepile 后 面 的 版 本 号 ( "Mobile" 
标识 还 有 )。 例 如 : 


Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) 
AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 


这 个 用 户 代理 字符 串 是 谷歌 Nexus One 手机 上 的 默认 浏览 絮 的 。 不 过 ， 其 他 Android 设备 上 的 浏览 
器 也 遵循 相同 的 模式 。 


13.2.2 ”浏览 器 分 析 


想 要 知道 自己 代码 运行 在 什么 浏览 器 上 ， 大 部 分 开发 者 会 分 析 wingdow.navigator.userAgent 
返回 的 字符 串 值 。 所 有 浏览 器 都 会 提供 这 个 值 ， 如果 相信 这 些 返回 值 并 基于 给 定 的 一 组 浏览 器 检测 这 个 
字符 串 ， 最 终 会 得 到 关于 浏览 器 和 操作 系统 的 比较 精确 的 结果 。 

相 比 于 能 力 检测 ,用户 代理 检测 还 是 有 一 定 优势 的 。 能力 检 测 可 以 保证 脚本 不 必 理 会 浏览 器 而 正常 
执行 。 现 代 浏 览 器 用 户 代 理 字符 串 的 过 去 、 et nate 我 们 能 够 利用 它们 准确 识 
别 浏览 

1. 伪造 用 户 代 理 
通过 检测 用 户 代理 来 识别 浏览 器 并 不 是 完美 的 方式 ， 毕 竟 这 个 字符 串 是 可 以 造假 的 。 只 不 过 实现 
window.navigator 对 象 的 浏览 器 ( 即 所 有 现代 浏览 器 ) ee useraAgent 这 个 只 读 属 性 。 因 此 ， 
简单 地 给 这 个 属性 设置 其 他 值 不 会 有 效 : 
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console.log(window.navigator.userAgent); 
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/65.0.3325.181 Safari/537.36 


window.navigator.userAgent = 'foobar'; 


console.log(window.navigator.userAgent); 
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/65.0.3325.181 Safari/537.36 


不 过 , 通过 简单 的 办 法 可 以 绕 过 这 个 限制 。 比如 , 有 些 浏览 咒 提 供 伪 私有 的 _ defineGetter_ 方法 ， 
利用 它 可 以 算 改 用 户 代 理 字符 串 : 
console.log (window.navigator.userAgent); 


// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) 
Chrome/65.0.3325.181 Safari/537.36 
































window.navigator. defineGetter__('userAgent', () => 'foobar'); 


console.log(window.navigator.userAgent); 
// foobar 


对 付 这 种 造假 是 一 件 吃力 不 讨好 的 事 。 检测 用 户 代 理 是 否 以 这 种 方式 被 自 改 过 是 可 能 的 , 但 总 体 来 
看 还 是 一 场 猫 捉 老 鼠 的 游戏 。 

与 其 劳 心 费 力 检测 造假 ， 不 如 更 好 地 专注 于 浏览 器 识别 。 如 果 相 信 浏 览 器 返回 的 用 户 代 理 字符 串 ， 
那 就 可 以 用 它 来 判断 浏览 器 。 如 果 怀 疑 脚本 或 浏览 器 可 能 得 改 这 个 值 ， 那 最 好 还 是 使 用 能 力 检测 。 





















































2. 分 析 浏 览 

通过 解析 浏览 器 返回 的 用 户 代理 字符 串 ， 可 以 极其 准确 地 推断 出 下 列 相 关 的 环境 信息 : 
口 浏览 需 

口 浏览 需 版 本 


口 浏览 需 泻 染 引擎 
口 设备 类 型 (桌面 /移动 ) 
口 设备 生产 商 
口 设备 型 号 
口 操作 系统 
口 操作 系统 版 本 
当然 ， 新 浏览 器 、 新 操作 系统 和 新 硬件 设备 随时 可 能 出 现 ， 其 中 很 多 可 能 有 着 类 似 但 并 不 相同 的 月 
户 代 理 字符 串 。 因 此 ， 用 户 代 理解 析 程 序 需要 与 时 俱 进 ， 频 繁 更 新 ， 以 免 落伍 。 自 己 手写 的 解析 程序 如 
果 不 及 时 更 新 或 修订 ， 很 容易 就 过 时 了 。 本 书 上 一 版 写 过 一 个 用 户 代 理解 析 程 序 , 但 这 一 版 并 不 推荐 读 
者 自己 从 头 再 写 一 个 。 相 反 ， 这 里 推荐 一 些 GitHub 上 维护 比较 频繁 的 第 三 方 用 户 代理 解析 程序 : 
口 Bowser 
DQ UAParser.js 
口 Platform.js 
口 CURRENT-DEVICE 
口 Google Closure 
口 Mootools 
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注意 Mozilla 维基 有 一 个 页 面 “CompatibilitWUADetectionLibraries”， 其 中 提供 了 用 户 代 
理解 析 程 序 的 列表 ， 可 以 用 来 识别 Mozilla 浏览 器 (甚至 所 有 主流 浏览 器 )。 这 些 解 析 程 序 


是 按照 语言 分 组 的 。 这 个 页 面 好 像 维护 不 频繁 ， 但 其 中 给 出 了 所 有 主流 的 解析 库 。( 注意 
JavaScript 部 分 包含 客户 端 库 和 Node.js 库 。) GitHub 上 的 文章 “Are We Detectable Yet?” 中 
还 有 一 张 可 视 化 的 表格 ， 能 让 我 们 对 这 些 库 的 检测 能 力 一 目 了 然 。 
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现代 浏览 需 提 供 了 一 组 与 页 面 执行 环境 相关 的 信息 , 包括 浏览 器 、 操 作 系统 、 硬 件 和 周边 设备 信息 。 
这 些 属性 可 以 通过 暴露 在 window.navigator 上 的 一 组 API 获得 。 不 过 ， 这 些 API 的 跨 浏览 器 支持 还 
不 够 好 ， 远 未 达到 标准 化 的 程度 。 





















































注意 ”强烈 建议 在 使 用 这 些 API 之 前 先 检测 它们 是 否 存 在 ， 因 为 其 中 多 数 都 不 是 强制 性 


的 ， 且 很 多 浏览 器 没有 支持 。 另 外 ， 本 节 介 绍 的 特性 有 时 候 不 一 定 可 靠 。 





13.3.1 识别 浏览 器 与 操作 系统 


特性 检测 和 用 户 代 理 字 符 串 解析 是 当前 常用 的 两 种 识别 浏览 器 的 方式 。 而 navigator 和 screen 
对 象 也 提供 了 关于 页 面 所 在 软件 环境 的 信息 。 
1. navigator .oscpUu 
navigator.oscpu 属性 是 一 个 字符 串 ， 通 常 对 应 用 户 代理 字符 串 中 操作 系统 /系统 架构 相关 信息 。 
根据 HTML 实时 标准 : 
oscpu 属性 的 获取 方法 必须 返回 空 字 符 串 或 者 表示 浏览 器 所 在 平台 的 字符 事 ， 比 如 "Windows 
NT 10.0; Win64; x64" 或 "Linux x86_64"。 
比如 ，Windows 10 上 的 Firefox 的 oscpu 属性 应 该 对 应 于 以 下 加 粗 的 部 分 : 


console.log (navigator.userAgent); 

"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0" 
console.log(navigator.oscpu); 

"Windows NT 10.0; Win64; x64" 
































2. navigator.vendor 
navigator.vendor 属性 是 一 个 字符 串 ， 通 常 包含 浏览 器 开发 商 信息 。 返 回 这 个 字符 串 是 浏览 器 
navigator 兼容 模式 的 一 个 功能 。 根 据 HTML 实时 标准 : 


























navigator.vendor 返回 一 个 空 字 符 串 ， 也 可 能 返回 字符 串 "Apple Computer, Inc." 
或 字符 串 "Google Inc."。 


例如 ，Chrome 中 的 这 个 navigator.vendor 属性 返回 下 面 的 字符 串 : 


console.log(navigator.vendor); // "Google Inc." 








了 








3. navigator.platform 


navigator.platform 属性 是 一 个 字符 串 , 通常 表示 浏览 器 所 在 的 操作 系统 。 根 据 HTML 实时 标准 : 
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navigator.platform 必须 返回 一 个 字符 串 或 表示 浏览 器 所 在 平台 的 字符 事 , 例 如 "MacIntel"、 
"Win32"、"FreeBSD i386" 或 "WebTV 0S"。 


例如 ，Windows 系统 下 Chrome 中 的 这 个 navigator.platform 属性 返回 下 面 的 字符 串 : 


console.log(navigator.platform); // "Win32" 





4. screen.colorDepth 和 screen. pixelDepth 
screen.colorDepth 和 screen.pixelDepth 返回 一 样 的 值 ， 即 显示 器 每 像素 颜色 的 位 深 。 根据 
CSS 对 象 模型 (CSSOM ) 规范 : 


screen. ent screen.pixelDepth 属 性 应 该 返回 输出 设备 中 每 像素 用 于 显示 
顾 色 的 位 数 ， 不 包含 alpha 通 
Chrome 中 这 两 个 属性 的 值 如 下 所 示 : 


console.log(screen.colorDepth); // 24 
console.log(screen.pixelDepth); // 24 



































5. screen.orientation 












































screen.orientation 属性 返回 一 个 Screenorientation 对 象 , 其 中 包含 Screen Orientation API 
定义 的 屏幕 信息 。 这 里 面 最 有 意思 的 属性 是 angle 和 type， 前 者 返回 相对 于 默认 状态 下 屏幕 的 角度 ， 
后 者 返回 以 下 4 种 枚 举 值 之 一 : 


DQ portrait-primary 

DQ portrait-secondary 
D landscape-primary 
D landscape-secondary 


例如 ， 在 Chrome 移动 版 中 ，screen.orientation 返回 的 信息 如 下 : 





























// 垂直 看 

console.log(screen.orientation.type); // portrait-primary 

console.log(screen.orientation.angle); // 0 

// 向 左 转 

console.log(screen.orientation.type); // landscape-primary 

console.log(screen.orientation.angle); // 90 

// 向 右 转 

console.log(screen.orientation.type); // landscape-secondary 

console.log(screen.orientation.angle); // 270 

根据 规范 ， 这 些 值 的 初始 化 取决 于 浏览 器 和 设备 状态 。 因 此 ， 不 能 假设 portrait-primary 和 0 
始终 是 初始 值 。 这 两 个 值 主要 用 于 确定 设备 旋转 后 浏览 器 的 朝向 变化 。 


13.3.2 ”浏览 器 元 数据 


navigator 对 象 暴露 出 一 些 API， 可 以 提供 浏览 器 和 操作 系统 的 状态 信息 。 

1. Geolocation API 

navigator.geolocation 属性 暴露 了 Geolocation API, 可 以 让 浏览 器 脚本 感知 当前 设备 的 地 理 位 
置 。 这 个 API 只 在 安全 执行 环境 (通过 HTTPS 获取 的 脚本 ) 中 可 用 。 

这 个 API 可 以 查询 宿主 系统 并 尽 可 能 精确 地 返回 设备 的 位 置信 息 。 根据 宿主 系统 的 硬件 和 配置 , 返 
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回 结果 的 精度 可 能 不 一 样 。 手 机 GPS 的 坐标 系统 可 能 具有 极 高 的 精度 ， 而 卫 地址 的 精度 就 要 差 很 多 。 

根据 Geolocation API 规范 : 

地 理 位 置信 息 的 主要 来 源 是 GPS 和 IP 地址 、 射 频 识别 (RFID )、Wi-Fi 及 蓝牙 Mac 地址、 
GSM/CDMA 蜂窝 ID 以 及 用 户 输入 等 信息 。 





注意 浏览 器 也 可 能 会 利用 Google Location Service( Chrome 和 Firefox ) 等 服务 确定 位 置 。 
有 时候， 你 可 能 会 发 现 自己 并 没有 GPS, 但 浏览 器 给 出 的 坐标 却 非常 精确 。 浏 览 器 会 收集 


所 有 可 用 的 无 线 网 络 ， 包 括 Wi-Fi 和 蜂 窜 信号 。 拿 到 这 些 信息 后 ， 再 去 查询 网 络 数 据 库 。 
这 样 就 可 以 精确 地 报告 出 你 的 设备 位 置 。 











要 获取 浏览 器 当前 的 位 置 ， 可 以 使 用 getcurrentPosition() 方 法 。 这 个 方法 返回 一 个 
coordinates 对 象 ， 其 中 包含 的 信息 不 一 定 完 全 依赖 宿主 系统 的 能 

// getCurrentPosition() 会 以 position 对 象 为 参数 调用 传 入 的 回调 函数 

navigator.geolocation.getCurrentPosition( (position) => p = position) 

这 个 position 对 象 中 有 一 个 表示 查询 时 间 的 时 间 戳 ， 以 及 包含 坐标 信息 的 coorainates 对 象 : 


console.log(p.timestamp); // 1525364883361 
console.log(p.coords); // Coordinates {...} 


Coordinates 对 象 中 包含 标准 格式 的 经 度 和 纬度 ， 以 及 以 米 为 单位 的 精度 。 精 度 同 样 以 确定 设备 


























位 置 的 机 制 来 判定 。 
console.log(p.coords.latitude, p.coords.longitude); // 371.4854409, -122.2325506 
console.log(p.coords.accuracy); // 58 





Coordinates 对 象 包含 一 个 altitude (海拔 高 度 ) 属性 ， 是 相对 于 1984 世界 大 地 坐标 系 ( World 
Geodetic System，1984 ) 地 球 表面 的 以 米 为 单位 的 距离 。 此 外 也 有 一 个 altitudeAccuracy 属性 ， 这 
个 精度 值 单位 也 是 米 。 为 了 取得 coordinates 中 包含 的 这 些 信息 ， 当 前 设备 必须 具备 相应 的 能 力 ( 比 
如 GPS 或 高 度 计 )。 很 多 设备 因为 没有 能 力 测量 高 度 ， 所 以 这 两 个 值 经 常 有 一 个 或 两 个 是 空 的 。 

console.log(p.coords.altitude); // -8.800000190734863 

console.log(p.coords.altitudeAccuracy); // 200 


Coordinates 对 象 包含 一 个 speed 属性 ， 表 示 设 备 每 秒 移动 的 速度 。 还 有 一 个 neading ( 朝向 ) 
属性 ， 表 示 相 对 于 正 北方 向 移动 的 角度 (0 < heading < 360 )。 为 获取 这 些 信息 ， 当 前 设备 必须 具备 相 
应 的 能 力 ( 比如 加 速 计 或 指南 针 )。 很 多 设备 因为 没有 能 力 测量 高 度 ， 所 以 这 两 个 值 经 常 有 一 个 是 空 的 ， 
或 者 两 个 都 是 空 的 。 





















































注意 设备 不 会 根据 两 点 的 向 量 来 测量 速度 和 朝向 。 不过， 如 果 可 能 的 话 ， 可 以 尝试 基于 
两 次 连续 的 测量 数据 得 到 的 向 量 来 手动 计算 。 当 然 ， 如 果 向 量 的 精度 不 够 ， 那 么 计算 结果 


的 精度 肯定 也 不 够 。 





获取 浏览 器 地 理 位 置 并 不 能 保证 成 功 。 因 此 getcurrentPosition() 方 法 也 接收 失败 回调 函数 作 
为 第 二 个 参数 ， 这 个 函数 会 收 到 一 个 PositionError 对 象 。 在 失败 的 情况 下 ，PositionError 对 象 
中 会 包含 一 个 code 属性 和 一 个 message 属性 ， 后 者 包含 对 错误 的 简短 描述 。code 属性 是 一 个 整数 ， 
表示 以 下 3 种 错误 。 
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口 PERMISSION_DENIED: 浏览 器 未 被 允许 访问 设备 位 置 。 页 面 第 一 次 尝试 访问 Geolocation API 
时 ， 浏览 器 会 弹出 确认 对 话 框 取得 用 户 授权 ( 每 个 域 分 别 获取 )。 如 果 返 回 了 这 个 错误 码 ， 则 要 
么 是 用 户 不 同意 授权 ， 要 么 是 在 不 安全 的 环境 下 访问 了 Geolocation API。message 属性 还 会 提 
供 额 外 信息 。 
口 POSITION_UNAVAILABLE: 系统 无 法 返回 任何 位 置信 息 。 这 个 错误 码 可 能 代表 各 种 失败 原因 ， 
但 相对 来 说 并 不 和 常见， 因为 只 要 设备 能 上 网 ， 就 至 少 可 以 根据 IP 地 址 返回 一 个 低 精度 的 坐标 。 
口 TIMEOUT: 系统 不 能 在 超时 时 间 内 返回 位 置信 息 。 关 于 如 何 配置 超时 ， 会 在 后 面 介 绍 


// 浏览 器 会 弹出 确认 对 话 框 请 用 户 允 许 访问 Geolocation API 
// 这 个 例子 显示 了 用 户 拒 绝 之 后 的 结果 
navigator.geolocation.getCurrentPosition!( 

() => {}, 








































































































(e) => { 
console.log(e.code); SA A 
console.log(e.message); // User denied Geolocation 


} 
) 池 


// 这 个 例子 展示 了 在 不 安全 的 上 下 文中 执行 代码 的 结果 


navigator.geolocation.getCurrentPosition( 
() => {}, 


(e) => { 
console.log(e.code); PEN 
console.log(e.message); // Only secure origins are allowed 


} 
四 


Geolocation API 位 置 请 求 可 以 使 用 Positionoptions 对 象 来 配置 ， 作 为 第 三 个 参数 提供 。 这 个 对 
象 文 持 以 下 3 个 属性 。 
口 enableHighAccuracy: 布尔 值 ，true 表示 返回 的 值 应 该 尽量 精确 ， 默 认 值 为 false。 默 认 情 
况 下 ， 设 备 通 常会 选择 最 快 、 最 省 电 的 方式 返回 坐标 。 这 通常 意味 着 返回 的 是 不 够 精确 的 坐标 。 
比如 ， 在 移动 设备 上 ， 默 认 位 置 查询 通常 只 会 采用 Wi-Fi 和 蜂窝 网 络 的 定位 信息 。 而 在 
enableHighAccuracy 为 true 的 情况 下 ， 则 会 使 用 设备 的 GPS 确定 设备 位 置 ， 并 返回 这 些 值 
的 混合 结果 。 使 用 GPS 会 更 耗 时 、 耗 电 ， 因 此 在 使 用 enableHighaccuracy 配置 时 要 仔细 权 
衡 一 下 。 

口 timeout: 毫秒， 表示 在 以 TIMEOUT 状态 调用 错误 回调 函数 之 前 等 待 的 最 长 时 间 。 默 认 值 是 

0xFFFFFFFF ( 2- 1 )。0 表 示 完 全 跳 过 系统 调用 而 立即 以 TIMEOUT 调用 错误 回调 函数 。 

口 maximumage: 上 毫秒, 表示 返回 坐标 的 最 长 有 效 期 ， 默 认 值 为 0。 因 为 查询 设备 位 置 会 消耗 资源 ， 
所 以 系统 通常 会 缓存 坐标 并 在 下 次 返回 缓存 的 值 ( 遵从 位 置 缓存 失效 策略 )。 系统 会 计算 缓存 期 ， 
如 果 Geolocation API 请 求 的 配置 要 求 比 缓存 的 结果 更 新 , 则 系统 会 重新 查询 并 返 区 回 值 。 0 表示 强 
制 系统 忽略 缓存 的 值 ， 每 次 都 重新 查询 。 而 Infinity 会 阻止 系统 重新 查询 ， 只 会 返回 缓存 的 
值 。JavaScript 可 以 通过 检查 Position 对 象 的 timestamp 属性 值 是 否 重 复 来 判断 返回 的 是 不 
是 缓存 值 。 

2. Connection State 和 Networklnformation API 
浏览 器 会 跟踪 网 络 连接 状态 并 以 两 种 方式 暴露 这 些 信 息 : 连接 事件 和 navigator .onLine 属性 。 
在 设备 连接 到 网 络 时 ,浏览 右 会 记录 这 个 事实 并 在 window 对 象 上 触发 online 事件 。 相 应 地 ， 当 设备 
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断 开 网 络 连接 后 , 浏览 器 会 在 window 对 象 上 触发 offline 事件 。 人 

















onLine 属性 来 确定 浏览 器 的 联网 状态 。 这 个 属性 返回 一 个 布尔 值 ， 表 示 浏 览 器 是 否 联网 。 


const connectionStateChange = () => console.log(navigator.onLine); 





window.addEventListener('online', connectionStateChange); 
window.addEventListener('offline', connectionStateChange); 


bt 
// 


A 
4 


当然 ,到 底 怎么 才 算 联网 取决 于 浏览 吉 与 系统 实现 。 有 些 浏览 器 可 能 会 认为 只 要 连接 到 


设备 联网 时 : 


Lrue 





设备 断 网 时 : 


false 


“在 线 ”"， 而 不 管 是 否 真正 接 入 了 互联 网 。 


navigator 对 象 还 暴露 了 NetworkInformation API, 可 以 通过 navigator .connection 属性 使 用 。 





这 个 API 提 供 了 一 些 只 读 属 性 ， 并 为 连接 属性 变化 事件 处 理 程序 定义 了 一 个 事件 对 象 。 





口 





口 


由 











以 下 是 NetworkInformation API 暴露 的 属性 。 
口 aownlink: 整数 ， 表 示 当 前 设备 的 带宽 ( 以 Mbit/s 为 单位 )， 舍 人 到 最 接近 的 25kbit/s。 这 个 值 





可 能 会 根据 历史 网 络 吞 吐 量 计算 ， 也 可 能 根据 连接 技术 的 能 力 来 计算 。 





























F 何 时 候 , 都 可 以 通过 navigator. 





局 域 网 就 算 

















D aown1inkMax: 整数 ,表示 当前 设备 最 大 的 下 行 带 宽 ( 以 Mbit/s 为 单位 )， 根 据 网 络 的 第 一 跳 来 





确定 。 因 为 第 一 跳 不 一 定 反 映 端 到 端的 网 络 速 度 ， 所 以 这 个 值 只 能 用 作 粗 略 的 上 限 值 。 











ffectiveType: 字符 串 枚 举 值 ， 表 示 连 接 速 度 和 质量 。 这 些 值 对 应 不 同 的 蜂窝 数据 网 络 连 接 








技术 ， 但 也 用 于 分 类 无 线 网 络 。 这 个 值 有 以 下 4 种 可 能 。 
国 Slow-2g 

> 往返 时 间 > 2000ms 

> 下 行 带 宽 < 50kbit/s 
国 2 














> 2000ms > 往返 时 间 二 1400ms 
> 70kbit/s > 下 行 带 宽 = 50kbit/s 


国 3g 
> 1400ms > 往返 时 间 二 270ms 
> 700kbit/s > 下 行 带宽 = 70kbit/s 
国 49 
> 270ms > 往返 时 间 三 0ms 
> 下 行 带宽 三 700kbit/s 





络 否 吐 量 计算 ,也 可 能 根据 连接 技术 的 能 力 来 计算 。 

type: 字符 串 枚 举 值 ， 表 示 网 络 连接 技术 。 这 个 值 可 能 为 下 列 值 之 一 。 
图 bluetooth: 蓝牙 。 

四 cellular: 蜂窝 。 

图 ethernet: 以 太 网 。 

图 none: 无 网 络 连接 。 相 当 于 navigator.onLine === false。 





口 rtt: 毫秒 ， 表 示 当 前 网 络 实际 的 往返 时 间 ， 侈 人 为 最 接近 的 25 毫秒 。 这 个 值 可 能 根据 历史 网 
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图 mixed: 多 种 网 络 混 合 。 
加 other: 其 他 。 

图 unknown: 不 确定 。 

国 wifi: Wi-Fi。 

国 wimax: WiIMAX。 

口 saveData: 布尔 值 ， 表 示 用 户 设备 是 否 启用 了 “ 节 流 ”(reduced data ) 模式 。 

口 onchange: 事件 处 理 程序 , 会 在 任何 连接 状态 变化 时 激发 一 个 change 事件 。 可 以 通过 navigator. 
connection.addEventListener('change',changeHandler) 或 navigator.connection 
onchange = changeHandler 等 方式 使 用 。 

3. Battery Status API 
浏览 器 可 以 访问 设备 电池 及 充电 状态 的 信息 。navigator.getBattery () 方 法 会 返回 一 个 期 约 实 
例 ， 解 决 为 一 个 BatteryManager 对 象 。 


navigator.getBattery() .then((b) => console.1log(b)); 
// BatteryManager { ... } 


BatteryManager 包含 4 个 只 读 属 性 ， 提 供 了 设备 电池 的 相关 信息 。 
口 charging: 布尔 值 ， 表 示 设 备 当 前 是 否 正 接 入 电源 充电 。 如 果 设 备 没 有 电池 ， 则 返回 true。 
口 chargingTime: 整数 ,表示 预计 离 电 池 充 满 还 有 多 少 秒 。 如 果 电 池 已 充满 或 设备 没有 电池 ， 则 
返回 0。 
口 pe 整数 , 表示 预计 离 电量 耗 尽 还 有 多 少 秒 。 如 果 设 备 没有 电池 , 则 返回 Infinity。 
口 level: 浮 点 数 ， 表 示 电 量 百分比 。 电 量 完全 耗 尽 返回 0.0， 电池 充满 返回 1.0。 如 果 设 备 没 有 电 
池 ， 站 1.0。 

这 个 API 还 提供 了 4 个 事件 属性 , 可 用 于 设置 在 相应 的 电池 事件 发 生 时 调用 的 回调 函数 。 可 以 通过 

给 BatteryManager 添加 事件 监听 器 ， 也 可 以 通过 给 事件 属性 赋值 来 使 用 这 些 属性 。 


口 onchargingchange 




































































































































































三 















































本 








DQ onchargingtimechange 
DQ ondischargingtimechange 





D onlevelchange 


navigator.getBattery().then((battery) => { 
// 添加 充电 状态 变化 时 的 处 理 程序 





const chargingChangeHandler = () => console.log('chargingchange'); 
battery.onchargingchange = chargingChangeHandler; 
// 或 


battery.addEventListener('chargingchange', chargingChangeHandler); 


// 添加 充电 时 间 变 化 时 的 处 理 程序 


const chargingTimeChangeHandler = () => console.log('chargingtimechange'); 
battery.onchargingtimechange = chargingTimeChangeHandler; 
// 或 


battery.addEventListener('chargingtimechange', chargingTimeChangeHandler); 


// 添加 放电 时 间 变 化 时 的 处 理 程序 EE 
co i i i () “qi i; 


nst dischargingTimeChangeHandler = => console.log('dischargingtimechange 
battery.ondischargingtimechange = dischargingTimeChangeHandler; 
// 或 


battery.addEventListener('dischargingtimechange', dischargingTimeChangeHandler); 
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// 添加 电量 百分比 变化 时 的 处 理 程序 

const levelChangeHandler = ( 

battery.onlevelchange = leve 

或 

battery.addEventListener('le 
i 


13.3.3 ”硬件 


浏览 器 检测 硬件 的 能 力 相 当 有 限 。 不 过 ，navigator 对 象 还 是 通过 


1. 处 理 器 核心 数 
navigator.hardwareConcurren 
数 的 一 个 整数 值 ( 如 果 核心 数 无 法 而 
最 大 工作 线程 数量 ， 不 一 定 是 实际 上 


2. 设备 内 存 大 小 






































) => console.log('levelchange'); 
lChangeHandler; 


velchange', levelChangeHandler); 

















自 














些 属性 提 


且 








cy 属性 


返回 浏览 器 支持 的 逻辑 处 理 器 核心 数量 ， 


供 了 基本 信 


/oO 





包含 表示 核心 








定 , 这 个 值 就 是 1 )。 关键 在 于 ,这 个 值 表示 浏览 器 可 以 并 行 执行 的 
入 CPU 核心 数 。 





navigator.deviceMemory 属性 返回 设备 大 致 的 系统 内 存 大 小 ， 包 含 单位 为 GB 的 浮 点 数 ( 舍 人 


为 最 接近 的 2 的 寡 : 512MB 返回 0.5，4 
3. 最 大 触 点 数 


navigator .maxTouchPoints 属性 返回 触摸 


13.4 


客户 端 检 测 是 JavaScript 


小 结 














GB 返回 4 )。 


= 


县 





屏 支持 的 最 大 关联 触 点 数 





| 


争议 最 多 的 话题 之 一 。 因 为 不 同 浏览 器 之 间 存 在 差异 





据 浏 览 絮 的 能 力 来 编写 不 同 的 代码 。 客 





口 能 力 检测 ， 在 使 用 之 前 先 测试 浏览 器 的 特定 能 力 。 例 如 ， 











户 端 检测 有 不 少 方式 ， 但 下 面 两 种 用 得 最 多 。 


， 包 含 


一 个 整数 值 。 


， 所 以 经 常 需要 根 















































































































































本 可 以 在 调用 茶 


个 函数 之 前 先 检 查 








它 是 否 存在 。 这 种 客户 端 检 测 方式 可 以 让 开发 者 不 必 考 虑 特定 的 浏览 器 或 版 本 ， 而 只 需 关 注 某 
些 能 力 是 否 存在 。 能 力 检 测 不 能 精确 地 反映 特定 的 浏览 器 或 版 本 。 

口 用 户 代理 检测 ， 通 过 用 户 代理 字符 串 确 定 浏览 器 。 用 户 代 理 字符 串 包 含 关 于 浏览 器 的 很 多 信息 ， 
通常 包括 浏览 器 、 平 台 、 操 作 系 统 和 浏览 器 版 本 。 用 户 代理 字符 串 有 一 个 相当 长 的 发 展 史 ， 很 
多 浏览 器 都 试图 欺骗 网 站 相信 自己 是 别 的 浏览 器 。 用 户 代理 检测 也 比较 麻烦 ， 特 别 是 涉及 Opera 
会 在 代理 字符 串 中 隐藏 自己 信息 的 时 候 。 即 使 如 此 ， 用 户 代 理 字符 串 也 可 以 用 来 确定 浏览 器 使 
用 的 泻 染 引擎 以 及 平台 ， 包 括 移动 设备 和 游戏 机 。 














在 选择 客户 端 检测 方法 时 ， 首 选 是 使 用 能 力 检测 。 特 殊 能 力 检测 要 放 在 次 要 位 置 ， 作 为 决定 代码 逻 











辑 的 参考 。 
浏览 吉 
利用 这 些 API， 可 以 获取 关于 操作 系统 、 


用 户 代 型 











检测 是 最 后 一 个 选择 ， 因 为 它 过 于 依赖 用 户 代 理 字符 
由 提供 了 一 些 软件 和 硬件 相关 的 信 ， 





已 
Po 

















息 。 这 些 信息 通过 screen 和 naviga 





tor 对 象 暴露 出 来 。 








浏览 器 、 硬 件 、 设 备 位 置 、 电 池 状 态 等 方 卫 








i 的 准确 信息 。 





% 14 章 
DOM 


本 章 内 容 

口 理解 文档 对 象 模 型 (DOM ) 的 构成 
口 节点 类 型 

口 浏览 句 兼 容 性 
口 MutationObserver 接口 视频 讲解 














文档 对 象 模型 (DOM，Document Object Model ) 是 HTML 和 XML 文档 的 编程 接口 。DOM 表示 
1 多 层 节点 构成 的 文档 ， 通 过 它 开发 者 可 以 添加 、 删 除 和 修改 页 面 的 各 个 部 分 。 脱 胎 于 网 景 和 微软 早 
期 的 动态 HTML (DHTML ，Dynamic HTML )，DOM 现在 是 真正 跨 平台 、 语 言 无 关 的 表示 和 操作 网 页 
的 方式 。 
DOM Level 1 在 1998 年 成 为 W3C 推荐 标准 ， 提 供 了 基本 文档 结构 和 查询 的 接口 。 本 章 之 所 以 介绍 
DOM， 主 要 因为 它 与 浏览 器 中 的 HTML 网 页 相关 ， 并 且 在 JavaScript 中 提供 了 DOM API。 



























































注意 IE8 及 更 低 版 本 中 的 DOM 是 通过 COM 对 象 实现 的 。 这 意味 着 这 些 版 本 的 IE 中 ， 


DOM 对 象 跟 原生 JavaScript 对 象 具有 不 同 的 行为 和 功能 。 





14.1 节点 层级 


任何 HTML 或 XML 文档 都 可 以 用 DOM 表示 为 一 个 由 节点 构成 的 层级 结构 。 节 点 分 很 多 类 型 ， 每 
种 类 型 对 应 着 文档 中 不 同 的 信息 和 (或 ) 标记 ， 也 都 有 自己 不 同 的 特性 、 数 据 和 方法 ， 而 且 与 其 他 类 型 
有 某 种 关系 。 这 些 关 系 构成 了 层级 ,让 标记 可 以 表示 为 一 个 以 特定 节点 为 根 的 树 形 结构 .以 下 面 的 HIML 
为 例 : 


<html> 
<head> 
<title>Sample Page</title> 
</head> 
<body> 
<p>Hello World!</p> 
</body> 
</html> 


如 果 表示 为 层级 结构 ， 则 如 图 14-1 所 示 。 
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Document 


加 Element html 


Element head 






































Element title 














Text Sample Page 




















Element pbody 


ee 了 
冉 Text Hello world! 


图 14-1 


其 中 ,gocument 节点 表示 每 个 文档 的 根 节点 。 在 这 里 , 根 节 点 的 唯一 子 节 点 是 <html> 元 素 , 我 们 称 之 
为 文档 元 素 ( documentElement )。 文档 元 素 是 文档 最 外 层 的 元 素 ， 所 有 其 他 元 素 都 存在 于 这 个 元 素 之 
内 。 每 个 文档 只 能 有 一 个 文档 元 素 。 在 HTML 页 面 中 ,文档 元 素 始终 是 <zhtml > 元 素 。 在 XML 文档 中 ， 
则 没有 这 样 预定 义 的 元 素 ， 任 何 元 素 都 可 能 成 为 文档 元 素 。 

HTML 中 的 每 段 标记 都 可 以 表示 为 这 个 树 形 结构 中 的 一 个 节点 。 元 素 节 点 表示 HTML 元 素 ， 属 | 
节点 表示 属性 ， 文档 类 型 节点 表示 文档 类 型 ,注释 节点 表示 注释 。DOM 中 总 共有 12 种 节点 类 型 ， 这 些 
类 型 都 继承 一 种 基本 类 型 。 














































































































民主 





14.1.1 Node 类 型 


DOM Level 1 描述 了 名 为 Node 的 接口 ， 这 个 接口 是 所 有 DOM 节点 类 型 都 必须 实现 的 。Nogde 接口 
在 JavaScript 中 被 实现 为 Node 类 型 ,在 除了 正之 外 的 所 有 浏览 都 可 以 直接 访问 这 个 类 型 ,在 JavaScript 
中 ， 所 有 节点 类 型 都 继承 Node 类 型 ， 因 此 所 有 类 型 都 共享 相同 的 基本 属性 和 方法 。 
每 个 节点 都 有 nodeType 属性 ， 表 示 该 节点 的 类 型 。 节 点 类 型 由 定义 在 Node 类 型 上 的 12 个 数值 
常量 表示 : 
口 Nodqe .ELEMENT_NODE (1) 
口 Node .ATTRIBUTE_NODE (2 ) 
口 Node .TEXT_NODE (3 ) 
口 Node .CDATA_SECTION_NODE (4) 
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Node.ENTITY_ REFERENCE_NODE (5) 
Node.ENTITY_NODE (6) 
Node. PROCESSING_INSTRUCTION_NODE (7) 
Node .COMMENT_NODE (8 ) 

Node .DOCUMENT_NODE (9) 

Node .DOCUMENT_TYPE_NODE (10) 

Node .DOCUMENT_ FRAGMENT_NODE (11) 
Node .NOTATION_NODE ( 12 ) 

节点 类 型 可 通过 与 这 些 常量 比较 来 确定 ， 比 如 : 


if (someNode.nodeType == Node.ELEMENT_ NODE){ 
alert ("Node is an element."); 


















































DOOOOODO DO 



































这 个 例子 比较 了 someNode .nodeType 与 Node.ELEMENT_NODE 常量 。 如 果 两 者 相等 ， 则 意味 着 
someNode 是 一 个 元 素 节 点 。 

浏览 器 并 不 支持 所 有 节点 类 型 。 开 发 者 最 常用 到 的 是 元 素 节 点 和 文本 节点 。 本 章 后 面 会 讨论 每 种 节 
点 受 文 持 的 程度 及 其 用 法 。 

1. nodeName 与 nodeValue 

nodeName 与 nodeValue 保存 着 有 关节 点 的 信息 。 这 两 个 属性 的 值 完 全 取决 于 节点 类 型 。 在 使 月 
这 两 个 属性 前 ， 最 好 先 检测 节点 类 型 ， 如 下 所 示 : 


if (someNode.nodeType == 1){ 
value = someNode.nodeName; // 会 显示 元 素 的 标签 名 
} 


在 这 个 例子 中 ， 先 检查 了 节点 是 不 是 元 素 。 如 果 是 ， 则 将 其 nogdeName 的 值 赋 给 一 个 变量 。 对 元 素 
而 言 ，nodeName 始终 等 于 元 素 的 标签 名 ， 而 nodeValue 则 始终 为 null。 

2. 节点 关系 

文档 中 的 所 有 节点 都 与 其 他 节点 有 关系 。 这 些 关 系 可 以 形容 为 家 族 关 系 , 相当 于 把 文档 树 比 作家 谱 。 
在 HTML 中 ,，<bodqy> 元 素 是 <html> 元 素 的 子 元 素 , 而 <html> 元 素 则 是 <body> 元 素 的 父 元 素 。<head> 
元 素 是 <boqy> 元 素 的 同胞 元 素 ， 因 为 它们 有 共同 的 父 元 素 <html>。 
每 个 节点 都 有 一 个 childaNodes 属性 , 其 中 包含 一 个 NodeList 的 实例 。NodeList 是 一 个 类 数组 
对 象 , 用 于 存储 可 以 按 位 置 存 取 的 有 序 节 点 。 注 意 , NodeList 并 不 是 Array 的 实例 , 但 可 以 使 用 中 括 
号 访问 它 的 值 ， 而 且 它 也 有 length 属性 。NodeList 对 象 独特 的 地 方 在 于 ， 它 其 实 是 一 个 对 DOM 结 
构 的 查询 ， 因 此 DOM 结构 的 变化 会 自动 地 在 NodeList 中 反映 出 来 。 我们 通常 说 NodeList 是 实时 的 
活动 对 象 ， 而 不 是 第 一 次 访问 时 所 获得 内 容 的 快照 。 

下 面 的 例子 展示 了 如 何 使 用 中 括号 或 使 用 item() 方 法 访问 NodeList 中 的 元 素 : 


let firstChild = someNode.childNodes{[0]; 
let secondChild = someNode.childNodes.item(1); 
let count = someNode.childNodes.length; 


无 论 是 使 用 中 括号 还 是 item() 方 法 都 是 可 以 的 ， 但 多数 开 发 者 倾向 于 使 用 中 括号 ， 因 为 它 是 一 个 
类 数组 对 象 。 注 意 ，length 属性 表示 那 一 时 刻 NodeList 中 节点 的 数量 。 使 用 Array .prototype. 
slice() 可 以 像 前 面 介绍 arguments 时 一 样 把 NodeList 对 象 转换 为 数组 。 比 如 : 14 
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let arrayOfNodes = Array.prototype.slice.call (someNode.childNodes,0); 


当然 ,使 用 ES6 的 Array. from() 静 态 方法 ， 可 以 替换 这 种 笨拙 的 方式 : 


Array.from(someNode.childNodes); 


每 个 节点 都 有 一 个 parentNode 属性 , 指向 其 DOM 树 中 的 父 元 素 。chilaNodes 中 的 所 有 节点 都 

有 同一 个 父 元 素 , 因此 它们 的 parentNode 属性 都 指向 同一 个 节点 。 此 外 ，chilaNodes 列表 中 的 每 个 

节点 都 是 同一 列表 中 其 他 节点 的 同胞 节点 。 而 使 用 previoussibling 和 nextSsibling 可 以 在 这 个 列 

表 的 节点 间 导 航 。 这 个 列表 中 第 一 个 节点 的 previousSibling 属 | 最 后 一 个 节点 的 
nextSibling 属性 也 是 nul1， 如 下 所 示 : 





let arrayOfNodes = 






























































XE “iid:, 











if (someNode.nextSibling === null)f{ 
alert ("Last node in the parent's childNodes list."); 
} else if (someNode.previousSibling === null)t 


alert ("First node in the parent's childNodes list."); 
} 


注意 , 如 果 childNodes 中 只 
null。 

父 节 点 和 它 的 第 一 个 及 最 后 一 个 子 节 点 也 有 专门 属性 : firstchild 和 lastchild 分 别 指向 
chilgdNodes 中 的 第 一 个 和 最 后 一 个 子 节点 。someNode.firstchilg 的 值 始 终 等 于 someNode. 
childNodqes[0] ， 而 someNode.1lastCchilgd 的 值 始终 等 于 someNode.childNodes[someNode. 
childNodes .length-1]。 如 果 只 有 一 个 子 节 点 , 则 firstchild 和 1astchilg 指向 同一 个 节点 。 如 
果 没 有 子 节 点 ， 则 firstchila 和 lastchilg 都 是 nu11。 上 述 这 些 节 点 之 间 的 关系 为 在 文档 树 的 节 
点 之 间 导 航 提供 了 方便 。 图 14-2 形象 地 展示 了 这 些 关系 。 








一 个 节点 , 则 它 的 previousSibling 和 nextsibling 属性 都 是 
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nextSibling nextSibling 
a | 
previousSibling previousSsibling 
childNodes 
图 14-2 
有 了 这 些 关 系 ，chilgNodes 属性 的 作用 远 远 不 止 是 必 备 属性 那么 简单 了 。 这 是 因为 利用 这 些 关 系 


上 针 ， 几 乎 可 A tt dan 反 
» 这 个 方法 如 果 


的 方法 是 haschildNodes ( 








childNodes 的 length 





























， 而 这 种 便利 性 是 chilgNodes 的 最 大 亮点 。 还 有 一 个 便利 








性 这 个 方法 无 疑 更 方便 。 








果 返 回 true 则 说 明 节 点 有 一 个 或 多 个 子 节 点 。 相 比 查 询 


最 后 还 有 一 个 所 有 节点 都 共享 的 关系 。ownerDocument 属性 是 一 个 指向 代表 整个 文档 的 文档 节点 
的 指针 。 所 有 节点 都 被 创建 它们 (或 自己 所 在 ) 的 文档 所 拥有 ， 因 为 一 个 节点 不 可 能 同时 存在 于 两 个 或 
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者 多 个 文档 中 。 这 个 属性 为 迅速 访问 文档 节点 提供 了 便利 ， 因 为 无 需 在 文档 结构 中 逐 层 上 溯 了 。 








注意 虽然 所 有 节点 类 型 都 继承 了 Node， 但 并 非 所 有 节点 都 有 子 节点 。 本 章 后 面 会 讨论 


不 同 节点 类 型 的 差异 。 





3. 操纵 节点 

因为 所 有 关系 指针 都 是 只 读 的 ， 所 以 DOM 又 提供 了 一 些 操纵 节点 的 方法 。 最 常用 的 方法 是 
appendchild() ， 用 于 在 chilgNodes 列表 末尾 添加 节点 。 添 加 新 节点 会 更 新 相关 的 关系 指针 ， 包 括 
父 节 点 和 之 前 的 最 后 个 子 节点 。 appendCchi1ld() 方 法 返回 新 添加 的 节点 ， 如 下 所 示 : 


let returnedNode = someNode.appendChild (newNode); 
alert (returnedNode == newNode); // true 
alert (someNode.lastChild == newNode); // true 


如 果 把 文档 中 已 经 存在 的 节点 传 给 appendchi1d(), 则 这 个 节点 会 从 之 前 的 位 置 被 转移 到 新 位 置 。 
即使 DOM 树 通过 各 种 关系 指针 维系 ， 一 个 节点 也 不 会 在 文档 中 同时 出 现在 两 个 或 更 多 个 地 方 。 因此 ， 
如 果 调 用 appendchila() 传 人 父 元 素 的 第 一 个 子 节点 ， 则 这 个 节点 会 成 为 父 元 素 的 最 后 一 个 子 节 点 ， 
如 下 所 示 : 


// 假设 someNode 有 多 个 子 节点 

let returnedNode = someNode.appendChild(someNode.firstChild); 
alert (returnedNode == someNode.firstChild); // false 

alert (returnedNode == someNode.lastChild); // true 


如 果 想 把 节点 放 到 chilgNodes 中 的 特定 位 置 而 不 是 末尾 ， 则 可 以 使 用 insertBefore() 方 法 。 
这 个 方法 接收 两 个 参数 : 要 插入 的 节点 和 参照 节点 。 调 用 这 个 方法 后 ， oe 变 成 参照 节点 的 
前 一 个 同胞 节点 ， 并 被 返回 。 如 果 参 照 节点 是 nul1， 则 insertBefore() 与 appendchild() 效 果 相 
同 ， 如 下 面 的 例子 所 示 : 

// 作为 最 后 一 个 子 节点 插入 


returnedNode = SomeNode.insertBefore (newNodqe，mnul1) ， 








































































































alert (newNode == someNode.lastChild); // true 

// 作为 新 的 第 一 个 子 节 点 插入 

returnedNode = someNode.insertBefore (newNode, someNode.firstChild); 
alert (returnedNode == newNode); // true 

alert (newNode == someNode.firstChild); // true 


// 插入 最 后 一 个 子 节点 前 面 
returnedNode = someNode.insertBefore (newNode, someNode.lastChild); 
alert (newNode == someNode.childNodes[someNode.childNodes.length - 2]); // true 


appendChild() 和 insertBefore() 在 插入 节点 时 不 会 删除 任何 已 有 节点 。 相 对 地 ， 
replaceChi1d() 方 法 接收 两 个 参数 : 要 插入 的 节点 和 要 替换 的 节点 。 要 替换 的 节点 会 被 返回 并 从 文档 
树 中 完全 移 除 ， 要 插入 的 节点 会 取而代之 。 下 面 看 一 个 例子 : 


// 替换 第 一 个 子 节点 
let returnedNode = someNode.replaceChild (newNode, someNode.firstChild); 





























// 替换 最 后 一 个 子 节点 
returnedNode = someNode.replaceChild (newNode, someNode.lastChild); 


使 用 *eplacechila() 搬 入 一 个 节点 后 , 所 有 关系 指针 都 会 从 被 替换 的 节点 复制 过 来 。 虽 然 被 替换 
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的 节点 从 技术 上 说 仍然 被 同一 个 文档 所 拥有 ， 但 文档 中 已 经 没有 它 的 位 置 。 


























要 移 除 节点 而 不 是 替换 节点 ， 可 以 使 用 removechi1la() 方 法 。 这 个 方法 接收 一 个 参数 ， 即 要 移 除 





的 节点 。 被 移 除 的 节点 会 被 返回 ， 如 下 面 的 例子 所 示 : 


// 删除 第 一 个 子 节点 
let formerFirstChild = someNode.removeChild(someNode.firstChild); 





// 删除 最 后 一 个 子 节点 
let formerLastChild = someNode .removechild(someNode.1astCchild) ， 


与 replaceChi1ld() 方 法 一 样 , 通过 removechila() 被 移 除 的 节点 从 技术 上 说 仍然 被 同一 个 文档 














所 


有 有， 但 文档 中 已 经 没有 它 的 位 置 。 





























上 面 介绍 的 4 个 方法 都 用 于 操纵 某 个 节点 的 子 元 素 ， 也 就 是 说 使 用 它们 之 前 必须 先 取 得 父 节 点 (使 























用 前 面 介绍 的 parentNode 属性 )。 并 非 所 有 节点 类 型 都 有 子 节 点 ， 如 果 在 不 支持 子 节 点 的 节点 上 调用 
这 些 方法 ， 则 会 导致 抛 出 错误 。 


AS 





4. 其 他 方法 
所 有 节点 类 型 还 共享 了 两 个 方法 。 第 一 个 是 cloneNode () ， 会 返回 与 调用 它 的 节点 一 模 一 样 的 节 
cloneNode () 方 法 接收 一 个 布尔 值 参数 ， 表 示 是 否 深 复制 。 在 传人 true 参数 时 ， 会 进行 深 复制 ， 















































即 复制 节点 及 其 整个 子 DOM 树 。 如 果 传人 false， 则 只 会 复制 调用 该 方法 的 节点 。 复 制 返回 的 节点 属 





























dl 








于 文档 所 有 ， 但 尚未 指定 父 节 点 ， 所 以 可 称 为 孤儿 节点 ( orphan )。 可 以 通过 appenachild() 、 
insertBefore() 或 eplacechild() 方 法 把 孤儿 节点 添加 到 文档 中 。 以 下 面 的 HTML 片段 为 例 : 




















<ul> 
<li>item 1</1i> 
<li>item 2</1i> 
<li>item 3</1i> 
</ul> 


如 果 myList 保存 着 对 这 个 <ul> 元 素 的 引用 , 则 下 列 代码 展示 了 使 用 cloneNode () 方 法 的 两 种 方式 : 


let deepList = myList.cloneNode (true); 
alert (deepList.childNodes.length); // 3 (IE9 之 前 的 版 本 ) 或 7 (其 他 浏览 器 ) 




















Pe 














let shallowList = myList.cloneNode (false); 
alert (shallowList.childNodes.length); // 0 


在 这 个 例子 中 ，deepList 保存 着 myList 的 副本 。 这 意味 着 aeepList 有 3 个 列表 项 ， 每 个 列表 


项 又 各 自 包 含 文本 。 变 量 shallowList 则 保存 着 myList 的 浅 副 本 ， 因 此 没有 子 节 点 。 
deepList .childNodes.1length 的 值 会 因 IE8 及 更 低 版 本 和 其 他 浏览 器 对 空格 的 处 理 方式 而 不 同 。IE9 
之 前 的 版 本 不 会 为 空格 创建 节点 。 


y= 








注意 cloneNode() 方 法 不 会 复制 添加 到 DOM 节点 的 JavaScript 属性 , 比如 事件 处 理 程 
序 。 这 个 方法 只 复制 HTML 属性 ， 以 及 可 选 地 复制 子 节点 。 除 此 之 外 则 一 概 不 会 复制 。 


IE 在 很 长 时 间 内 会 复制 事件 处 理 程序 ， 这 是 一 个 bug， 所 以 推荐 在 复制 前 先 删除 事件 处 
理 程序 。 











本 节 要 介绍 的 最 后 一 个 方法 是 normalize () 。 这 个 方法 唯一 的 任务 就 是 处 理 文档 子 树 中 的 文本 节 
由 于 解析 器 实现 的 差异 或 DOM 操作 等 原因 ， 可 能 会 出 现 并 不 包含 文本 的 文本 节点 , 或 者 文本 节点 
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用 normalize () 方 法 会 检测 这 个 节点 的 所 有 后 代 ， 从 中 搜索 上 述 两 种 
两 个 同胞 节点 是 相 邻 的 ， 则 将 其 合并 为 一 个 文本 节点 。 


之 间 互 为 同胞 关系 。 在 节点 上 调 
情形 。 如 果 发 现 空 文本 节点 ， 则 将 其 删除 ， 如 细 
这 个 方法 将 在 本 章 后 面 进一步 讨论 。 




















14.1.2 Document 类 型 


Document 类 型 是 JavaScript 中 表示 文档 节点 的 类 型 。 在 浏览 器 中 ， 文 档 对 象 document 
HTMLDocument 的 实例 ( HTMLDocument 继承 Document )， 表 示 整 个 HTML 页 男 
对 象 的 属性 ， 因 此 是 一 个 全 
口 nodeType 等 于 9; 
口 nodeName 值 为 "#document"; 

口 nodeValue 值 为 null; 

口 parentNode 值 为 null; 

口 ownerDocument 值 为 null; 

口子 节点 可 以 是 DocumentType (最 多 一 个 )、] 
或 comment 类 型 。 

Document 类 型 可 以 表示 HTML 页 面 或 其 他 XML 文档 , 但 最 常用 的 还 是 通过 HTMLDocument 的 实 
例 取得 document 对 象 。document 对 象 可 用 于 获取 关于 页 面 的 信息 以 及 操纵 其 外 观 和 底层 结构 。 

1. 文档 子 节点 

虽然 DOM 规范 规定 
Instruction 或 Comment, 但 也 提供 了 两 个 访问 子 节点 的 快 损 
性 ， 始 终 指向 HTML 页 面 


是 











ij。document 是 window 





























局 对 象 。Document 类 型 的 节点 有 以 下 特征 : 

















plement (最 多 一 个 )、ProcessingInstruction 


























Document 节点 的 子 节 点 可 以 是 DocumentType、 
方式 。 第 
1 的 <html> 元 素 。 虽 然 document .childNodes 


ElLement 、Processing- 




















个 是 aocumentElement 属 
! 始 终 有 <html> 元 素 , 但 




































































使 用 documentElement 属性 可 以 更 快 更 直接 地 访问 该 元 素 。 假 如 有 以 下 简单 的 页 面 : 
居中 
<body> 
</body> 
</html> 


浏览 器 解析 完 这 个 页 面 之 后 ,文档 只 有 一 个 子 节 点 ， 即 <html> 元 素 。 这 个 元 素 既 可 以 通过 



































documentElement 属性 获取 ， 也 可 以 通过 chilgNoges 列表 访问 ， 如 下 所 示 : 

let html = document .documentElement; // 取得 对 <html> 的 引用 

alert (html === document.childNodes{[0]); // true 

alert (html === document.firstChild); 大力 区 二 

这 个 例子 表明 aocumentElement 、firstCchild 和 childqNodqes[0] 都 指向 同一 个 值 , 即 <html> 
元 素 。 

作为 HTMLDocument 的 实例 ，document 对 象 还 有 一 个 bogdy 属性 ， 直 接 指向 <boqvy> 元 素 。 因 为 
这 个 元 素 是 开发 者 使 用 最 多 的 元 素 ， 所 以 JavaScript 代码 中 经 常 可 以 看 到 document .body， 比 如 : 

let body = document .body; // 取得 对 <body> 的 引用 


所 有 主流 浏览 器 都 支持 document .documentElement 和 document .bodyo 
Document 类 型 男 一 种 可 能 的 子 节点 是 DocumentType。<!dqoctype> 标 签 是 文档 


让 信息 可 以 通过 aoctype 属性 (在 浏览 器 中 是 document .doctype ) 来 访问 ， 比 如 : 















































独立 的 部 分 ， 4 
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let doctype = document .doctype; // 取得 对 <!1doctype> 的 引用 


另外 , 严格 来 讲 出 现在 <html> 元 素 外 面 的 注释 也 是 文档 的 子 节 点 ,它们 的 类 型 是 comment。 不 过 ， 
由 于 浏览 器 实现 不 同 ， 这 些 注释 不 一 定 能 被 识别 ， 或 者 表现 可 能 不 一 致 。 比 如 以 下 HTML 页 面 : 


<!-- 第 一 条 注释 --> 
<html> 
<body> 
































</body> 
</html> 
<!-- 第 二 条 注释 --> 
这 个 页 面 看 起 来 有 3 个 子 节 点 : 注释 、<html> 元 素 、 注 释 。 逻 辑 上 讲 ，dqocument .childNogdes 
应 该 包含 3 项 ， 对 应 代码 中 的 每 个 节点 。 但 实际 上 ， 浏 览 器 有 可 能 以 不 同方 式 对 待 <html> 元 素 外 部 的 
注释 ， 比 如 忽略 一 个 或 两 个 注释 。 
一 般 来 说 , appendChild()、removeChild() 和 replacechi1ld() 方 法 不 会 用 在 document 对 象 
3 这 是 因为 文档 类 型 (如 果 存 在 ) 是 只 读 的， 而 且 只 能 有 一 个 Element 类 型 的 子 节点 ( 即 <html>， 
已 经 存在 了 )。” 
2. 文档 信息 
document 作为 HTMLDocument 的 实例 , 还 有 一 些 标准 Document 对 象 上 所 没有 的 属性 。 这 些 属性 
提供 浏览 器 所 加 载 网 页 的 信息 。 其 中 第 一 个 属性 是 title, 包含 <title> 元 素 中 的 文本 , 通常 显示 在 浏 
览 器 窗口 或 标签 页 的 标题 栏 。 通 过 这 个 属性 可 以 读 写 页 面 的 标题 , 修改 后 的 标题 也 会 反映 在 浏览 器 标题 
栏 上 。 不 过 ,修改 fitle 属性 并 不 会 改变 <title> 元 素 。 下 面 是 一 个 例子 : 
// 读 取 文档 标题 


let originalTitle = document .title; 































































































// 修改 文档 标题 

document .title = "New page title"; 

接 下 来 要 介绍 的 3 个 属性 是 URL、domain 和 referrer。 其 中 , URL 包含 当前 页 面 的 完整 URL ( 地 
址 栏 中 的 URL )，domain 包含 页 面 的 域名 ， 而 referrer 包含 链接 到 当前 页 面 的 那个 页 面 的 URL。 如 
果 当 前 页 面 没 有 来 源 , 则 referrer 属性 包含 空 字 符 串 。 所 有 这 些 信息 都 可 以 在 请 求 的 HTTP 头 部 信息 
! 获 取 ， 只 是 在 JavaScript 中 通过 这 几 个 属性 暴露 出 来 而 已 ， 如 下 面 的 例子 所 示 : 


// 取得 完整 的 URL 
let url = document .URL; 




























































































// 取得 域名 


let domain = document .domain; 


// 取得 来 源 


let referrer = document.referrer; 


URL 跟 域 名 是 相关 的 。 比 如 ， 如 果 document .URL 是 http://www.wrox.com/WileyCcDA/， 则 
document .domain 就 是 www .wrox .com。 


在 这 些 属性 中 ， 只 有 domain 属性 是 可 以 设置 的 。 出 于 安全 考虑 ,给 domain 属性 设置 的 值 是 有 限 
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元 素 是 HrMLHtmlElement 的 实例 , HTMLHtmlElement 继承 HTMLElement ,HTMLElement 继承 Element ,因此 HTML 
文档 可 以 包含 子 节点 ,但 不 能 多 于 一 个 。 一 一 译 者 注 
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制 的 。 如 果 URL 包含 子 域名 如 p2p.wrox.com， 则 可 以 将 aomain 设置 为 "wrox.com" (URL 包含 “www” 
时 也 一 样 ， 比 如 www .wrox.com)。 不 能 给 这 个 属性 设置 URL 中 不 包含 的 值 ， 比 如 : 
// 页 面 来 自 D2p.wrox.com 

















document .domain = "wrox.com"; // 成 功 


document .domain = "nczonline.net"; // 出 错 | 

当 页 面 中 包含 来 自 某 个 不 同 子 域 的 窗 格 ( <frame> ) 或 内 枫 窗 格 ( <iframe> ) 时 ,设置 
document .domain 是 有 用 的 。 因 为 跨 源 通信 存在 安全 隐患 , 所 以 不 同 子 域 的 页 面 间 无 法 通过 JavaScript 
通信 。 此 时 ,在 每 个 页 面 上 把 aocument .domain 设置 为 相同 的 值 , 这 些 页 面 就 可 以 访问 对 方 的 JavaScript 
对 象 了 。 比 如 ， 一 个 加 载 自 www.wrox.com 的 页 面 中 包含 一 个 内 骸 窗 格 ， 其 中 的 页 面 加 载 自 
Pp2p.wrox.com。 这 两 个 页 面 的 document .domain 包含 不 同 的 字符 串 ， 内 部 和 外 部 页 面相 互 之 间 不 能 
访问 对 方 的 JavaScript 对 象 。 如 果 每 个 页 面 都 把 document .domain 设置 为 wrox.com， 那 这 两 个 页 面 
之 间 就 可 以 通信 了 。 

浏览 器 对 aomain 属性 还 有 一 个 限制 ， 即 这 个 属性 一 旦 放松 就 不 能 再 收 紧 。 比 如 ， 把 
document .domain 设置 为 "wrox.com" 之 后 ， 就 不 能 再 将 其 设置 回 "p2p .wrox.com"， 后 者 会 导致 错 
误 ， 比 如 : 

// 页 面 来 自 D2p.wrox.corm 





























































































































document .domain = "wrox.com"; // 放松 ， 成功 


document .domain = "p2p.wrox.com"; // 收 紧 ， 错 误 ! 

3. 定位 元 素 

使 用 DOM 最 常见 的 情形 可 能 就 是 获取 某 个 或 某 组 元 素 的 引用 ， 然 后 对 它们 执行 某 些 操作 。 
document 对 象 上 暴露 了 一 些 方法 ， 可 以 实现 这 些 操作 。getElementById() 和 getElementsBy- 
TagName () 就 是 Document 类 型 提供 的 两 个 方法 。 

getElementById() 方 法 接收 一 个 参数 ， 即 要 获取 元 素 的 ID ， 如 果 找 到 了 则 返回 这 个 元 素 ， 如 果 
没 找到 则 返回 nul1。 参 数 ID 必须 跟 元 素 在 页 面 中 的 ia 属性 值 完全 匹配 ， 包 括 大 小 写 。 比 如 页 面 中 有 
以 下 元 素 : 

<div id="myDiv">Some text</div> 


可 以 使 用 如 下 代码 取得 这 个 元 素 : 






















































































let div = document .getElementById("myDiv"); // 取得 对 这 个 <div> 元 素 的 引用 

但 参数 大 小 写 不 匹配 会 返回 nul1: 

let div = document .getElementById("mydiv"); // null 

如 果 页 面 中 存在 多 个 具有 相同 ID 的 元 素 , 则 getElementById() 返 回 在 文档 中 出 现 的 第 一 个 元 素 。 























getElementsByTagName () 是 男 一 个 常用 来 获取 元 素 引 用 的 方法 。 这 个 方法 接收 一 个 参数 ， 即 要 
获取 元 素 的 标签 名 ， 返 回 包含 零 个 或 多 个 元 素 的 NodeList。 在 HTML 文档 中 ， 这 个 方法 返回 一 个 
HTMLCollection 对 象 。 考 虑 到 二 者 都 是 “实时 ”列表 ，HTMLCollection 与 NodeList 是 很 相似 的 。 
例如 ， 下 面 的 代码 会 取得 页 面 中 所 有 的 <img> 元 素 并 返回 包含 它们 的 HTMLCollection: 


let images = document .getElementsByTagName ("img"); 
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这 里 把 返回 的 HTMLCollection 对 象 保存 在 了 变量 images 中 。 与 NodeList 对 象 一 样 ， 也 可 以 
使 用 中 括号 或 item() 方 法 从 HTMLCollection 取得 特定 的 元 素 。 而 取得 元 素 的 数量 同样 可 以 通过 
length 属性 得 知 ， 如 下 所 示 : 




















alert (images.length); // 图 片 数量 
alert (images [0] .src); // 第 一 张 图 片 的 src 属性 
alert (images.item(0) .src); // 同上 








HTMLCollection 对 象 还 有 一 个 额外 的 方法 namedItem() ， 可 通过 标签 的 name 属性 取得 某 一 项 
的 引用 。 例 如 ， 假 设 页 面 中 包含 如 下 的 <img> 元 素 : 

<img src="myimage.gif" name="myImage"> 

那么 也 可 以 像 这 样 从 images 中 取得 对 这 个 <img> 元 素 的 引用 


let myImage = images.namedItem("myImage"); 


这 样 , HTMLCollection 就 提供 了 除 索引 之 外 的 另 一 种 获取 列表 项 的 方式 , 从 而 为 取得 元 素 提供 了 
便利 。 对 于 name 属性 的 元 素 ， 还 可 以 直接 使 用 中 括号 来 获取 ， 如 下 面 的 例子 所 示 : 


let myImage = images["myImage"]; 


对 HTMLCollection 对 象 而 言 ， 中 括号 既 可 以 接收 数值 索引 ， 也 可 以 接收 字符 串 索引 。 而 在 后 台 
数值 索引 会 调用 item() ， 字 符 串 索引 会 调用 namedItem()。 

ee ， 可 以 给 getElementsByTagName () 传 人 *。 在 JavaScript 和 CSS 中 ，* 
一 般 被 认为 是 匹配 一 切 的 字符 。 来 看 下 面 的 例子 : 


let allElements = document .9etElementSsByTagName ("*") 


这 行 代码 可 以 返回 包含 页 面 中 所 有 元 素 的 HTMLCollection 对 象 ， 顺序 就 是 它们 在 页 面 中 出 现 的 
顺序 ee 第 二 项 是 <head> 元 素 ， 以 此 类 推 。 













































































注意 对 于 document .getElementsByTagName () 方 法 , 虽然 规范 要 求 区 分 标签 的 大 小 
写 , 但 为 了 最 大 限度 兼容 原 有 HTML 页 面 ， 实 际 上 是 不 区 分 大 小 写 的 。 如 果 是 在 XML 页 








面 ( 如 XHTML ) 中 使 用 ， 那 么 aocument .getElementsByTagName() 就 是 区 分 大 小 
写 的 。 











HTMLDocument 类 型 上 定义 的 获取 元 素 的 第 三 个 方法 是 getElementsByName ()。 顾名思义 , 这 个 
方法 会 返回 具有 给 定 name 属性 的 所 有 元 素 。getElementsByName () 方 法 最 常用 于 单 选 按钮 ， 因 为 同 
一 字段 的 单 选 按钮 必须 具有 相同 的 name 属性 才能 确保 把 正确 的 值 发 送 给 服务 器 ， 比 如 下 面 的 例子 : 


<fieldset> 
<legend>Which color do you prefer?</legend> 
<ul> 
关于 生 实 
<input type="radio" value="red" name="color" id="colorRed"> 
<label for="colorRed">Red</label> 
攻守 
<11> 
<input type="radio" value="green" name="color" id="colorGreen"> 
<label for="colorGreen">Green</label> 
区 
<1i> 
<input type="radio" value="blue" name="color" id="colorBlue"> 
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<label for="colorBlue">Blue</label> 
</1i> 
</ul> 
</fieldset> 


这 里 所 有 的 单 选 按钮 都 有 名 为 "color" 的 name 属性 ， 但 它们 的 ID 都 不 一 样 。 这 是 因为 ID 是 为 了 
匹配 对 应 的 <1abel > 元 素 ， 而 name 相同 是 为 了 保证 只 将 三 个 中 的 一 个 值 发 送 给 服务 器 。 然 后 就 可 以 像 
下 面 这 样 取得 所 有 单 选 按钮 ; 


let radios = document .getElementsByName ("color"); 


























与 getElementsByTagName () 一 样 ，getElementsByName () 方 法 也 返回 HTMLCollection。 不 
过 在 这 种 情况 下 ，namedItem() 方 法 只 会 取得 第 一 项 ( 因为 所 有 项 的 name 属性 都 一 样 )。 

4. 特殊 集合 

document 对 象 上 还 暴露 了 儿 个 特殊 集合 , 这 些 集合 也 都 是 HTrMLCollection 的 实例 。 这些 集合 是 
访问 文档 中 公共 部 分 的 快捷 方式 ， 列 举 如 下 。 
口 aocument .anchors 包含 文档 中 所 有 带 name 属性 的 <a> 元 素 。 
口 aocument .applets 包含 文档 中 所 有 <applet> 元 素 ( 因为 <applet> 元 素 已 经 不 建议 使 用 ， 所 
以 这 个 集合 已 经 废弃 )。 































































































口 socument . forms 包含 文档 中 所 有 <form> 元 素 ( 与 docum nt .getElementsByTagName ("form") 
返回 的 结果 相同 )。 

口 aocument . images 包含 文档 中 所 有 <img> 元 素 ( 与 document .getElementsByTagName ("img") 
返回 的 结果 相同 )。 








口 document .links 包含 文档 中 所 有 带 href 属性 的 <a> 元 素 。 

这 些 特殊 集合 始终 存在 于 HTMLDocument 对 象 上 ,而且 与 所 有 HTMLCollection 对 象 一 样 ， 其 内 
容 也 会 实时 更 新 以 符合 当前 文档 的 内 容 。 

5. DOM 兼容 性 检测 

由 于 DOM 有 多 个 Level 和 多 个 部 分 ， 因 此 确定 浏览 器 实现 了 DOM 的 哪些 部 分 是 很 必要 的 。 
document .implementation 属性 是 一 个 对 象 ， 其 中 提供 了 与 浏览 器 DOM 实现 相关 的 信息 和 能 
DOM Level 1 在 aocument .implementation 上 只 定义 了 一 个 方法 ， 即 hasFeature () 。 这 个 方法 接 
收 两 个 参数 : 特性 名 称 和 DOM 版 本 。 如 果 浏 览 器 支持 指定 的 特性 和 版 本 ， 则 hasFeature () 方 法 返回 
true， 如 下 面 的 例子 所 示 : 

























































































let hasxmlDom = document.implementation.hasFeature("XML", "1.0"); 
可 以 使 用 hasFeature () 方 法 测试 的 特性 及 版 本 如 下 表 所 列 。 
特 性 支持 的 版 本 说 明 

Core 1.0、2.0、3.0 ”定义 树 形 文档 结构 的 基本 DOM 
XML 1.0、2.0、3.0 ”core 的 XML 扩展， 增加 了 对 CDATA 区 块 、 处 理 指令 和 实体 的 支持 
HTML 1.0、2.0 XML 的 HTML 扩展 ， 增 加 了 HTML 特定 的 元 素 和 实体 
Views 2.0 文档 基于 某 些 样式 的 实现 格式 
StyleSheets 2.0 文档 的 相关 样式 表 
CSS 2.0 Cascading Style Sheets Level 1 


CSS2 2.0 Cascading Style Sheets Level 2 
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( 续 ) 
特 性 支持 的 版 本 说 明 
Events 2.0、3.0 通用 DOM 事件 
UIEvents 2.0、3.0 ] 户 界面 事件 
TextEvents 3.0 文本 输入 设备 触发 的 事件 
MouseEvents 2.0、3.0 鼠标 导致 的 事件 〈 单 击 、 悬 停 等 ) 
MutationEvents 2.0、3.0 DOM 树 变 化 时 触发 的 事件 


MutationNameEvents 3.0 


HTMLEvents 
Range 
Traversal 
LS 
LS-Async 
Validation 


XPath 


2.0 
2.0 
2.0 
3.0 
3.0 
3.0 
3.0 





DOM 元 素 或 元 素 属性 被 重 命名 时 触发 的 事件 
HTML 4.01 事件 
在 DOM 树 中 操作 一 定 范围 的 对 象 和 方法 
遍历 DOM 树 的 方法 

文件 与 DOM 树 之 间 的 同步 加 载 与 保存 
文件 与 DOM 树 之 间 的 异步 加 载 与 保存 
修改 DOM 树 并 保证 其 继续 有 效 的 方法 
访问 XML 文档 不 同 部 分 的 语言 



























































由 于 实现 不 一 至 ,因此 hasFeature() 的 返回 值 并 不 可 靠 。 目 前 这 个 方法 已 经 被 废弃 ,不 再 建议 使 








a 
用 。 为 了 向 后 兼容 ， 目 前 主流 浏览 器 仍然 支持 这 个 方法 ,但 无 论 检 测 什么 都 一 律 返回 true。 


6. 文档 写 入 





document 对 象 有 一 个 古老 的 能 力 , 即 向 网 页 输出 流 中 写 入 内 容 。 这 个 能 力 对 应 4 个 方法 :write()、 


writeln()、 openl( 


) 和 close()。 














其 中 ,write() 和 writeln() 方 法 都 接收 一 个 字符 串 参数 ， 可 以 将 








这 个 字符 串 写 入网 页 中 。write() 简 单 地 写 和 人文 本， 而 writeln () 还 会 在 字符 串 末 尾 追 加 一 个 换行 符 


(An )。 这 两 个 方法 可 以 用 来 在 页 国 


<html> 
<head> 


<title>document .write() 


</head> 
<body> 









































ji 加 载 期 间 向 页 面 中 动态 添加 内 容 ， 如 下 所 示 


Example</title> 


<p>The current date angd time is: 
<script type="text/javascript"> 
document .write("<strong>" + (new Date()).toString() + "</strong>"); 


</script> 
</p> 
</body> 
</html> 











这 个 例子 会 在 页 面 加 载 过 程 中 输出 当前 日 期 和 时 间 。 日 期 放 在 了 <strong> 元 素 中 ， 如 同 它们 之 前 
就 包含 在 HTML 页 面 中 一 样 。 这 意味 着 会 创建 一 个 DOM 元 素 ， 以 后 也 可 以 访问 。 通 过 write() 和 


writeln() 输 出 的 人 


E 何 HTML 都 会 以 这 种 方式 来 处 理 。 





write() 和 wri 

















teln() 方 法 经 常用 于 动态 包含 外 部 资源 ， 如 JavaScript 文件 。 在 包含 JavaScript 文 














件 时 , 记 住 不 能 像 下 











面 的 例子 中 这 相 








的 结尾 ， 导 致 后 面 的 代码 不 能 执行 : 


<html> 
<head> 








直接 包含 字符 串 "</script>", 因为 这 个 字符 串 会 被 解释 为 脚本 块 
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<title>document .write() Example</title> 
</head> 
<body> 

<script type="text/javascript"> 

document .write("<script type=\"text/javascript\" src=\"file.js\">" + 
me/ SriDty)y 

</script> 
</body> 
</html> 





虽然 这 样 写 看 起 来 没 错 ， 但 输出 之 后 的 "</script>" 会 匹配 最 外 层 的 <script> 标 签 ， 导致 页 面 中 
显示 出 ") ; 。 为 避免 出 现 这 个 问题 ， 需 要 对 前 面 的 例子 稍 加 修改 : 
<html> 


<head> 

<title>document .write() Example</title> 
</head> 
<body> 

<script type="text/javascript"> 

document .write("<script type=\"text/javascript\" src=\"file.js\">" + 
"<\/script>"); 

</script> 
</body> 
</html> 





























这 里 的 字符 串 "<\/script>" 不 会 再 匹配 最 外 层 的 <script> 标 签 ， 因 此 不 会 在 页 面 中 输出 额外 
内 容 。 
前 面 的 例子 展示 了 在 页 面 泻 染 期 间 通 过 document .write() 向 文档 中 输出 内 容 。 如 果 是 在 页 面 加 
载 完 之 后 再 调用 document .write() ， 则 输出 的 内 容 会 重 写 整 个 页 面 ， 如 下 面 的 例子 所 示 
<html> 
<head> 
<title>document .write() Example</title> 


</head> 
<body> 


























<p>This is some content that you won't get to see because it will be 
overwritten.</p> 
<script type="text/javascript"> 
window.onload = function(){ 
document .write("Hello world!"); 
ys 
</script> 
</body> 
</html> 





这 个 例子 使 用 了 window.onload 事件 处 理 程序 ， 将 调用 document .write() 的 函数 推迟 到 页 面 
加 载 完 毕 后 执行 。 执 行 之 后 ， 字 符 串 "Hel1lo worldl! "会 重 写 整个 页 面 内 容 。 

open () 和 close () 方 法 分 别 用 于 打开 和 关闭 网 页 输出 流 。 在 调用 write() 和 writeln() 时 , 这 两 
个 方法 都 不 是 必需 的 。 























注意 ”严格 的 XHTML 文档 不 支持 文档 写 入 。 对 于 内 容 类 型 为 application/xml+xhtml 
的 页 面 ， 这 些 方法 不 起 作用 。 
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14.1.3 ”Element 类 型 


除了 Document 类 型 ， 








Element 类 型 就 是 Web 改 



































元 素 ， 对 外 暴露 出 访问 元 素 标 签名 、 子 节点 和 属性 的 能 


口 nodeType 等 于 1; 














口子 节点 可 以 是 

















口 nodeName 值 为 元 素 的 标签 名 ; 
口 nodeValue 值 为 nul1l; 
口 parentNode 值 为 Document 或 Element 对 象 ; 





EntityReference 类 型 。 
可 以 通过 nodeName 或 tagName 属 改 








个 属性 明显 是 为 了 不 让 人 误会 )。 比 如 有 下 面 的 元 素 : 





<div id="myDiv"></div> 





可 以 像 这 样 取 得 这 个 元 素 的 标签 名 : 


let div = document .getElementById ("myDiv"); 


alert (div.tagName); // 


alert (div.tagName == div.nodeName); 


例子 中 的 元 素 标签 名 为 aiv，ID 为 "myDiv"。 
"div"。 存 HTML 中 ， 元 素 标签 名 始终 以 全 大 写 表示 ; 在 XML (包括 XHTML ) 


"DTVn 
// true 


i 
于 高 
/区 、， 

















代码 中 的 大 小 写 一致 。 如 果 不 





写 形式 ， 以 便于 比较 : 


if (element.tagName == 
// do something here 


} 





if 
// 做 点 什么 
} 


这 个 例子 演示 了 比较 tagName 属性 的 情形 ,第 一 个 是 容易 








(element .tagName.toLowerCase() 


定 脚本 是 在 HTML 文档 还 是 XML 文档 


"div"){ // 不 要 这 样 做 ， 可 能 出 错 ! 








返回 大 写 形式 的 标签 名 。 第 二 个 先 把 标签 名 转换 为 全 部 小 写 后 再 








和 XML 都 适用 。 
1. HTML 元 素 























F 发 中 最 常用 的 类 型 了 .Element 表示 XML 或 HTML 








。Element 类 型 的 节点 具有 以 下 特征 : 





Element 、Text、Comment、ProcessingInstruction、CDATASection、 





来 获取 元 素 的 标签 名 。 这 两 个 属性 返回 同样 的 值 〈 添 加 后 一 





div.tagName 实际 上 返回 的 是 "DIV" 而 不 是 











1， 标 签名 始终 与 源 

















运行， 最 好 将 标签 名 转换 为 小 


== "div"){ // 推荐 , 适用 于 所 有 文档 


b 错 的 写法 ,因为 HTML 文档 中 tagName 








比较 ,这 是 推荐 的 做 法 ,因为 这 对 HTML 





所 有 HTML 元 素 都 通过 HTMLElement 类 型 表示 ,包括 其 直接 实例 和 间接 实例 。 男 外 ,HTMLElement 

















的 标准 属性 : 


























直接 继承 Element 并 增加 了 一 些 属 性 。 每 个 属性 都 对 应 下 列 属性 之 一 ， 





D ia， 元 素 在 文档 中 的 唯一 标识 符 ; 

口 title， 包 含 元 素 的 额外 信息 ， 通 常 以 提示 条 形式 展示 ，; 
口 1ang， 元素 内 容 的 语言 代码 (很 少 用 ); 

D air, 语言 的 书写 方向 ("ltr" 表 示 从 左 到 右 ，"rt1" 表 示 从 右 到 左 ， 同 样 很 少 用 ); 

口 className, 相当 于 class 属性 , 用 于 指定 元 素 的 CSS 类 ( 因为 class 是 ECMAScript 关键 字 ， 











所 以 不 能 直接 用 这 个 名 字 )。 





它们 是 所 有 HTML 元 素 上 都 有 
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所 有 这 些 都 可 以 用 来 获取 对 应 的 属性 值 ， 也 可 以 用 来 修改 相应 的 值 。 比 如 有 下 面 的 HTML 元 素 : 


<div id="myDiv" 





class="bd" title="Body text" lang="en" dir="ltr"></div> 





这 个 元 素 中 的 所 有 属性 都 可 以 使 用 下 列 JavaScript 代码 读 取 : 


let div = document .getElementById ("myDiv"); 


alert (div.id); 7 my Diy 
alert (div.className); // "bd" 

alert (div.title); // "Body text" 
alert (div.lang); // "en" 

alert (div.dir); A ey 








而 且 ， 可 以 使 用 下 列 代码 修改 元 素 的 属性 : 


div.id = "someOtherId"; 





div.className = 


三 


全 


div.title = "Some other text"; 
div.1lang = "fr"; 


ro iv e hi A Su en 




















并 非 所 有 这 些 属性 的 修改 都 会 对 页 面 产 生 影响 。 比 如 ,把 ia 或 1ang 改 成 其 他 值 对 用 户 是 不 可 见 

















的 (假设 没有 基于 这 两 个 














本 
本 








属性 应 用 CSS 样式 ), 而 修改 title 属性 则 只 会 在 鼠标 移 到 这 个 元 素 上 时 才 会 








反映 出 来 。 修 改 air 会 导致 页 面 文本 立即 向 左 或 向 右 对 齐 。 修 改 className 会 立即 反映 应 用 到 新 类 名 
的 CSS 样式 〈 如 果 定 义 了 不 同 的 样式 )。 


























如 前 所 述 ， 所 有 HTML 元 素 都 是 HTMLElement 或 其 子 类 型 的 实例 。 下 表 列 出 了 所 有 HTML 元 素 
及 其 对 应 的 类 型 ( 斜体 表示 已 经 废弃 的 元 素 )。 























元 素 类 型 元 素 类 型 
A HTMLANchorElement COL HTMLTableColElement 
ABBR HTMLElement COLGROUP HTMLTableColElement 
ACRONYM HTMLElement DD HTMLElement 
ADDRESS HTMLElement DEL HTMLModElement 
APPLET HTMLApPPl1etElement DFN HTMLElement 
AREA HTMLAreaElement DIR HTMLDirectoryBlement 
B HTMLElement DIV HTMLDivElement 
BASE HTMLBaseElement DL HTMLDLi stElement 
BASEFONT HTMLBaserFontElement DT HTMLElement 
BDO HTMLElement EM HTMLElement 
BIG HTMLElement FIELDSET HTMLFieldSetElement 
BLOCKQUOTE HTMLOuoteE1lement FONT HTMLFoNtElement 
BODY HTMLBodyElement FORM HTMLFOormElement 
BR HTMLBRElement FRAME HTMLFrameElement 
BUTTON HTMLBUuttonElement FRAMESET HTMLFrameSetElement 
CAPTION HTMLTableCaptionElement Hl HTMLHeadingElement 
CENTER HTMLElement H2 HTMLHeadingElement 
CITE HTMLElement H3 HTMLHeadingElement 
CODE HTMLElement H4 HTMLHeadingElement 
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( 续 ) 

元 素 类 型 元 素 类 型 
H5 HTMLHeadingElement PRE HTMLPreElement 
H6 HTMLHeadingElement Q HTMLOuUOteElement 
HEAD HTMLHeadElement S HTMLElement 
HR HTMLHRElement SAMP HTMLE]ement 
HTML HTMLHtmlElement SCRIPT HTMLScriptElement 
I HTMLE]l]ement SELECT HTMLSelectElement 
IFRAME HTMLIFrameFElement SMALL HTMLE]ement 
IMG HTMLImageElement SPAN HTMLElement 
INPUT HTMLINnputElement STRIKE HTMLElement 
INS HTMLModElement STRONG HTMLElement 
TSINDEX HTMLISINdexElement STYLE HTMLStyleElement 
KBD HTMLElement SUB HTMLElement 
LABEL HTMLLabelElement SUP HTMLElement 
LEGEND HTMLLegendElement TABLE HTMLTableElement 
LI HTMLLIFElement TBODY HTMLTableSectionElement 
LINK HTMLLinkElement TD HTMLTableCellElement 
MAP HTMLMapElement TEXTAREA HTMLTextAreaElement 
MENU HTMLMenuElement TFOOT HTMLTableSectionElement 
META HTMLMetaElement TH HTMLTableCellElement 
NOFRAMES HTMLEl]ement THEAD HTMLTableSectionElement 
NOSCRIPT HTMLEl]ement TITLE HTMLTitleElement 
OBJECT HTMLObjectElement TR HTMLTableRowElement 
OL HTMLOListElement TT HTMLE]ement 
OPTGROUP HTMLOptGroupElement CF HTMLElement 
OPTION HTMLOptionElement UL HTMLULi stElement 
了 HTMLParagraphElement VAR HTMLElement 
PARAM HTMLParamElement 

里 列 出 的 每 种 类 型 都 有 关联 的 属性 和 方法 。 本 书 会 涉及 其 中 的 很 多 类 型 。 
2. 取得 属性 
每 个 元 素 都 有 零 个 或 多 个 属性 ， 通 常用 于 为 元 素 或 其 内 容 附加 更 多 信息 。 与 属性 相关 的 DOM 方法 














主要 有 3 个 : getAttribute()、setAttribute() 和 removeAttribute()。 这 些 方法 主要 用 于 操纵 
属性 ， 包 括 在 HTMLElement 类 型 上 定义 的 属性 。 下 面 看 一 个 例子 : 


let div = document .getElementById ("myDiv"); 




















alert (div.getAttribute("id")); // "myDiv" 
alert (div.getAttribute("class")); // "bd" 

alert (div.getAttribute("title")); // "Body text" 
alert (div.getAttribute("lang")); // "en" 

alert (div.getAttribute("dir")); yr el ey 








杠 


注意 传 给 getAttribute() 的 属性 名 与 它们 实际 的 属性 名 是 一 样 的 ， 因 此 这 里 要 传 "class" 而 非 
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"className"( className 是 作为 对 象 属性 时 才 那 么 拼写 的 ), 如 果 给 定 的 属性 不 存在 , 则 getattribute() 
返回 null。 

getAttribute() 方 法 也 能 取得 不 是 HTML 语言 正式 属性 的 自 定义 属性 的 值 。 比 如 下 面 的 元 素 : 

<div id="myDiv" my_special_ attribute="hello!"></div> 

这 个 元 素 有 一 个 自 定义 属性 my_special_attribute, 值 为 "hello!"。 可 以 像 其 他 属性 一 样 使 用 
getAttribute() 取 得 这 个 属性 的 值 : 

let value = div.getAttribute("my_special attribute"); 

注意 ， 属 性 名 不 区 分 大 小 写 ， 因 此 "ID" 和 "iaqa" 被 认为 是 同一 个 属性 。 另 外 ， 根 据 HTMLS5 规范 的 
要 求 ， 自 定义 属性 名 应 该 前 级 daata- 以 方便 验证 。 

元 素 的 所 有 属性 也 可 以 通过 相应 DOM 元 素 对 象 的 属性 来 取得 。 当 然 ， 这 包括 HTMLElement 上 定 
义 的 直接 映射 对 应 属性 的 5 个 属性 , 还 有 所 有 公认 ( 非 自 定义 ) 的 属性 也 会 被 添加 为 DOM 对 象 的 属性 。 
比如 下 面 的 例子 : 


<div id="myDiv" align="left" my_special attribute="hello"></div> 


因为 ia 和 align 在 HTML 中 是 <aiv> 元 素 公认 的 属性 , 所 以 DOM 对 象 上 也 会 有 这 两 个 属性 。 但 
my_special_attribute 是 自 定 义 属性 ， 因 此 不 会 成 为 DOM 对 象 的 属性 。 

通过 DOM 对 象 访问 的 属性 中 有 两 个 返回 的 值 跟 使 用 getAttribute() 取 得 的 值 不 一 样 。 首 先是 
style 属性 ， 这 个 属性 用 于 为 元 素 设 定 CSS 样式 。 在 使 用 getaAttribute() 访 问 style 属性 时 ， 返 回 的 
是 CSS 字符 串 。 而 在 通过 DOM 对 象 的 属性 访问 时 ，style 属性 返回 的 是 一 个 (CssstyleDeclaration ) 
对 象 。DOM 对 象 的 style 属性 用 于 以 编程 方式 读 写 元 素 样式 ， 因 此 不 会 直接 映射 为 元 素 中 style 属 
性 的 字符 串 值 。 
第 二 个 属性 其 实 是 一 类 ， 即 事件 处 理 程序 〈 或 者 事件 属性 )， 比 如 onclick。 在 元 素 上 使 用 事件 属 
性 时 (比如 onclick )， 属 性 的 值 是 一 段 JavaScript 代码 。 如 果 使 用 getattribute() 访 问 事件 属性 ， 
则 返回 的 是 字符 串 形式 的 源 代码 。 而 通过 DOM 对 象 的 属性 访问 事件 属性 时 返回 的 则 是 一 个 JavaScript 
函数 (未 指定 该 属性 则 返回 nul1l )。 这 是 因为 onclick 及 其 他 事件 属性 是 可 以 接受 函数 作为 值 的 。 

考虑 到 以 上 差异 ,开发 者 在 进行 DOM 编程 时 通常 会 放弃 使 用 getattribute() 而 只 使 用 对 象 属性 。 
getAttribute() 主 要 用 于 取得 自 定 义 属性 的 值 。 

3. 设置 属性 

与 getAttripute() 配 套 的 方法 是 setAttribute()， 这 个 方法 接收 两 个 参数 : 要 设置 的 属性 名 
和 属性 的 值 。 如 果 属 性 已 经 存在 ， 则 setAttribute() 会 以 指定 的 值 符 换 原 来 的 值 ， 如 果 属 性 不 存在 ， 
则 setAttribute() 会 以 指定 的 值 创建 该 属性 。 下 面 看 一 个 例子 : 

div.setAttribute("id", "someOtherId"); 

div.setAttribute("class", "ft"); 

div.setAttribute("title", "Some other text"); 

div.setAttribute("lang", "fr"),; 

div.setAttribute("dir", "rtl1"); 

setAttribute() 适 用 于 HTML 属性 ， 也 适用 于 自 定义 属性 。 另 外 ,使 用 setAttribute() 方 法 
设置 的 属性 名 会 规范 为 小 写 形 式 ， 因 此 "ID" 会 变 成 "id"。 

因为 元 素 属 性 也 是 DOM 对 象 属性 ， 所 以 直接 给 DOM 对 象 的 属性 赋值 也 可 以 设置 元 素 属性 的 值 ， 
如 下 所 示 : 
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div.iqd = "someOtherId"; 

div align = “Left 

注意 ， 在 DOM 对 象 上 添加 自 定义 属性 ， 如 下 面 的 例子 所 示 ， 不 会 自动 让 它 变 成 元 素 的 属性 : 
div.mycolor = "red"; 

alert (div.getAttribute("mycolor")); // null (IE 除外 ) 


这 个 例子 添加 了 一 个 自 定义 属性 mycolor 并 将 其 值 设 置 为 "red"。 在 多 数 浏览 器 中 ， 这 个 属性 不 
会 自动 变 成 元 素 属性 。 因 此 调用 getAttripbute() 有 取得 mycolor 的 值 会 返回 nul1。 

最 后 一 个 方法 removeAttribute() 用 于 从 元 素 中 删除 属性 。 这 样 不 单单 是 清除 属性 的 值 ， 而 是 会 
把 整个 属性 完全 从 元 素 中 去 掉 ， 如 下 所 示 : 


div.removeAttribute("class"); 
这 个 方法 用 得 并 不 多 ， 但 在 序列 化 DOM 元 素 时 可 以 通过 它 控制 要 包含 的 忆 
4. attributes 属性 
Element 类 型 是 唯一 使 用 attributes 属性 的 DOM 节点 类 型 。attributes 属性 包含 一 个 
NamedNodeMap 实例 ， 是 一 个 类 似 NodeList 的 “实时 ”集合 。 元 素 的 每 个 属性 都 表示 为 一 个 Attr 节 
点 ， 并 保存 在 这 个 NamedNodeMap 对 象 中 。NamedNodeMap 对 象 包含 下 列 方法 : 
口 getNamedItem(name) ， 返 回 nodeName 属性 等 于 name 的 节点 ; 
口 removeNamedItem (name), 删除 noaeNam 属性 等 于 Dame 的 节点 ; 
口 setNamedItem(node) ， 向 列表 中 添加 node 节点 ， 以 其 nodeName 为 索引 ; 
口 item (pos) ， 返 回 索引 位 置 pos 处 的 节点 。 
attributes 属性 中 的 每 个 节点 的 nodeName 是 对 应 属性 的 名 字 ，nodevalue 是 属性 的 值 。 比 如 ， 
要 取得 元 素 ia 属性 的 值 ， 可 以 使 用 以 下 代码 : 
let id = element.attributes.getNamedItem("id") .nodeValue; 
下 面 是 使 用 中 括号 访问 属性 的 简写 形式 ， 
let. id = elementattributest[l"id"l..nodeValue; 
同样 ， 也 可 以 用 这 种 语法 设置 属性 的 值 ， 即 先 取得 
下 所 示 : 


element .attributes["id"] .nodeValue = "someOtherId"; 


removeNamedItem() 方 法 与 元 素 上 的 removeAttribute() 方 法 类 似 , 也 是 删除 指定 名 字 的 属性 。 
下 面 的 例子 展示 了 这 两 个 方法 唯一 的 不 同 之 处 ,就 是 removeNamedItem() 返 回 表示 被 柚 除 属性 的 Attr 
节点 : 












































1 








性 。 


此 


































































































ot 



































I 


























时 性 节点 ， 再 将 其 nodevValue 设置 为 新 值 ， 如 


三 
nl 























Jet olgdAttr = element .attributes.removeNamedIitem("id"); 

setNamedItem() 方 法 很 少 使 用 ， 它 接收 一 个 属性 节点 ， 然 后 给 元 素 添 加 一 个 新 属性 ， 如 下 所 示 : 

element .attributes.setNamedItem(newAttr); 

一 般 来 说 , 因为 使 用 起 来 更 简便 , 通常 开发 者 更 喜欢 使 用 getAttribute()、removeAttribute() 
和 setAttribute() 方 法 ， 而 不 是 刚刚 介绍 的 NamedNodeMap 对 象 的 方法 。 

attributes 属性 最 有 用 的 场景 是 需要 迭代 元 素 上 所 有 属性 的 时 候 。 这 时 候 往往 是 要 把 DOM 结构 
序列 化 为 XML 或 HTML 字符 串 。 比 如 ， 以 下 代码 能 够 迭代 一 个 元 素 上 的 所 有 属性 并 以 attribute1= 
"valuel" attribute2="value2" 的 形式 生成 格式 化 字符 串 : 
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function outputAttributes (element) { 
let pairs = []; 


for (let i = 0, len = element.attributes.length; i < len; ++i) { 
const attribute = element .attributes[i]; 
pairs.push(“s${attribute.nodeName}="${attribute.nodeValue}". ); 


} 


return pairs.join(" "); 


} 

这 个 函数 使 用 数组 存储 每 个 名 / 值 对 ,迭代 完 所 有 属性 后 , 再 将 这 些 名 / 值 对 用 空格 拼接 在 一 起 。( 这 
个 技术 常用 于 序列 化 为 长 字符 串 。) 这 个 函数 中 的 for 循环 使 用 attributes .length 属性 迭代 每 个 属 
性 ,将 每 个 属性 的 名 字 和 值 输出 为 字符 串 ,不 同 浏 览 器 返回 的 attributes 中 的 属性 顺序 也 可 能 不 一 样 。 
HTML 或 XML 代码 中 属性 出 现 的 顺序 不 一 定 与 attributes 中 的 顺序 一 致 。 

5. 创建 元 素 

可 以 使 用 document .createElement () 方 法 创建 新 元 素 。 这 个 方法 接收 一 个 参数 ， 即 要 创建 元 素 
的 标签 名 。 在 HTML 文档 中 ， 标 签名 是 不 区 分 大 小 写 的 ， 而 XML 文档 ( 包括 XHTML ) 是 区 分 大 小 写 
的 。 要 创建 <aiv> 元 素 ， 可 以 使 用 下 面 的 代码 : 

let div = document .createplement ("div"); 

使 用 createElement () 方 法 创建 新 元 素 的 同时 也 会 将 其 ownerDocument 属性 设置 为 aocument。 
此 时 ， 可 以 再 为 其 添加 属性 、 添 加 更 多 子 元 素 。 比 如 : 


div.id = "myNewDiv"; 
div.className = "box"; 


在 新 元 素 上 设置 这 些 属性 只 会 附加 信息 。 因 为 这 个 元 素 还 没有 添加 到 文档 树 ， 所 以 不 会 影响 浏览 
显示 。 要 把 元 素 添加 到 文档 树 ， 可 以 使 用 appengdchild()、insertBefore() 或 replaceChild()。 
比如 ， 以 下 代码 会 把 刚才 创建 的 元 素 添 加 到 文档 的 <body> 元 素 中 : 

document .body .appendChild(div); 

元 素 被 添加 到 文档 树 之 后 ,浏览 器 会 立即 将 其 泻 染 出 来 。 之 后 再 对 这 个 元 素 所 做 的 任何 修改 ， 都 会 
立即 在 浏览 器 中 反映 出 来 。 

6. 元 素 后 代 

元 素 可 以 拥有 任意 多 个 子 元 素 和 后 代 元 素 , 因为 元 素 本 身 也 可 以 是 其 他 元 素 的 子 元 素 。childNodes 
遇 性 包含 元 素 所 有 的 子 节点 ， 这 些 子 节点 可 能 是 其 他 元 素 、 文 本 节点 、 注 释 或 处 理 指令 。 不 同 浏览 器 在 
识别 这 些 节点 时 的 表现 有 明显 不 同 。 比 如 下 面 的 代码 : 


<ul id="myList"> 
<li>Item 1</1i> 
<li>Item 2</1i> 
<li>Item 3</1i> 

</ul> 


在 解析 以 上 代码 时 ，<ul> 元 素 会 包含 7 个 子 元 素 , 其 中 3 个 是 <1i> 元 素 , 还 有 4 个 Text 节点 ( 表 
示 <1i> 元 素 周 围 的 空格 )。 如 果 把 元 素 之 间 的 空格 删 掉 ， 变 成 下 面 这 样 ， 则 所 有 浏览 器 都 会 返回 同样 数 
量 的 子 节点 : 


<ul id="myList"><li>Item 1</1i><li>Item 2</1i><li>Item 3</1i></ul> 
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所 有 浏览 器 解析 上 面 的 代码 后 ，<ul> 元 素 都 会 包含 3 个 子 节点 。 考虑 到 这 种 情况 , 通常 在 执行 某 个 
操作 之 后 需要 先 检测 一 下 节点 的 nodeType， 如 下 所 示 : 


for (let i = 0, len = element.childNodes.length; i < len; ++i) { 
if (element.childNodes[i].nodeType == 1) { 
// 执行 某 个 操作 
} 
} 


以 上 代码 会 遍历 某 个 元 素 的 子 节点 ， 并 且 只 在 nodeType 等 于 1 ( 即 Element 节点 ) 时 执行 某 个 
操作 。 

要 取得 某 个 元 素 的 子 节点 和 其 他 后 代 节 点 ， 可 以 使 用 元 素 的 getElementsByTagName () 方 法 。 在 
元 素 上 调用 这 个 方法 与 在 文档 上 调用 是 一 样 的 ， 只 不 过 搜索 范围 限制 在 当前 元 素 之 内 ， 即 只 会 返回 当前 
元 素 的 后 代 。 对 于 本 节 前 面 <ul> 的 例子 ， 可 以 像 下 面 这 样 取 得 其 所 有 的 <1i> 元 素 : 


let ul = document .getElementById("myList"); 
let items = ul.getElementsByTagName ("1i"); 


这 里 例子 中 的 <ul> 元 素 只 有 一 级 子 节 点 , 如 果 它 包含 更 多 层级 , 则 所 有 层级 中 的 <1i> 元 素 都 会 返回 






















































































14.1.4 ”Text 类 型 


Text 节点 由 Text 类 型 表示 ， 包 含 按 字 面 解释 的 纯 文 本 ， 也 可 能 包含 转 义 后 的 HTML 字符 ,但 不 

含 HTML 代码 。Text 类 型 的 节点 具有 以 下 特征 : 

口 nodeType 等 于 3; 

口 nodeName 值 为 "#text"; 

口 nodevalue 值 为 节点 中 包含 的 文本 ; 

口 barentNode 值 为 Element 对 象 ; 

口 不 支持 子 节点 。 

Text 节点 中 包含 的 文本 可 以 通过 nodqevalue 属性 访问 , 也 可 以 通过 aata 属性 访问 ， 这 两 个 属性 

包含 相同 的 值 。 修 改 nodevalue 或 data 的 值 ， 也 会 在 另 一 个 属性 反映 出 来 。 文 本 节点 暴露 了 以 下 操 

作文 本 的 方法 : 

口 appendData (text)， 问 节点 末尾 添加 文本 text; 

口 geleteData(offset，count)， 从 位 置 offset 开始 删除 count 个 字符 ; 

口 insertData(offset，text)， 在 位 置 offset 搬入 text; 

口 replaceData(offset，count，text)， 用 text 替换 从 位 置 offset 到 offset + count 的 

文本 ; 

口 splitText (offset)， 在 位 置 offset 将 当前 文本 节点 拆 分 为 两 个 文本 节点 ; 

口 substringData(offset，count)， 提取 从 位 置 offset 到 offset + count 的 文本 。 
除了 这 些 方法 ， 还 可 以 通过 length 属性 获取 文本 节点 中 包含 的 字符 数量 。 这 个 值 等 于 nodeValue. 

length 和 data.length。 
默认 情况 下 ， 包 含 文本 内 容 的 每 个 元 素 最 多 只 能 有 一 个 文本 节点 。 例 如 : 
<!-- 没有 内 容 ， 因 此 没有 文本 节点 --> 


<div></div> 


































































































<!-- 有 空格 ， 因 此 有 一 个 文本 节点 --> 
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<div> </div> 


<!-- 有 内 容 ， 因 此 有 一 个 文本 节点 --> 
<div>Hello World!</div> 


示例 中 的 第 一 个 <aiv> 元 素 中 不 包含 内 容 ， 因 此 不 会 产生 文本 节点 。 只 要 开始 标签 和 结束 标签 之 间 
有 内 容 ， 就 会 创建 一 个 文本 节点 ， 因 此 第 二 个 <aiv> 元 素 会 有 一 个 文本 节点 的 子 节 点 ， er 
格 。 这 个 文本 节点 的 nodeValue 就 是 一 个 空格 。 第 三 个 <div> 元 素 也 有 一 个 文本 广 点 的 子 节点 ， 其 
nodeValue 的 值 为 "Hello world!"。 下 列 代码 可 以 用 来 访问 这 个 文本 节点 : 

let textNode = div.firstChild; // 或 qiv.childqNodqes[0] 

取得 文本 节点 的 引用 后 ， 可 以 像 这 样 来 修改 它 : 

div.firstChild.nodeValue = "Some other message"; 

节点 在 当前 的 文档 树 中 , 这样 的 修改 就 会 马上 反映 出 来 。 修 改 文本 节点 还 有 一 点 要 注意 ， 就 是 

es XML 代码 ( 取决 于 文档 类 型 ) 会 被 转换 成 实体 编码 ， 即 小 于 号 、 大 于 号 或 引号 会 被 转 义 ， 如 
下 所 示 : 


// 输出 为 "Some &lt;strong&gt;other&lt;/strong&gt; message" 









































div.firstChild.nodeValue = "Some <strong>other</strong> message"; 
这 实际 上 是 在 将 HTML 字符 串 插 入 DOM 文档 前 进行 编码 的 有 效 方式 。 
1. 创建 文本 节点 


document .createTextNode () 可 以 用 来 创建 新 文本 节点 , 它 接收 一 个 参数 , 即 要 搬入 节点 的 文本 。 
跟 设 置 已 有 文本 节点 的 值 一 样 ， 这 些 要 搬入 的 文本 也 会 应 用 HIML 或 XML 编码， 如 下 面 的 例子 所 示 : 


let textNode = qdqocument .createTextNodqe ("<Strong>Hello</strong> world!"); 


创建 新 文本 节点 后 ， 其 ownerDocument 属性 会 被 设置 为 document 。 但 在 把 这 个 节点 添加 到 文档 
树 之 前 ， 我 们 不 会 在 浏览 器 中 看 到 它 。 以 下 代码 创建 了 一 个 <aiv> 元 素 并 给 它 添加 了 一 段 文本 消息 : 


let element = document.createElement ("div"); 
element .className = "message"; 






































let textNode = document .createTextNode ("Hello world!"); 
element .appendChild (textNode); 


document .body .appendChild(element); 


这 个 例子 首先 创建 了 一 个 <aiv> 元 素 并 给 它 添加 了 值 为 "message" 的 class 属性 ， 然 后 又 创建 了 

一 个 文本 节点 并 添加 到 该 元 素 。 最 后 一 步 是 把 这 个 元 素 添 加 到 文档 的 主体 上 ,这 样 元素 及 其 包含 的 文本 
会 出 现在 浏览 器 中 。 
般 来 说 一 个 元 素 只 包含 一 个 文本 子 节点 。 不 过 ,也 可 以 让 元 素 包 含 多 个 文本 子 节 点 ， 如 下 面 的 例 
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子 所 示 : 
let element = document.createElement ("div"); 
element .className = "message"; 


let textNode = document .createTextNode ("Hello world!"); 
element .appendChild (textNode); 


let anotherTextNode = document .createTextNode ("Yippee!"); 
element .appendChild(anotherTextNode); 


document .body .appendChild(element); 





422 第 14 章 DOM 





在 将 一 个 文本 节点 作为 男 一 个 文本 节点 的 同胞 插入 后 ， 两 个 文本 节点 的 文本 之 间 不 会 包含 空格 。 

2. 规范 化 文本 节点 

DOM i 6 导致 困惑 ， 因为 一 个 文本 第 局 足 以 表示 一 个 文本 子 笠 申 。 | 
DOM 文档 中 也 ei 。 为 此 ， 有 一 个 方法 可 以 合并 相 邻 的 文本 节点 。 这 个 方法 
叫 normalize()， 是 在 Node 类 型 中 定义 的 ( 因此 所 有 类 型 的 节点 上 都 有 这 个 方法 )。 ae 
| normalize() 时 ， 所 有 同胞 文本 节点 会 被 合并 为 一 个 文本 节点 ， 这 个 
文本 节点 的 nodeValue 就 等 于 之 前 所 有 同胞 节点 nodevalue 拼接 在 一 起 得 到 的 字符 串 。 来 看 下 面 的 
例子 : 


let element = document.createElement ("div"); 
element.className = "message"; 





+ 























Jet textNode = document .createTextNode ("Hello world!"); 
element .appendChild (textNode); 


let anotherTextNode = document .createTextNode ("Yippee!"); 
element .appendChild(anotherTextNode); 


document .body .appendChild(element); 
alert (element .childNodes.length); // 2 


element .normalize(); 
alert (element .childNodes.length); // 1 
alert (element .firstChild.nodeValue); // "Hello world!Yippee!" 


浏览 器 在 解析 文档 时 ， 永 远 不 会 创建 同胞 文本 节点 。 同 胞 文本 节点 只 会 出 现在 DOM 脚本 生成 的 文 
档 树 中 。 

3. 拆 分 文本 节点 

Text 类 型 定义 了 一 个 与 normalize() 相 反 的 方法 一 一 splitText () 。 这 个 方法 可 以 在 指定 的 偏 移 
位 置 拆 分 nodevalue， 将 一 个 文本 节点 的 分 成 两 个 文本 广 点 。 拆 分 之 后 ， 原 来 的 文本 节点 包含 开头 到 
偏 移 位 置 前 的 文本 ， 新 文本 节点 包含 剩 下 的 文本 。 这 个 方法 返回 新 的 文本 节点 ， 具 有 与 原来 的 文本 节点 
相同 的 parentNode。 来 看 下 面 的 例子 : 


let element = document.createElement ("div"); 
element.className = "message"; 



























































let textNode = document .createTextNode ("Hello world!"); 
element .appendChild (textNode); 


document .body .appendChild(element); 


let newNode = element .firstChild.splitText(5); 
alert (element .firstChild.nodeVvalue); // "Hello" 
alert (newNode .nodeValue); // " world!" 
alert (element .childNodes.length); // 2 


在 这 个 例子 中 ,包含 "Hello worldl "的 文本 节点 被 从 位 置 5 拆 分 成 两 个 文本 节点 。 位 置 5 对 应 
"Hello" 和 "world!" 之 间 的 空格 ， 因 此 原始 文本 节点 包含 字符 串 "Hello"， 而 新 文本 节点 包含 文本 " 
world!" (包含 空格 )。 

拆 分 文本 节点 最 常用 于 从 文本 节点 中 提取 数据 的 DOM 解析 技术 。 
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14.1.5 ”Comment 类 型 


DOM 中 的 注释 通过 comment 类 型 表示 。Comment 类 型 的 节点 具有 以 下 特征 : 
口 nodeType 等 于 8; 
口 nodeName 值 为 "#comment"; 
口 nodevalue 值 为 注释 的 内 容 ; 
口 parentNode 值 为 Document 或 Element 对 象 ; 
口 不 支持 子 节点 
Comment 类 型 与 Text 类 型 继承 同一 个 基 类 ( characterData )， 因此 拥有 除 splitText () 之 外 
Text 节点 所 有 的 字符 串 操 作 方 法 。 与 Text 类 型 相似 ， 注 释 的 实际 内 容 可 以 通过 nodeValue 或 data 
属性 获得 。 
注释 节点 可 以 作为 父 节 点 的 子 节 点 来 访问 。 比 如 下 面 的 HTML 代码 : 
<div id="myDiv"><!-- A comment --></div> 
这 里 的 注释 是 <aiv> 元 素 的 子 节点 ， 这 意味 着 可 以 像 下 面 这 样 访问 它 : 
let div = document .getElementById("myDiv" ) ， 


let comment = div.firstChild; 
alert (comment .data); // "A comment" 


可 以 使 用 aocument .createComment () 方 法 创建 注释 节点 ， 参 数 为 注释 文本 ， 如 下 所 示 : 

let comment = document.createComment ("A comment"); 

显然 ， 注 释 节 点 很 少 通过 JavaScrpit 创建 和 访问 ， 因 为 注释 几乎 不 涉及 算法 逻辑 。 此 外 ， 浏 览 器 不 
承认 结束 的 </html> 标 签 之 后 的 注释 。 如 果 要 访问 注释 节点 ， 则 必须 确定 它们 是 <html > 元 素 的 后 代 。 


































































































14.1.6 ”cpaATASection 类 型 





CDATASection 类 型 表示 XML 中 特有 的 CDATA 区 块 。cDATASection 类 型 继承 Text 类 型 ， 
此 拥有 包括 splitText() 在 内 的 所 有 字符 串 操 作 方法 。 CDATASection 类 型 的 节点 具有 以 下 特 和 
口 nodeType 等 于 4; 
口 nodeName 值 为 "#cdata-section"; 
口 nodeValue 值 为 CDATA 区 块 的 内 容 ; 
DQ parentNode 值 为 Document 或 Element 对 象 ; 
口 不 支持 子 节 点 。 

CDATA 区 块 只 在 XML 文档 中 有 效 ， 因 此 某 些 浏览 器 比较 陈旧 的 版 本 会 错误 地 将 CDATA 区 块 解析 
为 Comment 或 Element。 比 如 下 面 这 行 代码 : 


<div id="myDiv"><![CDATA[This is some content.]]></div> 


这 里 <div> 的 第 一 个 子 节点 应 该 是 CDATASection 节点 。 但 主流 的 四 大 浏览 器 没有 一 个 将 其 识别 为 
CDATASection。 即 使 在 有 效 的 XHTML 文档 中 ， 这 些 浏 览 器 也 不 能 恰当 地 支持 能 人 的 CDATA 区 块 。 

在 真正 的 XML 文档 中 ， 可 以 使 用 document .createcDataSection() 并 传人 节点 内 容 来 创建 
CDAIA 区 块 。 
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14.1.7 DocumentType 类 型 








DocumentType 类 型 
D nodeType 等 于 10; 


口 parentNogde 值 为 
口 不 支持 子 节点 。 








Document 了 


口 nodeName 值 为 文档 类 型 
D nodqevalue 值 为 nul1; 





的 名 称 ; 


Document 对 象 ; 


型 的 节点 包含 文档 的 文档 类 型 ( doctype ) 信 | 








息 ， 具 有 以 下 特征 : 








rype 对 象 在 DOM Level 1 中 不 支持 动态 创建 ， 只 能 在 解析 文档 代码 时 创建 。 对 于 支持 这 


个 类 型 的 浏览 器 ，DocumentType 对 象 保存 在 document .doctype 属性 中 。DOM Level 1 规定 了 


DocumentType 对 象 的 3 个 属性 : 
ties 是 这 个 文档 类 型 描述 的 实体 的 Named 


enti 


法 的 


nota 


这 个 
档 类 型 





NamedNodeMapo 
tions 列表 为 空 。 
属性 包含 文档 类 型 


型 ， 

















<!DOCTYPE HTML PUBLIC 


wl 


对 于 这 个 文档 类 型 ， 


alert 





( 这 个 对 象 只 包 
的 名 称 ， 


ttp:// www.w3.org/T 


name 


(document .doctype.name); 








name、 





ent 





ities 和 notations。 其 中 ， 





























国 


// 


14.1.8 ” DocumentFragment 类 型 


文档 片段 定义 为 “ 轻 量 级 ”文档 ， 

















在 所 有 节点 类 型 




















DocumentFragment 节点 


可 以 使 月 


口 parentNode 值 为 
口子 节点 可 以 是 



































Element、 


具有 以 下 特征 : 


口 nodeType 等 于 11; 
D nodeName 值 为 "#document -fragment"; 
口 nodeValue 值 为 null; 


ob el 


EntityReferenceo 
不 能 直接 把 文档 片段 添加 到 文档 。 相反 , 文档 片段 的 作用 是 
) 方 法 像 | 








let 








文档 片段 从 Nodae 类 型 


"html" 


有 document .createDocumentFragment ( 





型 














含 行内 声明 的 文档 类 型 。) 
即 紧 跟 在 <!DocTYPE 





ProcessingInstruction、Comment、 








name 是 文档 类 型 的 名 称 ， 
odeMap， 而 notations 是 这 个 文档 类 型 


因为 浏览 器 中 的 文档 通常 是 HTML 或 XHTML 文档 类 型 ， 


描述 的 表示 
所 以 entities 和 











无 论 如 何 ， 




















"-// W3C// DTD HTML 4.01// EN" 
R/html4/strict.dtd"> 


属性 的 值 是 "html " : 





Text、 


























充当 











继承 了 所 有 文档 类 型 


节点 同样 不 属于 文档 树 ， 不 会 被 浏览 


加 到 




















fragment = document .createDocumentFragment (); 


具备 的 可 以 执行 DOM 操作 的 方法 。 
节点 被 添加 到 一 个 文档 片段 ， 则 该 节 8 不 会 再 被 浏览 器 泻 染 。 





只 有 name 属 履 
后 面 的 那 串 文本 。 比 如 下 卫 





是 有 








j 的 。 





，DocumentFragment 类 型 是 唯一 一 个 在 标记 中 没有 对 应 表示 的 类 型 。 





| 的 HTML 4.01 严格 文 


DOM 将 


能 够 包含 和 操作 节点 ， 却 没有 完整 文档 那样 额外 的 消耗 。 


CDATASection 或 


如 果 文 档 


添加 到 文档 片段 的 


。 可 以 通过 appendchi1lg() () 或 insertBefore() 
档 片段 的 内 容 添 加 到 文档 。 在 i 法 时 ， 这 个 文档 片段 的 所 有 子 节点 会 被 添 
文档 中 相应 的 位 置 。 文 档 片 段 本 身 永远 不 会 被 添加 到 文档 树 。 以 下 面 的 HTML 为 例 : 





其 他 要 被 添加 到 文档 的 节点 的 仓库 。 
下 面 这 样 创建 文档 片段 : 

















的 三 全 


新 
方法 将 文 
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<ul id="myList"></ul> 

















假设 想 给 这 个 <-ul> 元 素 添加 3 个 列表 项 。 如果 分 3 次 给 这 个 元 素 添加 列表 项 , 浏览 需 就 要 重新 泻 染 
3 次 页 面 ， 以 反映 新 添加 的 内 容 。 为 避免 多 次 泻 染 ， 下 面 的 代码 示例 使 用 文档 片段 创建 了 所 有 列表 项 ， 
然后 一 次 性 将 它们 添加 到 了 <ul> 元 素 : 


let fragment = document .createDocumentFragment (); 
let ul = document .getElementById("myList"); 











fOr (Tet’ 1 3 QO I < 3 4 4 
let 11 = document .createElement ("1i"); 
li.appendChild(document.createTextNode(‘Item S${i + 1}.)); 
fragment .appendChild(1i); 

} 


ul.appendChild (fragment); 

这 个 例子 先 创 建 了 一 个 文档 片段 ， 然 后 取得 了 <ul> 元 素 的 引用 。 接 着 通过 for 循环 创建 了 3 个 列表 
项 ， 每 一 项 都 包含 表明 自己 身份 的 文本 。 为 此 先 创建 <11> 元 素 ， 再 创建 文本 节点 并 添加 到 该 元 素 。 然 后 
通过 appendachild() 把 <1i> 元 素 添 加 到 文档 片段 。 循 环 结束 后 ， 通 过 把 文档 片段 传 给 appendchila() 
将 所 有 列表 项 添加 到 了 <ul1> 元 素 。 此 时 ， 文 档 片段 的 子 节点 全 部 被 转移 到 了 <ul1> 元 素 。 


14.1.9 Attr 类 型 












































元 素数 据 在 DOM 中 通过 Attz 类 型 表示 。Attr 类 型 构造 函数 和 原型 在 所 有 浏览 器 中 都 可 以 直接 访 
问 。 技 术 上 讲 ， 属 性 是 存在 于 元 素 attributes 属性 中 的 节点 。Attr 节点 具有 以 下 特征 : 
口 nodqeType 等 于 2; 
口 nodeName 值 为 属性 名 ; 
口 noqevalue 值 为 属性 值 ; 
口 parentNode 值 为 null; 
口 在 HTML 中 不 支持 子 节点 ; 
口 在 XML 中 子 节 点 可 以 是 Text 或 EntityReference。 
盟 性 节点 尽管 是 节点 ， 却 不 被 认为 是 DOM 文档 树 的 一 部 分 。Attr 节点 很 少 直 接 被 引用 ， 通常 开 
发 者 更 喜欢 使 用 getAttribute()、removeAttribute() 和 setAttribute() 方 法 操作 属性 。 
Attr 对 象 上 有 3 个 属性 : name、value 和 specified。 其 中 ，name 包含 属性 名 ( 与 nodeName 
一 样 )，value 包含 属性 值 (与 nodeValue 一 样 )， 而 specified 是 一 个 布尔 值 ， 表 示 属 性 使 用 的 是 
默认 值 还 是 被 指定 的 值 。 

可 以 使 用 aocument .createAttripute() 方 法 创建 新 的 Attr 节点 ， 参 数 为 属性 名 。 比 如 ， 要 给 
元 素 添 加 align 属性 ， 可 以 使 用 下 列 代 码 : 


let attr = document.createAttribute("align"); 
attr.value = "left"; 
element .setAttributeNode (attr); 

















































































































alert (element .attributes["align"] .value); // "left" 
alert (element .getAttributeNode("align") .value); // "left" 
alert (element .getAttribute("align")); Ls ett 


在 这 个 例子 中 ,首先 创建 了 一 个 新 属性 。 调 用 createaAttripute() 并 传人 "align" 为 新 属性 设置 














三 
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了 name 属性 ， 因 此 就 不 用 再 设置 了 。 随 后 ，value 属性 被 赋值 为 "left"。 为 把 这 个 新 属性 添加 到 元 
素 上 ， 可 以 使 用 元 素 的 setAttributeNode() 方 法 。 添 加 这 个 属性 后 ， 可 以 通过 不 同方 式 访问 它 ， 包 
括 attributes 属性 、getAttripbuteNode() 和 getAttribute() 方 法 。 其 中 ，attripbutes 属性 和 
getAttributeNode() 方 法 都 返回 属性 对 应 的 Attr 节点 ， 而 getAttribute() 方 法 只 返回 属性 的 值 。 
















































































注意 将 属性 作为 节点 来 访问 多 数 情况 下 并 无 必要 。 推 荐 使 用 getAttribute()、 


removeAttribute() 和 setAttribute() 方 法 操作 属性 ,而 不 是 直接 操作 属性 节点 。 





14.2 ”DOM 编程 


很 多 时 候 ， 操 作 DOM 是 很 直观 的 。 通 过 HTML 代码 能 实现 的 ， 也 一 样 能 通过 JavaScript 实现 。 但 
有 时 候 ，DOM 也 没有 看 起 来 那么 简单 。 浏 览 器 能 力 的 参差 不 齐 和 各 种 问题 ， 也 会 导致 DOM 的 某 些 方 


面 会 复杂 一 些 。 
14.2.1 动态 脚本 


<script> 元 素 用 于 向 网 页 中 插入 JavaScript 代 码 , 可 以 是 src 属性 包含 的 外 部 文件 , 也 可 以 是 作为 该 
元 素 内 容 的 源 代码 。 动 态 脚 本 就 是 在 页 面 初始 加 载 时 不 存在 ， 之 后 又 通过 DOM 包含 的 脚本 。 与 对 应 的 
HTML 元 素 一 样 ， 有 两 种 方式 通过 <script> 动 态 为 网 页 添加 脚本 : 引入 外 部 文件 和 直接 插入 源 代码 。 

动态 加 载 外 部 文件 很 容易 实现 ， 比 如 下 面 的 <script> 元 素 : 

OCript Sresvfo0]e S/SCrLDt 

可 以 像 这 样 通过 DOM 编程 创建 这 个 节点 : 


let Script = document .createElement ("script");} 
SCript src = foo Sn 
document .body .appendChild(script); 


这 里 的 DOM 代码 实际 上 完全 照搬 了 它 要 表示 的 HTML 代码 。 注 意 ， 在 上 面 最 后 一 行 把 <script> 
元 素 添 加 到 页 面 之 前 ， 是 不 会 开始 下 载 外 部 文件 的 。 当 然 也 可 以 把 它 添加 到 <head> 元 素 ， 同 样 可 以 实 
现 动 态 脚 本 加 载 。 这 个 过 程 可 以 抽象 为 一 个 函数 ， 比 如 : 


function loadScript (url) { 
let Script = document .createElement ("script");} 
Beeot ere, Eu 
document .body .appendChild(script); 

} 


然后 ， 就 可 以 像 下 面 这 样 加 载 外 部 JavaScript 文件 了 : 

loadScript ("client.js"); 

加 载 之 后 ， 这 个 脚本 就 可 以 对 页 面 执行 操作 了 。 这 里 有 个 问题 : 怎么 能 知道 脚本 什么 时 候 加 载 完 ? 
这 个 问题 并 没有 标准 答案 。 第 17 章 会 讨论 一 些 与 加 载 相关 的 事件 ， 有 具体 情况 取决 于 使 用 的 浏览 

另 一 个 动态 插入 JavaScript 的 方式 是 髋 入 源 代码 ， 如 下 面 的 例子 所 示 : 


<script> 
function sayHi() { 
人 et 
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} 
</script> 
使 用 DOM， 可 以 实现 以 下 逻辑 : 


let Script = document.createElement ("script"); 


script.appendChild(document .createTextNode ("function sayHi(){alert('hi') 
document .body .appendChild(script); 














3 


以 上 代码 可 以 在 Firefox、Safari、Chrome 和 opera 中 运行 。 不 过 在 旧版 本 的 正中 可 能 会 导致 
问题 。 这 是 因为 下 对 <script> 元 素 做 了 特殊 人 处理， 不 允许 常规 DOM 访问 其 子 节点 
素 上 有 一 个 text 属性 ， 可 以 用 来 添加 JavaScript 代码， 如 下 所 示 : 


Var Script = document.createElement ("script"); 
script.text = "function sayHi(){alert('hi');}"; 
document .body .appendChild(script); 


。 但 <script> 元 











1 




















这 样 修改 后 ， 上 面 的 代码 可 以 在 耻 、Firefox 、Opera 和 Safari 3 及 更 高 版 本 中 运行 。Safari 3 之 前 的 


版 本 不 能 正确 支持 这 个 text 属性 ， 但 这 些 版 本 却 支 持 文本 节点 赋值 。 对 于 早期 的 Safari 版 本 ,需要 使 
用 以 下 代码 : 


Var script = document.createElement ("script"); 
Var code = "function sayHi(){alert('hi');}"; 
try { 


script.appendChild(document .createTextNode ("code")); 
} catch (ex){ 


script.text = "code"; 
} 


document .body .appendChild(script); 
这 里 先 尝试 使 用 标准 的 DOM 文本 节点 插入 方式 ， 因 为 除 正 之 外 的 浏览 器 都 支持 这 种 方式 。IE 此 


时 会 抛 出 错误 ， 那 么 可 以 在 捕获 错误 之 后 再 使 用 text 属性 来 插入 JavaScript 代码 。 于 是 ， 我 们 就 可 以 
抽象 出 一 个 跨 浏 览 器 的 函数 : 


function loadScriptString(code)t 



































T 











Var Script = document.createElement ("script"); 
script.type = "text/javascript"; 
try { 





script.appendChild(document .createTextNode (code)); 
} catch (ex){ 


script.text = code; 
} 
document .body .appendChild(script); 


函数 可 以 这 样 调用 : 
loadScriptSstring ("function sayHi(){alert('hi');}"); 
以 这 种 方式 加 载 的 代码 会 在 全 局 作用 域 中 执行 ,并 在 调用 返回 后 立即 生效 。 基 本 上 ， 这 就 相当 于 在 
Se eval () 方 法 。 
意 ， 通 过 innerHTML 属性 创建 的 <script> 元 素 永远 不 会 执行 。 浏 览 器 会 尽责 地 创建 <script> 


元 素 ， 以 及 其 中 的 脚本 文本 ,但 解析 器 会 给 这 个 <script> 元 素 打 上 永 不 执行 的 标签 。 只 要 是 使 用 
innerHTML 创建 的 <script> 元 素 ， 以 后 也 没有 办 法 强制 其 执行 。 
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14.2.2 ”动态 样式 


CSS 样 式 在 HTML 页 面 中 可 以 通过 两 个 元 素 加 载 。<1ink> 元 素 用 于 包含 CSS 外 部 文件 ,而 <style> 
元 素 用 于 添加 租 入 样式 。 与 动态 脚本 类 似 ,动态 样式 也 是 页 面 初始 加 载 时 并 不 存在 ,而 是 在 之 后 才 添 加 
到 页 面 中 的 。 

来 看 下 面 这 个 典型 的 <1ink> 元 素 : 

<link rel="stylesheet" type="text/css" href="styles.css"> 


这 个 元 素 很 容易 使 用 DOM 编程 创建 出 来 : 





































































































let link = document.createElement ("link"); 
link.rel = "stylesheet"; 

link.type = "text/css"; 

link.href = "styles.css"; 


let head = document .getElementsByTagName ("head") [0]; 
head.appendChild(link); 


以 上 代码 在 所 有 主流 浏览 器 中 都 能 正常 运行 。 注 意 应 六 把 <1ink> 元 案 添 加 到 <head> 元 过 而 不 是 
<body> 元 素 ， 这 样 才能 保证 所 有 浏览 费 都 能 正常 运行 。 这 个 过 程 可 以 抽象 为 以 下 通用 也 数 : 


function loadStyles (url)t 
let link = document.createElement ("link"); 
link.rel = "stylesheet"; 


























link.type = "text/css"; 
lnk hef. SU 


let head = document .getElementsByTagName ("head") [0]; 
head.appendChild(link); 

} 

然后 就 可 以 这 样 调用 这 个 loadstyles () 因数 了 : 


loadStyles ("styles.css"); 


通过 外 部 文件 加 载 样式 是 一 个 异步 过 程 。 因 此 ， 样 式 的 加 载 和 正 执行 的 JavaScript 代码 并 没有 先后 
顺序 。 一 般 来 说 ， 也 没有 必要 知道 样式 什么 时 候 加 载 完成 。 
另 一 种 定义 样式 的 方式 是 使 用 <script> 元 素 包含 府 入 的 CSS 规则 ， 例 如 : 


<style type="text/css"> 
body { 

background-color: red; 
} 
</style> 


逻辑 上 ， 下 列 DOM 代码 会 有 同样 的 效果 : 


let style = document.createElement ("style"); 

style.type = "text/css"; 
style.appendChild(document .createTextNode ("body{background-color:red}")); 
let head = document .getElementsByTagName ("head") [0]; 
head.appendChild(style); 


以 上 代码 在 Firefox 、Safari 、Chrome 和 Opera 中 都 可 以 运行 , 但 正 除 外 。 正 ee 和 点 会 施 
加 限制 ， 不 允许 访问 其 子 节 点 ， 这 一 点 与 它 对 <script> 元 素 施 加 的 限制 一 样 。 事 实 上 ，IE 在 执行 到 给 
<Sstyle> 添 加 子 节点 的 代码 时 ， 会 抛 出 与 给 <script> 添 加 子 节点 时 同样 的 错误 。 本 卫 ， 解 决 方案 是 
访问 元 素 的 stylesheet 属性 ， 这 个 属性 又 有 一 个 cssText 属性 ， 然 后 给 这 个 属性 添加 CSS 代码 : 
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let style = document.createElement ("style"); 
style.type = "text/css"; 
tryt{ 
style.appendChild(document .createTextNode ("body{background-color:red}")); 
} catch (ex){ 
style.styleSheet .cssText = "body{background-color:red}"; 
} 
let head = document .getElementsByTagName ("head") [0]; 
head.appendChild(style); 


与 动态 添加 脚本 源 代码 类 似 ， 这 里 也 使 用 了 try . . .catch 语句 捕获 契 抛 出 的 错误 ,然后 再 以 下 
特有 的 方式 来 设置 样式 。 这 是 最 终 的 通用 函数 : 


function loadStyleString(css)t{ 

let style = document.createElement ("style"); 

style.type = "text/css"; 

tryt{ 
style.appendChild(document .createTextNode (css)); 

} catch (ex){ 
style.styleSheet .cssText = css; 

} 

let head = document .getElementsByTagName ("head"){[0]; 
head.appendChild(style); 

















} 
可 以 这 样 调 用 这 个 函数 : 
loadStyleString("body{background-color:red}"); 


这 样 添加 的 样式 会 立即 生效 ， 因 此 所 有 变化 会 立即 反映 出 来 。 


























注意 对 于 IE， 要 小 心 使 用 styleSheet .cssText。 如 果 重 用 同一 个 <style> 元 素 并 设 
置 该 属性 超过 一 次 ， 则 可 能 导致 浏览 器 前 涡 。 同 样 ， 将 cssText 设置 为 空 字 符 串 也 可 能 


导致 浏览 器 前 溃 。 





14.2.3 ”操作 表格 


表格 是 HTML 中 最 复杂 的 结构 之 一 。 通 过 DOM 编程 创建 <-table> 元 素 ,， 通常 要 涉及 大 量 标签 ， 包 
括 表 行 、 表 元 、 表 题 ， 等 等 。 因 此 ， 通 过 DOM 编程 创建 和 修改 表格 时 可 能 要 写 很 多 代码 。 假 设 要 通过 
































DOM 来 创建 以 下 HTML 表格 : 
<table border="1" width="100%"> 
<tbody> 
记忆 放 


<td>Cell 1,1</td> 
<td>Cell 2,1</td> 
<HUES 
< 
<td>sCell 1T:2</td> 
<td>Cell 2,2</td> 
</tr> 
</tbody> 
</table> 


下 面 就 是 以 DOM 编程 方式 重建 这 个 表格 的 代码 : 
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// 创建 表格 

let table = Qocument .createElement ("table"); 
table.border = 1; 

table.width = "100%"; 


// 创建 表 体 
let tbody = dqocument .createElement ("tbody"); 
table.appengdChild (tbody); 





// 创建 第 一 行 

Jet rowl = document .createElement ("tr"); 
thody.appendChild (row!l); 

let cel11_ 1 = document .createElement ("td"); 
celll_1.appendChild(document .createTextNode("Cell 1,1")); 
rowl.appendChild(celll 1); 

Jet cell2_1 = document .createElement ("td"); 
cell2_1.appendChild(document .createTextNode("Cell 2,1"));} 
rowl.appendChild(cell2_ 1); 








// 创建 第 二 行 

let row2 = document .createElement ("tr"); 
tbody.appendChild (row2); 

lJet celll 2 = document .createElement ("td"); 

celll 2.appendChild(document.createTextNode("Cell 1,2")); 
row2.appendChild(celll1 2); 

let cell2_ 2= document .createElement ("td"); 
cell2_2.appendChild(document.createTextNode("Cell 2,2"));} 
row2.appendChild(cell2 2); 


// 把 表格 添加 到 文档 主体 
document .body .appendChild(table); 
以 上 代码 相当 烦琐 ， 也 不 好 理解 。 为 了 方便 创建 表格 ，HIML DOM 给 <table>、<tbody> 和 <tr> 
元 素 添 加 了 一 些 属性 和 方法 。 
<table> 元 素 添加 了 以 下 属性 和 方法 : 
口 caption， 指 向 <caption> 元 素 的 指针 ( 如果 存 在 ); 
口 tBodies， 包含 <tbody> 元 素 的 HTMLCollection; 
口 tFoot ， 指 向 <tfoot> 元 素 ( 如 果 存 在 ); 
口 tHead， 指 向 <thead> 元 素 ( 如 果 存 在 ); 
口 rows ， 包 含 表 示 所 有 行 的 HTMLCollection; 
口 createTHead ()， 创建 <thead> 元 素 ， 放 到 表格 中 ， 返 回 引 用 ; 
口 createTFoot () ,创建 <tfoot> 元 素 ， 放 到 表格 中 ， 返 回 引 用 ; 
口 createCaption()， 创建 <caption> 元 素 ， 放 到 表格 中 ,返回 引用 ; 
口 deleteTHead () ,删除 <thead> 元 素 ; 
口 deleteTFoot () ,删除 <tfoot> 元 素 ; 
口 deleteCaption()， 删 除 <caption> 元 素 ; 
口 deleteRow (pos) ， 删 除 给 定位 置 的 行 ; 
口 insertRow(pos) ， 在 行 集合 中 给 定位 置 插入 一 行 。 
<tbody> 元 素 添 加 了 以 下 属性 和 方法 : 
口 rows， 包 含 <tbody> 元 素 中 所 有 行 的 HTMLCollection; 
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口 deleteRow (pos) ， 删 除 给 定位 置 的 行 ; 





D insertRow (pos) ， 在 行 集合 中 给 定位 置 插入 一 行 ， 返 回 该 行 的 引 



































<tr> 元 素 添加 了 以 下 属性 和 方法 : 
口 cells， 包含 <tr> 元 素 所 有 表 元 的 HTMLCollection; 
口 deleteCell (pos) ,删除 给 定位 置 的 表 元 ; 
口 insertcell (pos) ， 在 表 元 集合 给 定位 置 插 入 一 个 表 元 ， 返回 该 表 元 的 引用 。 
这 些 属性 和 方法 极 大 地 减少 了 创建 表格 所 需 的 代码 量 。 例如, 使 用 这 些 方 法 重 写 前 面 的 代码 之 后 是 

















这 样 的 ( 加 粗 代码 表示 更 新 的 部 分 ): 


// 创建 表格 
let table 


= document .createElement ("table"); 


table.border = 1; 
table.width = "100%"; 


// 创建 表 体 
let tbody 


= document .createElement ("tbody"); 


table.appendChild (tbody); 


// 创建 第 一 行 
tbody.insertRow(0); 
tbody.rows[0] .insertCell (0); 
tbody.rows[0] .cells[0] .appendChild(document .createTextNode("Cell 1,1")); 
tbody.rows[0] .insertCell(1); 
tbody.rows[0] .cells[1] .appendChild(document .createTextNode("Cell 2,1")); 


// 创建 第 二 行 
tbody.insertRow(1); 
tbody.rows[1] .insertCell(0); 
tbody .rows [1] .cells[0] .appendChild(document .createTextNode("Cell 1,2")); 
tbody.rows[1] .insertCell(1); 
tbody .rows [1] .cells[1] .appendChild(document .createTextNode("Cell 2,2")); 


// 把 表格 添加 到 文档 主体 
document .body .appendChild(table); 


这 里 创建 <table> 和 <tboqy> 元 素 的 代码 没有 变 。 变 化 的 是 创建 两 行 的 部 分 ， 这 次 使 用 了 HTML 





DOM 表格 的 属性 和 方法 。 创 建 第 一 行 时 ， 在 <tbody> 元 素 上 调 
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加 到 了 <tbody> 





表示 把 这 一 行 放 在 什么 位 置 。 然 后 ， 使 用 tpoqy .rows [0] 来 3 





的 位 置 0。 





用 了 insertRovw() 方 法 。 传 人 参数 0， 














用 这 一 行 ， 因 为 这 一 行 刚刚 创建 并 被 添 


创建 表 元 的 方式 也 与 之 类 似 。 在 <tr> 元 素 上 调用 ijnsertcell() 方 法 , 传人 参数 0, 表示 把 这 个 表 
元 放 在 什么 位 置 上 上。 然后， 使 用 tbody .rows [0] .cells[0] 来 引用 这 个 表 元 ， 因 为 这 个 表 元 刚刚 创建 
并 被 添加 到 了 <tr> 的 位 置 0。 








也 更 容易 理解 。 


虽然 以 上 两 种 代码 在 技术 上 都 是 I 下 而 



































14.2.4 ”使 用 NodeList 





的 ,但 使 用 这 些 属性 和 方法 创建 表格 让 代码 变 得 更 有 逻辑 性 ， 








理解 NodeList 对 象 和 相关 的 NamedNodeMap、HTMLCollection， 是 理解 DOM 编程 的 关键 。 这 














3 个 集合 类 型 都 是 “实时 的 ”意味 着 文档 结构 的 变化 会 实时 地 在 它们 身上 反映 出 来 ,因此 它们 的 值 始终 14 
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代表 最 新 的 状态 。 实 际 上 ，NodeList 就 是 基于 DOM 文档 的 实时 查询 。 例 如 ， 下 面 的 代码 会 导致 无 穷 
循环 : 


let divs = document .getElementsByTagName ("div");} 














for (let i = 0; i < divs.length; ++i)f{ 
let div = document.createElement ("div"); 
document .body .appendChild(div); 

} 


第 一 行 取得 了 包含 文档 中 所 有 <aiv> 元 素 的 HTMLCollection。 因 为 这 个 集合 是 “实时 的 "， 所 以 
任何 时 候 只 要 向 页 面 中 添加 一 个 新 <div> 元 素 ， 再 查询 这 个 集合 就 会 多 一 项 。 因 为 浏览 回 不 希望 保存 每 
次 创建 的 集合 ， 所 以 就 会 在 每 次 访问 时 更 新 集合 。 这 样 就 会 出 现 前 面 使 用 循环 的 例子 中 所 演示 的 问 题 。 
每 次 循环 开始 ， 都 会 求 值 i < divs.1length。 这 意味 着 要 执行 获取 所 有 <div> 元 素 的 查询 。 因 为 循环 
体 中 会 创建 并 向 文档 添加 一 个 新 <aiv> 元 素 ， 所 以 每 次 循环 divs .1length 的 值 也 会 递增 。 因 为 两 个 值 
都 会 递增 ， 所 以 i 将 永远 不 会 等 于 divs .length。 

使 用 ES6 迭代 器 并 不 会 解决 这 个 问题 , 因为 迭代 的 是 一 个 永远 增长 的 实时 身 
致 无 穷 循环 : 

for (let div of document.getElementsByTagName ("div"))t 
let newDiv = document.createElement ("div"); 


document .body .appendChild (newDiv); 
} 


任何 时 候 要 迭代 NodeList， 最 好 再 初始 化 一 个 变量 保存 当时 查询 时 的 长 度 ， 然 后 用 循环 变量 与 这 
个 变量 进行 比较 ， 如 下 所 示 : 


let divs = document .getElementsByTagName ("div");} 




























































































合 。 以 下 代码 仍然 会 导 


mn 



































for (let i = 0, len = divs.length; i < len; ++i) { 
let div = document.createElement ("div"); 
document .body .appendChild(div); 

} 


在 这 个 例子 中 ,又 初始 化 了 一 个 保存 集合 长 度 的 变量 len。 因 为 len 保存 着 循环 开始 时 集合 的 长 度 ， 
而 这 个 值 不 会 随 集合 增 大 动态 增长 ， 所 以 就 可 以 避免 前 面 例子 中 出 现 的 无 穷 循 环 。 本 章 还 会 使 用 这 种 技 
术 来 演示 迭代 NodeList 对 象 的 首选 方式 。 

另外 ， 如 果 不 想 再 初始 化 一 个 变量 ， 也 可 以 像 下 面 这 样 反 向 迭代 集合 : 


let divs = document .getElementsByTagName ("div");} 





















































for (let i = divs.length - 1; i >= 0; --i) { 
let div = document.createElement ("div"); 
document .body .appendChild(div); 

; 


一 般 来 说 , 最 好 限制 操作 NodeList 的 次 数 。 因 为 每 次 查询 都 会 搜索 整个 文档 ， 所 以 最 好 把 查询 到 
的 NodeList 缓存 起 来 。 





14.3 MutationObserver 接口 


不 久 前 添加 到 DOM 规范 中 的 MutationObserver 接口 , 可 以 在 DOM 被 修改 时 异步 执行 回调 。 使 
用 MutationObserver 可 以 观察 整个 文档 、 DOM 树 的 一 部 分 , 或 某 个 元 素 。 此 外 还 可 以 观察 元 素 属 性 、 
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子 节 点 、 文 本 ， 或 者 前 三 者 任意 组 合 的 变化 。 





注意 新 引进 MutationObserver 接口 是 为 了 取代 废弃 的 MutationEvent。 





14.3.1 基本 用 法 
MutationObserver 的 实例 要 通过 调用 MutationObserver 构造 哨 数 并 传人 一 个 回调 函数 来 创建 : 


let observer = new MutationObserver(() => console.log('DOM was mutated!')); 


























1. observe() 方 法 

新 创建 的 MutationObserver 实例 不 会 关联 DOM 的 任何 部 分 。 要 把 这 个 opserver 与 DOM 关 
联 起 来 , 需要 使 用 observe () 方 法 。 这 个 方法 接收 两 个 必需 的 参数 : 要 观察 其 变化 的 DOM 节点 , 以 及 
一 个 MutationObserverInit 对 象 。 

MutationObserverInit 对 象 用 于 控制 观察 哪些 方面 的 变化 ,是 一 个 键 / 值 对 形式 配置 选项 的 字典 。 
例如 ， 下 面 的 代码 会 创建 一 个 观察 者 ( observer ) 并 配置 它 观察 <bpody> 元 素 上 的 属性 变化 : 


let observer = new MutationObserver(() => console.log('<body> attributes changed')); 

















observer.observe(ldocument .body, { attributes: true }); 

执行 以 上 代码 后 ，<body> 元 素 上 任何 属性 发 生变 化 都 会 被 这 个 Mutationobserver 实例 发 现 , 然 
后 就 会 异步 执行 注册 的 回调 函数 。<body> 元 素 后 代 的 修改 或 其 他 非 属性 修改 都 不 会 触发 回调 进入 任务 
队列 。 可 以 通过 以 下 代码 来 验证 : 


let observer = new MutationObserver(() => console.log('<body> attributes changed')); 
































Observer.observe(document .body, { attributes: true }); 


document .body.className = 'foo'; 
console.log('Changed body class'); 


// Changed body class 
// <body> attributes changed 


注意 ， 回 调 中 的 console.1og () 是 后 执行 的 。 这 表明 回调 并 非 与 实际 的 DOM 变化 同步 执行 。 

2. 回调 与 MutationRecord 

每 个 回调 都 会 收 到 一 个 MutationRecord 实例 的 数组 。MutationRecord 实例 包含 的 信息 包括 发 
生 了 什么 变化 ， 以 及 DOM 的 哪 一 部 分 受到 了 影响 。 因 为 回调 执行 之 前 可 能 同时 发 生 多 个 满足 观察 条 件 
的 事件 ， 所 以 每 次 执行 回调 都 会 传人 一 个 包含 按 顺 序 人 队 的 MutationRecord 实例 的 数组 。 

下 面 展 示 了 反映 一 个 属性 变化 的 MutationRecord 实例 的 数组 : 


let observer = new MutationObserver!( 
(mutationRecords) => console.log(mutationRecords)); 






































observer.observe(document .body, { attributes: true }); 


document .body.setAttribute('foo', 'bar'); 
Zw 
7 { 


// addedNodes: NodeList []， 
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// attributeName: "foo", 

// attributeNamespace: null, 
这 nextSibling: null, 

VA oldValue: null, 

// previousSibling: null 

VA removedNodes: NodeList []， 
// target: body 

// type: "attributes" 

// } 

| 


下 面 是 一 次 涉及 命名 空间 的 类 似 变 化 : 
let observer = new MutationObserver!\( 
(mutationRecords) => console.log(mutationRecords)); 


observer.observe(document .body, { attributes: true }); 


document .body.setAttributeNS('baz', 'foo', 'bar'); 


// [ 

// t 

// addedNodes: NodeList [], 
// attributeName: "foo", 

// attributeNamespace: "baz", 
// nextSibling: null, 

VA oldVvalue: null, 

// previousSibling: null 

“这 removedNodes: NodeList [], 
这 target: body 

// type: "attributes" 

// } 

// ] 


连续 修改 会 生成 多 个 MutationRecora 实例 , 下 次 回调 执行 时 就 会 收 到 包含 所 有 这 些 实例 的 数组 ， 
顺序 为 变化 事件 发 生 的 顺序 : 


let observer = new MutationObserver!\( 
(mutationRecords) => console.log (mutationRecords)); 











observer.observe(document .body, { attributes: true }); 


document .body.className = 'foo'; 
document .body.className = 'bar'; 
document .body.className = 'baz'; 


// [MutationRecord, MutationRecord, MutationRecord] 


下 表 列 出 了 MutationRecord 实例 的 属性 。 











属 性 说 明 
target 被 修改 影响 的 目标 节点 
type 字符 串 ， 表 示 变 化 的 类 型 : "attributes"、"characterData'" 或 "chilgList" 
olqvValue 如 果 在 MutationobserverInit 对 象 中 启用 (attributeoldqvalue 或 characterData Oldvalue 





为 true )， "atttributes" 或 "characterData" 的 变化 事件 会 设置 这 个 属性 为 被 蔡 代 的 值 
"chilgList" 类 型 的 变化 始终 将 这 个 属性 设置 为 nul1 
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( 续 ) 
属 性 说 明 
attributeName 对 于 "attributes" 类 型 的 变化 ， 这 里 保存 被 修改 属性 的 名 字 





其 他 变化 事件 会 将 这 个 属性 设置 为 nu11 





























attributeNamespace 对 于 使 用 了 命名 空间 的 "attributes" 类 型 的 变化 ， 这 里 保存 被 修改 属性 的 名 字 








removedNodes 对 于 "chilgList" 类 型 
































其 他 变化 事件 会 将 这 个 属性 设置 为 nu11 


addedNodes 对 于 "chilgList" 类 型 的 变化 ， 返 回 包含 变化 中 添加 节点 自 





odeList 





这 





odeList 





的 变化 ， 返 回 包含 变化 中 删除 节点 自 


这 












































previousSibling 对 于 "chilgList" 类 型 的 变化 ， 返 回 变 化 节点 的 前 一 个 同胞 Node 
默认 为 nul1 
nextSibling 对 于 "chilgList" 类 型 的 变化 ， 返 回 变 化 节点 的 后 一 个 同胞 Node 


默认 为 nul1 





传 给 回调 函数 的 第 二 个 参数 是 观察 变化 的 Mutationobservez 的 实例 ， 演 示 如 下 : 


let observer = new Mutationobservez ( 
(mutationRecords, mutationObserver) => console.log(mutationRecords, 


mutationObserver)); 
observer.observe (document .body, 
document .body.className = 'foo'; 


// [MutationRecord], MutationObs 


3. disconnect () 方 法 





{ attributes: true }); 


erver 





默认 情况 下 ,只 要 被 观察 的 元 素 不 被 垃圾 回收 , MutationObserver 的 回调 就 会 响应 DOM 变化 事 





件 ， 从 而 被 执行 。 要 提前 终止 执行 回调 ， 














可 以 调用 aisconnect () 方 法 。 下 面 的 例子 演示 了 同步 调用 





disconnect () 之 后 , 不 仅 会 停止 此 后 变化 事件 的 回调 , 也 会 抛弃 已 经 加 入 任务 队列 要 异步 执行 的 回调 : 


let observer = new MutationObser 
observer.observe (document .body, 
document .body.className = 'foo'; 


observer.disconnect (); 








document .body.className = 'bar'; 


// (没有 日 志 输 出 ) 


要 想 让 已 经 加 入 任务 队列 的 回调 执行 ， 


disconnect (): 





ver(() => console.log('<body> attributes changed')); 


{ attributes: true }); 





可 以 使 用 setTimeout () 让 已 经 入 列 的 回调 执行 完毕 再 调用 


let observer = new MutationObserver(() => console.log('<body> attributes changed')); 


observer.observe (document .body, 


{ attributes: true }); 
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document .body.className = 'foo'; 


setTimeout(() => { 
observer.disconnect (); 
document .body.className = 'bar'; 
}, 0); 


// <body> attributes changed 


4. 复 用 MutationObserver 
多 次 调用 observe () 方 法 , 可 以 复 用 一 个 MutationObserver 对 象 观察 多 个 不 同 的 目标 节点 。 此 
时 ,MutationRecord 的 target 属性 可 以 标识 发 生变 化 事件 的 目标 节点 .下 面 的 示例 演示 了 这 个 过 程 : 


let observer = new Mutationobserver ( 
(mutationRecords) => console.log (mutationRecords.map((x) => 




















x.target))); 


// 向 页 面 主体 添加 两 个 子 节点 

let childA = document.createElement ('div'), 
childB = document.createElement ('span'); 

document .body .appendChild(chilgdA); 

document .body .appendChild(childB); 


// 观察 两 个 子 节点 
Observer.observe(childaA, { attributes: true }); 
Observer.observe(childB, { attributes: true }); 


// 修改 两 个 子 节点 的 属性 
childA.setAttribute('foo', 'bar'); 
childB.setAttribute('foo', 'bar'); 


// [<div>, <span>] 


disconnect () 方 法 是 一 个 “一 刀 切 ”的 方案 ， 调 用 它 会 停止 观察 所 有 目标 : 


let observer = new Mutationobserver ( 
(mutationRecords) => console.1log(mutationRecords .map ( (x) => 


























x.target))); 


// 向 页 面 主体 添加 两 个 子 节点 

let childA = document.createElement ('div'), 
childB = document.createElement ('span'); 

document .body .appendChild(chilgdA); 

document .body .appendChild(childB); 


// 观察 两 个 子 节点 
observer.observe(childA, { attributes: true }); 
observer.observe(childB, { attributes: true }); 


observer .disconnect (); 

// 修改 两 个 子 节点 的 属性 
childA.setAttribute('foo', 'bar'); 
childB.setAttribute('foo', 'bar'); 


// (没有 日 志 输 出 ) 
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5. 重用 Mutationobservez 
调用 aisconnect () 并 不 会 结束 Mutationobserver 的 生命 。 还 可 以 重新 使 用 这 个 观察 者 ， 再 将 
它 关 联 到 新 的 目标 节点 。 下 面 的 示例 在 两 个 连续 的 异步 块 中 先 断 开 然 后 又 恢复 了 观察 者 与 <body> 元 素 
的 关联 : 
let observer = new MutationObserver(() => console.log('<body> attributes 
changed'));} 






























































observer.observe(document .body, { attributes: true }); 





// 这 行 代码 会 触发 变化 事件 
document .body.setAttribute('foo', 'bar'); 


SetTimeout (() => { 
observer .disconnect () ， 


// 这 行 代码 不 会 触发 变化 事件 


document .body.setAttribute('bar', 'baz'); 
ee 
SetTimeout (() => { 


// Reattach 
Observer.observe(document .body, { attributes: true }); 


// 这 行 代 码 会 触发 变化 事件 
document .body.setAttribute('baz', 'gqux'); 
dO 





// <body> attributes changed 
// <body> attributes changed 


14.3.2 MutationObserverInit 与 观察 范围 











HH 


。 粗 略 地 讲 ， 观 察 者 可 以 观察 的 引 





mn 
ey 








MutationObserverInit 对 象 用 于 控制 对 目标 节点 的 观察 范 
件 包括 属性 变化 、 文 本 变化 和 子 节点 变化 。 
下 表 列 出 了 MutationobserverInit 对 象 的 属性 。 






































属 性 说 ” 明 

subtree 布尔 值 ， 表 示 除 了 目标 节点 ， 是 否 观 察 目 标 节点 的 子 树 (后代) 
如 果 是 false， 则 只 观察 目标 节点 的 变化 ; 如 果 是 true， 则 观察 目标 节点 及 其 整个 子 树 
默认 为 false 

attributes 布尔 值 ， 表 示 是 否 观 察 目标 节点 的 属性 变化 
默认 为 false 

attributeFilter 字符 串 数 组 ， 表 示 要 观察 哪些 属性 的 变化 
把 这 个 值 设置 为 true 也 会 将 attributes 的 值 转换 为 true 
默认 为 观察 所 有 属性 

attripbuteOldValue 布尔 值 ， 表 示 MutationRecord 是 否 记录 变化 之 前 的 属性 值 








把 这 个 值 设 置 为 true 也 会 将 attributes 的 值 转换 为 true 
默认 为 false 
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( 续 ) 
属 性 说 明 
characterData 布尔 值 ， 表 示 修 改 字符 数据 是 否 触 发 变化 事件 
默认 为 false 
characterData0ldValue 布尔 值 ， 表 示 MutationRecora 是 否 记录 变化 之 前 的 字符 数据 


把 这 个 值 设置 为 true 也 会 将 characterData 的 值 转换 为 true 
默认 为 false 





chilgList 布尔 值 ， 表 示 修 改 目标 节点 的 子 节 点 是 否 触 发 变化 事件 
默认 为 false 


注意 ”在 调用 observe() 时 ，MutationObserverInit 对 象 中 的 attribute、characterData 
和 chilgList 属性 必须 至 少 有 一 项 为 true (无 论 是 直接 设置 这 几 个 属性 , 还 是 通过 设置 


attzibuteoldvalue 等 属性 间接 导致 它们 的 值 转换 为 true )。 否则 会 抛 出 错误 ， 因 为 没 
有 任何 变化 事件 可 能 触发 回调 。 





1. 观察 属性 
MutationOobserver 可 以 观察 节点 属性 的 添加 、 移 除 和 修改 。 要 为 属性 变化 注册 回调 ,需要 在 
MutationObserverInit 对 象 中 将 attriputes 属性 设置 为 true， 如 下 所 示 : 


let observer = new Mutationobserver ( 
(mutationRecords) => console.log(mutationRecords)); 

















observer.observe(document .body, { attributes: true }); 


// 添加 属性 
document .body.setAttribute('foo', 'bar'); 


// 修改 属性 
document .body.setAttribute('foo', 'baz'); 


// 移 除 属性 
document .body.removeAttribute('foo'); 





// 以 上 变化 都 被 记录 下 来 了 
// [MutationRecord, MutationRecord, MutationRecord] 
把 attributes 设置 为 true 的 默认 行为 是 观察 所 有 属性 ， 但 不 会 在 MutationRecord 对 象 中 记 
录 原 来 的 属性 值 。 如 果 想 观察 基 个 或 某 几 个 属性 ,可 以 使 用 attributeFilte 属性 来 设置 白 名 单 ， 即 
一 个 属性 名 字符 串 数 组 : 


let observer = new Mutationobserver ( 
(mutationRecords) => console.log(mutationRecords)); 


























observer.observe(document .body, { attributeFilter: ['foo'] }); 


// 添加 和 白 名 单 属性 
document .body.setAttribute('foo', 'bar'); 


// 添加 被 排除 的 属性 
document .body.setAttribute('baz', 'gqux'); 
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// 只 有 foo 属性 的 变化 被 记录 了 
// [MutationRecord] 


如 果 想 在 变化 记录 中 保存 属性 原来 的 值 ， 可 以 将 attributeoldavalue 属性 设置 为 ru 


let observer = new MutationObserver\( 
(mutationRecords) => console.log (mutationRecords.map((x) => x.oldvalue))); 




















observer.observe(document .body, { attributeOldVvalue: true }); 


document .body.setAttribute('foo', 'bar'); 
document .body.setAttribute('foo', 'baz'); 
document .body.setAttribute('foo', 'qgqux'); 


由 





// 每 次 变化 都 保留 了 上 一 次 的 值 

// [null, 'bar', 'baz'] 

2. 观察 字符 数据 

MutationObserver 可 以 观察 文本 节点 (如 Text、Comment 或 ProcessingInstruction 节点 ) 
中 字符 的 添加 、 删 除 和 修改 。 要 为 字符 数据 注册 回调 ,需要 在 MutationobserverInit 对 象 中 将 
characterData 属性 设置 为 true， 如 下 所 示 : “ 


let observer = new MutationObserver\( 
(mutationRecords) => console.log(mutationRecords)); 











// 创建 要 观察 的 文本 节点 
document .body.firstChild.textContent = 'foo'; 


observer.observe (document .body.firstChild, { characterData: true }); 


// 赋值 为 相同 的 字符 囊 
document .body.firstChild.textContent = 'foo'; 


// 赋值 为 新 字符 事 
document .body.firstChild.textContent = 'bar'; 


// 通过 节点 设置 函数 赋值 
document .body.firstChild.textContent = 'baz'; 





// 以 上 变化 都 被 记录 下 来 了 

// [MutationRecord, MutationRecord, MutationRecord] 

将 characterData 属性 设置 为 true 的 默认 行为 不 会 在 MutationRecord 对 象 中 记录 原来 的 字符 
数据 。 如果 想 在 变化 记录 中 保存 原来 的 字符 数据 , 可 以 将 characterDataoldqvalue 属性 设置 为 true: 


let observer = new MutationObserver\( 
(mutationRecords) => console.log (mutationRecords.map((x) => x.oldvalue))); 
document .body.innerText = 'foo'; 



































observer.observe (document .body.firstChild, { characterDataOldVvalue: true }); 


document .body.innerText = 'foo'; 
document .body.innerText = 'bar'; 








@ 设置 元 素 文本 内 容 的 标准 方式 是 textcontent 属性 。 Element 类 也 定义 了 innerText 属性 , 与 textcontent 类 似 。 
但 innerText 的 定义 不 严谨 ,浏览 器 间 的 实现 也 存在 兼容 性 问题 ， 因 此 不 建议 再 使 用 了 。 译 者 注 
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document .body.firstChild.textContent = 'baz'; 


// 每 次 变化 都 保留 了 上 一 次 的 值 

// ["foo", "foo", "bar"] 

3. 观察 子 节点 

MutationObserver 可 以 观察 目标 节点 子 节 点 的 添加 和 移 除 。 要 观察 子 节 点 ， 需 要 在 Mutation- 
ObserverInit 对 象 中 将 chilgList 属性 设置 为 true。 

下 面 的 例子 演示 了 添加 子 节点 : 


// 清空 主体 
document .body.innerHTML = ''; 























let observer = new Mutationobserver ( 
(mutationRecords) => console.log(mutationRecords)); 


observer .observe(dqocument .body, { childList: true }); 


document .body .appendChild(document .createElement ('div')); 





2 

// { 

// addedNodes: NodeList [div]， 
// attributeName: null, 

// attributeNamespace: null, 
// oldValue: null, 

// nextSibling: null, 

// previousSibling: null, 

// removedNodes: NodeList[], 
gh target: body, 

// type: "childList", 

// } 

| 

下 面 的 例子 演示 了 移 除 子 节点 : 

// 清空 主体 


document .body.innerHTML = ''; 


let observer = new MutationObserver\( 
(mutationRecords) => console.log(mutationRecords)); 


observer .observe(dqocument .bodqy，({ childList: true }); 


document .body .appendChild(document .createElement ('div')); 


el 

jp 二 

// addedNodes: NodeList[], 
// attributeName: null, 

// attributeNamespace: null, 
VA oldValue: null, 

// nextSibling: null, 

// previousSibling: null, 

// removedNodes: NodeList [aiv]， 
// target: body, 

// type: "childList", 

// } 


14.3 ”MutationObserver 接口 441 

















对 子 节 点 重新 排序 ( 尽管 调用 一 个 方法 即 可 实现 ) 会 报告 两 次 变化 事件 ， 因 为 从 技术 上 会 涉及 先 移 
除 和 再 添加 : 


// 清空 主体 
document .body.innerHTML = ''; 





let observer = new MutationObserver\( 
(mutationRecords) => console.log(mutationRecords)); 


// 创建 两 个 初始 子 节点 
document .body .appendChild(document .createElement ('div')); 
document .body.appendChild(document .createElement ('span')); 


observer .observe (Qocument .body, { childList: true }); 


// 交换 子 节点 顺序 
document .bodqy. insertBefore (document .body.lastChild, document .body.firstchild)， 


// 发 生 了 两 次 变化 : 第 一 次 是 节点 被 移 除 ， 第 二 次 是 节点 被 添加 


大 

// { 

// addedNodes: NodeList[], 
/这 attributeName: null, 

// attributeNamespace: null, 
4 oldValue: null, 

// nextSibling: null, 

// previousSibling: diyv, 

// removedNodes: NodeList[span], 
A target: body, 

A type: childList, 

// } 

£2 

// addedNodes: NodeList[span], 
// attributeName: null, 

A attributeNamespace: null, 
/YY oldValue: null, 

// nextSibling: Qiv， 

// previousSibling: null, 

// removedNodes: NodeList[], 
// target: body, 

A type: "childList", 

»/ } 

Wd 


4. 观察 子 树 
默认 情况 下 ，MutationOobserver 将 观察 的 范围 限定 为 一 个 元 素 及 其 子 节点 的 变化 。 可 以 把 观察 


的 范围 扩展 到 这 个 元 素 的 子 树 ( 所 有 后 代 节 点 ), 这 需要 在 MutationObserverInit 对 象 中 将 subtree 















































属性 设置 为 true。 
下 面 的 代码 展示 了 观察 元 素 及 其 后 代 节 点 属性 的 变化 : 
// 清空 主体 


document .body.innerHTML = ''; 


let observer = new MutationObserver\( 
(mutationRecords) => console.log(mutationRecords)); 


// 创建 一 个 后 代 


document .body .appendChild(document .createElement ('div')); 
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// 观察 <body> 元 素 及 其 子 树 


observer.observe(document .body, { attributes: true, subtree: true }); 


// 修改 <boqy> 元 素 的 子 树 
document .body.firstChild.setAttribute('foo', 'bar'); 


// 记录 了 子 树 变化 的 事件 


Ll 

// t 

// addedNodes: NodeList[], 
// attributeName: "foo", 

// attributeNamespace: null, 
// oldValue: null, 

// nextSibling: null, 

// previousSibling: null, 

A removedNodes: NodeList[], 
// target: diyv, 

这 type: "attributes", 

// } 

4 




















有 意思 的 是 , 被 观察 子 树 中 的 节点 被 移出 子 树 之 后 仍然 能 够 触发 变化 事件 。 这 意味 着 在 子 树 中 的 节 
点 离开 该 子 树 后 ， 即 使 严格 来 讲 该 节点 已 经 脱离 了 原来 的 子 树 ， 但 它 仍然 会 触发 变化 事件 。 

下 面 的 代码 演示 了 这 种 情况 : 

// 清空 主体 

document .body.innerHTML = ''; 














let observer = new MutationObserver\( 
(mutationRecords) => console.log(mutationRecords)); 


let subtreeRoot = document.createElement ('div'), 
subtreeLeaf = document .createElement ('span'); 


// 创建 包含 两 层 的 子 树 
document .body .appendChild(subtreeRoot); 
subtreeRoot.appendChild(subtreeLeaf); 





// 观察 子 树 


observer.observe(subtreeRoot, { attributes: true, subtree: true }); 


// 把 节点 转移 到 其 他 子 树 


document .body.insertBefore(subtreeLeaf, subtreeRoot); 
subtreeLeaf.setAttribute('foo', 'bar'); 


// 移出 的 节点 仍然 触发 变化 事件 
// [MutationRecord] 


14.3.3 ”异步 回调 与 记录 队列 


MutationObserver 接口 是 出 于 性 能 考虑 而 设计 的 ， 其 核心 是 异步 回调 与 记录 队列 模型 。 为 了 在 
大 量变 化 事件 发 生 时 不 影响 性 能 ， 每 次 变化 的 信息 ( 由 观察 者 实例 决定 ) 会 保存 在 MutationRecord 
实例 中 ， 然 后 添加 到 记录 队列 。 这 个 队列 对 每 个 Mutationobserver 实例 都 是 唯一 的 ， 是 所 有 DOM 
变化 事件 的 有 序列 表 。 
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1. 记录 队列 

每 次 MutationRecord 被 添加 到 Mutationobserver 的 记录 队列 时 , 仅 当 之 前 没有 已 排 期 的 微 任 
务 回调 时 ( 队列 中 微 任务 长 度 为 0 ), 才 会 将 观察 者 注册 的 回调 ( 在 初始 化 Mutationobservet 时 传人 ) 
作为 微 任务 调度 到 任务 队列 上 。 这 样 可 以 保证 记录 队列 的 内 容 不 会 被 回调 处 理 两 次 。 

不 过 在 回调 的 微 任务 异步 执行 期 间 , 有 可 能 又 会 发 生 更 多 变化 事件 。 因 此 被 调用 的 回调 会 接收 到 一 
个 MutationRecozrd 实例 的 数组 ， 顺 序 为 它们 进入 记录 队列 的 顺序 。 回 调 要 负责 处 理 这 个 数组 的 每 一 
个 实例 ， 因 为 函数 退出 之 后 这 些 实现 就 不 存在 了 。 回 调 执行 后 ， 这 些 MutationRecorgd 就 用 不 着 了 ， 
因此 记录 队列 会 被 清空 ， 其 内 容 会 被 丢弃 。 

2. takeRecords () 方法 

调用 MutationObserver 实例 的 takeRecords () 方 法 可 以 清空 记录 队列 ， 取 出 并 返回 其 中 的 所 
有 MutationRecord 实例 。 看 这 个 例子 : 


let observer = new MutationObserver\( 
(mutationRecords) => console.log(mutationRecords)); 

































































observer.observe (document .body, { attributes: true }); 





document .body.className = 'foo'; 
document .body.className = 'bar'; 
document .body.className = 'baz'; 


console.log(observer.takeRecords()); 
console.log(observer.takeRecords()); 


// [MutationRecord, MutationRecord, MutationRecord] 
// [] 


这 在 希望 断 开 与 观察 日 标的 联系 , 但 又 希望 处 理由 于 调用 disconnect () 而 被 抛弃 的 记录 队列 中 的 
MutationRecord 实例 时 比较 有 用 。 


14.3.4 ”性 能 、 内 存 与 垃圾 回收 


DOM Level 2 规范 中 描述 的 MutationEvent 定义 了 一 组 会 在 各 种 DOM 变化 时 触发 的 事件 。 由 于 
浏览 器 事件 的 实现 机 制 ， 这 个 接口 出 现 了 严重 的 性 能 问题 。 因 此 ，DOM Level 3 规定 废弃 了 这 些 事件 。 
MutationObserver 接口 就 是 为 替代 这 些 事件 而 设计 的 更 实用 、 性 能 更 好 的 方案 。 

将 变化 回调 委托 给 微 任务 来 执行 可 以 保证 事件 同步 触发 , 同时 避免 随 之 而 来 的 混乱 。 为 Mutation- 
Observer 而 实现 的 记录 队列 ， 可 以 保证 即使 变化 事件 被 爆发 式 地 触发 ， 也 不 会 显著 地 拖 慢 浏览 器 。 

无 论 如 何 ， 使 用 Mutationobservez 仍然 不 是 没有 代价 的 。 因 此 理解 什么 时 候 避 免 出 现 这 种 情况 
就 很 重要 了 。 

1. MutationObserver 的 引用 

MutationObserver 实例 与 目标 节点 之 间 的 引用 关系 是 非 对 称 的 。Mutationobserver 拥有 对 要 
观察 的 目标 节点 的 弱 引 用 。 因 为 是 弱 引 用 ， 所 以 不 会 妨碍 垃圾 回收 程序 回收 目标 节点 。 

然而 ， 目 标 节点 却 拥有 对 Mutationobservez 的 强 引 用 。 如 果 目 标 节点 从 DOM 中 被 移 除 ， 随 后 
被 垃圾 回收 ， 则 关联 的 MutationObserver 也 会 被 垃圾 回收 。 
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2. MutationRecord 的 引用 

记录 队列 中 的 每 个 MutationRecord 实例 至 少 包 含 对 已 有 DOM 节点 的 一 个 引用 。 如 果 变 化 是 
childList 类 型 ， 则 会 包含 多 个 节点 的 引用 。 记 录 队 列 和 回调 处 理 的 默认 行为 是 耗 尽 这 个 队列 ， 处 至 
每 个 MutationRecord， 然 后 让 它们 超出 作用 域 并 被 垃圾 回收 。 

有 时候 可 能 需要 保存 某 个 观察 者 的 完整 变化 记录 。 保 存 这 些 MutationRecord 实例 ， 也 就 会 保存 
它们 引用 的 节点 ,因而 会 妨碍 这 些 节 点 被 回收 ,如 果 需 要 尽快 地 释放 内 存 , 建 议 从 每 个 MutationRecorgd 
抽取 出 最 有 用 的 信息 ， 然 后 保存 到 一 个 新 对 象 中 ， 最 后 抛弃 MutationRecord。 


14.4 ”小 结 


文档 对 象 模型 (DOM，Document Object Model ) 是 语言 中 立 的 HTML 和 XML 文档 的 API。DOM 
Level1 将 HIML 和 XML 文档 定义 为 一 个 节点 的 多 层级 结构 ， 并 暴露 出 JavaScript 接口 以 操作 文档 的 底 
层 结 构 和 外 观 。 

DOM 由 一 系列 节点 类 型 构成 ， 主 要 包括 以 下 几 种 。 

口 Node 是 基准 节点 类 型 ， 是 文档 一 个 部 分 的 抽象 表示 ， 所 有 其 他 类 型 都 继承 Node。 

口 Document 类 型 表示 整个 文档 ， 对 应 树 形 结构 的 根 节点 。 在 JavaScript 中 ，document 对 象 是 
Document 的 实例 ， 拥 有 查询 和 获取 节点 的 很 多 方法 。 

口 Element 节点 表示 文档 中 所 有 HTML 或 XML 元 素 ， 可 以 用 来 操作 它们 的 内 容 和 属性 。 

口 其 他 节点 类 型 分 别 表示 文本 内 容 、 注 释 、 文 档 类 型 、CDATA 区 块 和 文档 片段 。 

DOM 编程 在 多 数 情 况 下 没什么 问题 , 在 涉及 <script> 和 <style> 元 素 时 会 有 一 点 兼容 性 问题 。 因 
为 这 些 元 素 分 别 包 含 脚本 和 样式 信息 ， 所 以 浏览 器 会 将 它们 与 其 他 元 素 区 别 对 待 。 

要 理解 DOM， 最 关键 的 一 点 是 知道 影响 其 性 能 的 问题 所 在 。DOM 操作 在 JavaScript 代码 中 是 代价 
比较 高 的 ，NodeList 对 象 尤其 需要 注意 。NodeLi st 对象 是 “实时 更 新 ”的 ， 这 意味 着 每 次 访问 它 都 
会 执行 一 次 新 的 查询 。 考 虑 到 这 些 问 题 ， 实 践 中 要 尽量 减少 DOM 操作 的 数量 。 

MutationObserver 是 为 代替 性 能 不 好 的 MutationEvent 而 问世 的 ,使 用 它 可 以 有 效 精 准 地 监控 
DOM 变化 ， 而 且 API 也 相对 简单 。 
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s1Ds 
DOM 扩展 


本 章 内 容 
口 理解 Selectors API 
口 使 用 HTML5 DOM 扩展 








尽管 DOM API 已 经 相当 不 错 , 但 仍然 不 断 有 标准 或 专 有 的 扩展 出 现 ， 以 支持 更 多 功能 。2008 年 以 
前 , 大 部 分 浏览 器 对 DOM 的 扩展 是 专 有 的 。 此 后 ，W3C 开始 着 手 将 这 些 已 成 为 事实 标准 的 专 有 扩展 编 
制 成 正式 规范 。 
基于 以 上 背景 ,诞生 了 描述 DOM 扩展 的 两 个 标准 : Selectors API 与 HIML5。 这 两 个 标准 体现 了 社 
区 需求 和 标准 化 某 些 手段 及 API 的 愿景 。 另 外 还 有 较 小 的 Element Traversal 规范 ,增加 了 一 些 DOM 属性 。 
专 有 扩展 虽然 还 有 ， 但 这 两 个 规范 (特别 是 HTML5 ) 已 经 涵盖 其 中 大 部 分 。 本 章 也 会 讨论 专 有 扩展 。 
本 章 所 有 内 容 已 经 得 到 市 场 占有 率 名 列 前 茅 的 所 有 主流 浏览 器 支持 ， 除 非特 别 说 明 。 


15.1 Selectors API 


JavaScript 库 中 最 流行 的 一 种 能 力 就 是 根据 CSS 选择 符 的 模式 匹配 DOM 元 素 。 比 如 ，jQuery 就 完全 
以 CSS 选择 符 查询 DOM 获取 元 素 引 用 ,而 不 是 使 用 getElementById() 和 getElementsByTagName () 。 

Selectors API ( 参见 W3C 网 站 上 的 Selectors API Level 1 ) 是 W3C 推荐 标准 ， 规 定 了 浏览 器 原生 支 
持 的 CSS 查询 API。 支持 这 一 特性 的 所 有 JavaScript 库 都 会 实现 一 个 基本 的 CSS 解析 器 ， 然 后 使 用 已 有 
的 DOM 方法 搜索 文档 并 匹配 目标 节点 。 虽 然 库 开发 者 在 不 断 改 进 其 性 能 ， 但 JavaScript 代码 能 做 到 的 
毕竟 有 限 。 通 过 浏览 器 原生 支持 这 个 API， 解 析 和 遍历 DOM 树 可 以 通过 底层 编译 语言 实现 ， 性 能 也 有 
了 数量 级 的 提升 。 

Selectors API Level 1 的 核心 是 两 个 方法 : querySelector() 和 querySelectorAll()。 在 兼容 浏 
览 器 中 ，Document 类 型 和 Element 类 型 的 实例 上 都 会 暴露 这 两 个 方法 。 

Selectors API Level 2 规范 在 Element 类 型 上 新 增 了 更 多 方法 ， 比 如 matches () 、find() 和 
findaAll()。 不 过 ， 目 前 还 没有 浏览 器 实现 或 宣称 实现 find () 和 fingdAll ()。 












































































































































15.1.1 querySelLector() 
querySelector() 方 法 接收 CSS 选择 符 参数 ， 返 回 匹配 该 模式 的 第 一 个 后 代 元 素 ， 如 果 没 有 匹配 
项 则 返回 nul1。 下 面 是 一 些 例 子 : 


// 取得 <body> 元 素 
let body = document .querySelector("body"); 

















// 取得 ID 为 "myDiv" 的 元 素 
let myDiv = document .querySelector("#myDiv"); 
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// 取得 类 名 为 "selected" 的 第 一 个 元 率 
let selected = document .querySelector(".selected"); 


// 取得 类 名 为 "button" 的 图 片 


let img = document.body.querySelector ("img.button"); 

















在 Document 上 使 用 querySelector() 方 法 时 ,会 从 文档 元 素 开始 搜索 ; 在 Element 上 使 用 











querySelector () 方 法 时 ， 则 只 会 从 当前 元 素 的 后 代 中 查询 。 








用 于 查询 模式 的 CSS 选择 符 可 繁 可 简 , 依 需求 而 定 。 如 果 选 择 符 有 语法 错误 或 碰 到 不 支持 的 选择 符 ， 








则 querySelector () 方 法 会 抛 出 错误 。 


15.1.2 querySelectorAll() 


querySelectorAll () 方 法 跟 querySelector() 一 样 , 也 接收 一 个 用 于 查询 的 参数 ， 
所 有 匹配 的 节点 ， 而 不 止 一 个 。 这 个 方法 返回 的 是 一 个 NodeList 的 静态 实例 。 

再 强调 一 次 ，querySelectorAll() 返 回 的 NodeList 实例 一 个 属性 和 方法 都 不 缺 
个 静态 的 “快照 ”， 而 非 “实时 ”的 查询 。 这 样 的 底层 实现 避免 了 使 用 NodeList 对 象 可 
能 问题 。 

















本 











但 它 会 返回 


能 造成 的 性 





以 有 效 CSS 选择 符 调用 queryselectorAl1l () 都 会 返回 NodeList, 无 论 匹 配 多 少 个 元 素 都 可 以 。 





























如 果 没 有 匹配 项 ， 则 返回 空 的 NodeList 实例 。 





与 querySelector() 一 样 , querySelectorAll() 也 可 以 在 Document、DocumentFragment 和 














Blement 类 型 上 使 用 。 下 面 是 几 个 例子 : 


// 取得 ID 为 "myDiv" 的 <div> 元 素 中 的 所 有 <em> 元 素 
let ems = document .getElementById("myDiv") .querySelectorAll ("em"); 





// 取得 所 有 类 名 中 包 念 "selected" 的 元 素 


let selecteds = document .querySelectorAll(".selected"); 


// 取得 所 有 是 <p> 元 康子 元 康 的 <strong> 元 素 
let strongs = document .querySelectorAll("p strong"); 
































返回 的 NodeList 对 象 可 以 通过 for-of 循环 、item() 方 法 或 中 括号 语法 取得 个 别 元 素 。 比 如 : 











let strongElements = document .querySelectorAll("p strong"); 
// 以 下 3 个 循环 的 效果 一 样 
for (let strong of strongElements) { 


strong.className = "important"; 


for (let i = 0; i < strongElements.length; ++i) { 
strongElements.item(i).className = "important"; 





for (let i = 0; i < strongElements.length; ++i) { 
strongElements[i].className = "important"; 























与 querySelector () 方 法 一 样 , 如 果 选 择 符 有 语法 错误 或 磁 到 不 支持 的 选择 符 , 则 querysSelector- 





Al111() 方 法 会 抛 出 错误 。 
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15.1.3 matches() 


matches ( 
匹配 则 该 选择 符 返 回 true， 


if 





// true 
} 


使 
法 返回 。 

所 有 主流 浏览 器 都 支持 matches ( 
及 一 些 移动 浏览 器 支持 乔 人 
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) 方 法 (在 规范 草案 中 称 为 matchesSelector 
否则 返回 false。 例 如 : 
(document .body .matches ("body.pagel"))t{ 


用 这 个 方法 可 以 方便 地 检测 某 个 元 素 会 不 会 被 querySelector ( 





IE9 之 前 的 版 本 不 会 把 元 素 间 的 空格 当成 空 


= 
于 


EE 








和 firstchila 等 
Traversal 规范 定义 了 一 组 新 属性 。 





Element Traversal API 为 DOM 元 素 添加 了 5 个 属性 : 
Elementcount ， 返 回 子 元 素数 量 (不 包含 文本 节点 和 注释 ); 
向 第 一 个 EE 


DQ child 
DQ first 
DQ last 


DQ previous 





Elementchild, 指 
Elementchild， 指 向 最 后 一 个 
指 向 











ELementSibling ， 
previousSibling ); 


口 nextElementSipling， 指 向 后 一 个 








不 用 担心 空白 文本 节点 的 问题 


加 
| 


在 支持 的 浏览 器 中 ， 所 有 人 文 些 属 





Ht 





lement 类 型 








前 一 个 





白 节 点 ,而 其 
性 上 的 差异 。 为 了 弥补 这 个 差异 ,同时 不 影响 DOM 规范 ，W3C 通过 


lement 类 型 的 子 元 素 ( 
Element 类 型 的 同胞 元 素 ( 


) ) 接收 一 个 CSS 选择 符 参 数 ， 如 果 元 素 





) 或 querySelectorAll() 方 


。Edge、Chrome 、Firefox、Safari 和 Opera 完全 支持 ，IE9~11 





他 浏览 器 则 会 。 这 样 就 导致 了 chilaNodqes 
寸 新 的 Element 





的 子 元 素 ( 





Element 版 firstchild); 
Element 版 1astchilad ); 
Element 版 











Element 类 型 





的 同胞 元 素 ( 


Element 版 nextSipbling )。 











性 ; 














为 遍历 DOM 元 素 提 供 便利 。 这 样 开发 者 就 








举 个 例子 ， 过 去 要 以 跨 浏 i 式 裔 历 特定 


let parentElement = 
let currentChildNode = 


// 没有 子 元 素 ， 
while (currentChildNode) { 
if (currentChildNode.nodeType 
// 如 果 有 元 素 节点 ， 则 做 相应 处 理 
processChild(currentChildNode); 


} 
if 








(currentChildNode 


break; 


} 
currentChildNode = 
} 


使 


le 
le 

















parentElement = 
currentChildElement = 





{Tt 


firstChild 返回 null， 跳 过 循环 


4) A 


元 素 的 所 有 子 元 素 ， 代 码 大 致 是 这 样 写 的 : 


document .getElementBylId('parent'); 
parentElement.firstChilgd; 





parentElement.lastChild) { 


currentChildNode.nextSibling; 


用 Element Traversal 属性 之 后 ， 以 上 代码 可 以 简化 如 下 : 


document .getElementByIlId('parent'); 
parentElement.firstElementChild; 
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// 没有 子 元 素 ，firstElementChild 返回 nul1， 跳 过 循环 

while (currentChildElement) { 
// 这 就 是 元 素 节 点 ， 做 相应 处 理 
processChild(currentChildElement); 
if (currentChildElement === parentElement.lastElementChild) { 

break; 

} 
currentChildElement = currentChildElement .nextElementSibling; 


} 
IE9 及 以 上 版 本 ， 以 及 所 有 现代 浏览 器 都 支持 Element Traversal 


15.3 HTMLS5 


HTML5 代表 着 与 以 前 的 HTML 截然 不 同 的 方向 。 在 所 有 以 前 的 HTML 规范 中 ， 从 未 出 现 过 描述 
JavaScript 接口 的 情形 ，HTML 就 是 一 个 纯 标 记 语 言 。JavaScript 绑 定 的 事 ， 一 概 交 给 DOM 规范 去 定义 。 

然而 ，HTML5 规范 却 包 含 了 与 标记 相关 的 大 量 JavaScript API 定义 。 其 中 有 的 API 与 DOM 重合 ， 
定义 了 浏览 器 应 该 提供 的 DOM 扩展 。 








再 


性 。 




















注意 ”因为 HTML5 和 窗 盖 的 范围 极其 广泛 ， 所 以 本 节 主 要 讨论 其 影响 所 有 DOM 节点 的 部 


分 。HTMLS5 的 其 他 部 分 将 在 本 书后 面 的 相关 章节 中 再 讨论 。 





15.3.1 CSS 类 扩展 


自 HTML4 被 广泛 采用 以 来 ， Web 开发 中 一 个 主要 的 变化 是 class 属性 用 得 越 来 越 多 , 其 用 处 是 为 
元 素 添加 样式 以 及 语义 信息 。 自 然 地 ，JavaScript 与 CSS 类 的 交互 就 增多 了 ， 包 括 动态 修改 类 名 ， 以 及 
根据 给 定 的 一 个 或 一 组 类 名 查询 元 素 ， 等 等 。 为 了 适应 开发 者 和 他 们 对 class 属性 的 认可 ,HTML5 增 
加 了 一 些 特性 以 方便 使 用 CSS 类。 

1. getElementsByClassName() 

getElementsByClassName () 是 HIMLS 新 增 的 最 受 欢 迎 的 一 个 方法 ， 暴 露 在 document 对 象 和 
所 有 HTML 元 素 上 。 这 个 方法 脱胎 于 基于 原 有 DOM 特性 实现 该 功能 的 JavaScript 库 ， 提 供 了 性 能 高 好 
的 原生 实现 。 

getElementsByClassName () 方 法 接收 一 个 参数 ， 即 包含 一 个 或 多 个 类 名 的 字符 串 ， 返 回 类 名 中 
包含 相应 类 的 元 素 的 NodeList。 如 果 提 供 了 多 个 类 名 ， 则 顺序 无 关 紧 要 。 下 面 是 几 个 示例 : 


// 取得 所 有 类 名 中 包 念 "username" 和 "current "元素 

// 这 两 个 类 名 的 顺序 无 关 紧 要 

let allCurrentUsernames = document .getElementsByClassName ("username current"),; 

// 取得 ID 为 "myDiv" 的 元 素 子 树 中 所 有 包含 "selectedq" 类 的 元 素 

let selected = document .getElementById("myDiv") .getElementsByClassName ("selected"); 

这 个 方法 只 会 返回 以 调用 它 的 对 象 为 根 元 素 的 子 树 中 所 有 匹配 的 元 素 。 在 document 上 调用 
getElementsByClassName () 返 回 文档 中 所 有 匹配 的 元 素 ， 而 在 特定 元 素 上 调用 getElementsBy- 
className () 则 返回 该 元 素 后 代 中 匹配 的 元 素 。 

如 果 要 给 包含 特定 类 ( 而 不 是 特定 ID 或 标签 ) 的 元 素 添加 事件 处 理 程序 ,使 用 这 个 方法 会 很 方便 。 
不 过 要 记 住 ， 因 为 返回 值 是 NodeList ， 所 以 使 用 这 个 方法 会 遇 到 跟 使 用 getElementsByTagName () 
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和 其 他 返回 NodeLi st 对 象 的 DOM 方法 同样 的 问题 。 

IE9 及 以 上 版 本 ， 以 及 所 有 现代 浏览 器 都 支持 getElementsByClassName () 方 法 。 

2. classList 属性 

要 操作 类 名 ， 可 以 通过 className 属性 实现 添加 、 删 除 和 替换 。 但 className 是 一 个 字符 串 ， 
所 以 每 次 操作 之 后 都 需要 重新 设置 这 个 值 才 能 生效 ,即使 只 改动 了 部 分 字符 串 也 一 样 。 以 下 面 的 HTML 

































































代码 为 例 : 

<div class="bd user disabled">...</div> 

这 个 <div> 元 素 有 3 个 类 名 。 要 想 删 除 其 中 一 个 ， 就 得 先 把 className 拆 开 ,删除 不 想 要 的 那个 ， 
再 把 包含 剩余 类 的 字符 串 设 置 回去 。 比 如 : 








// 要 删除 "user" 类 


let targetClass = "user"; 


// 把 类 名 拆 成 数组 


let classNames = div.className.split (/\s+/); 


// 找到 要 删除 类 名 的 索引 


let idx = classNames.indexOf (targetClass); 


// 如 果 有 则 删除 
if (idx > -1) { 
classNames.splice(i,1); 


} 

// 重新 设置 类 名 

div.className = classNames.join(" "); 

这 就 是 从 <div> 元 素 的 类 名 中 删除 "user" 类 要 写 的 代码 。 葵 换 类 名 和 检测 类 名 也 要 涉及 同样 的 算 
法 。 添 加 类 名 只 涉及 字符 串 拼 接 ， 但 必须 先 检查 一 下 以 确保 不 会 重复 添加 相同 的 类 名 。 很 多 JavaScript 
库 为 这 些 操 作 实现 了 便利 方法 。 

HTMLS 通过 给 所 有 元 素 增加 classList 属性 为 这 些 操作 提供 了 更 简单 也 更 安全 的 实现 方式 。 
classList 是 一 个 新 的 集合 类 型 DOMTokenList 的 实例 ,与 其 他 DOM 集合 类 型 一 样 , DoMTokenList 
也 有 length 属性 表示 自己 包含 多 少 项 ， 也 可 以 通过 item() 或 中 括号 取得 个 别 的 元 素 。 此 外 ， 
DOMTokenList 还 增加 了 以 下 方法 。 

口 aqd(value), 向 类 名 列表 中 添加 指定 的 字符 串 值 value。 如 果 这 个 值 已 经 存在 , 则 什么 也 不 做 。 
口 contains (value) ， 返 回 布尔 值 ， 表 示 给 定 的 value 是 否 存在 。 

口 remove (value) ， 从 类 名 列表 中 删除 指定 的 字符 串 值 value。 

口 toggle (value) ， 如 果 类 名 列表 中 已 经 存在 指定 的 value， 则 删除 ; 如 果 不 存在 ， 则 添加 。 
这 样 以 来 ， 前 面 的 例子 中 那么 多 行 代码 就 可 以 简化 成 下 面 的 一 行 : 

div.classList.remove ("user"); 
这 行 代码 可 以 在 不 影响 其 他 类 名 的 情况 下 完成 删除 。 其 他 方法 同样 极 大 地 简化 了 操作 类 名 的 复杂 
如 下 面 的 例子 所 示 : 


// 删除 "Qisabled" 类 
div.classList.remove("disabled"); 




















































































































这 


// 添加 "current "类 
div.classList.add("current"); 
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// 切换 "user" 类 
div.classList.toggle("user"); 


// 检测 类 名 

if (div.classList.contains("bd") && !div.classList.contains ("disabled"))t{ 
// 执行 操作 

) 


// 选 代 类 名 
for (let class of div.classList)t{ 


dostuff (class); 
} 


添加 了 classList 属性 之 后 ， 除 非 是 完全 删除 或 完全 重 写 元 素 的 class 属性 ， 否 则 className 




















属性 就 用 不 到 了 。IE10 及 以 上 版 本 ( 部分) 和 其 他 主流 浏览 器 ( 完全 ) 实现 了 classList 属性 。 





15.3.2 ”焦点 管理 





HTMLS 增加 了 辅助 DOM 焦点 管理 的 功能 。 首 先是 document .activeElement, 始终 包含 当前 拥 




















有 焦点 的 DOM 元 素 。 页 面 加 载 时 ， 可 以 通过 用 户 输入 ( 按 Tab 键 或 代码 中 使 用 focus () 方 法 ) 让 某 个 
元 素 自动 获得 焦点 。 例 如 : 








let button = Qocument .getElementByIQ("myButton" ) ， 
button.focus(); 
console.log(document .activeElement === button); // true 


默认 情况 下 ，document .activeElement 在 页 面 刚 加 载 完 之 后 会 设置 为 dgocument .body。 而 在 


























页 面 完 全 加 载 之 前 ，document .activeElement 的 值 为 null。 


而 这 对 于 保证 Web 应 用 程序 的 无 障碍 使 用 是 非常 重要 的 。 无 障碍 Web 应 用 程序 的 一 个 重要 方面 就 是 焦 








TE 





其 次 是 document .hasFocus () 方 法 ， 该 方法 返回 布尔 值 ， 表 示 文 档 是 否 拥有 焦点 : 


let button = Qocument .getElementByIQ("myButton" ) ， 
button.focus () 
console.log(document .hasFocus()); // true 


确定 文档 是 否 获 得 了 焦点 ， 就 可 以 帮助 确定 用 户 是 否 在 操作 页 面 。 
第 一 个 方法 可 以 用 来 查询 文档 , 确定 哪个 元 素 拥有 焦点 ,第 二 个 方法 可 以 查询 文档 是 否 获得 了 焦点 ， 

















































































































点 管理 ， 而 能 够 确定 哪个 元 素 当 前 拥有 焦点 ( 相 比 于 之 前 的 猜测 ) 是 一 个 很 大 的 进步 。 





15.3.3 ”HTMLDocument 扩展 





HTML5 扩展 了 HTMLDocument 类 型 ， 增 加 了 更 多 功能 。 与 其 他 HTML5 定义 的 DOM 扩展 一 样 ， 





这 些 变化 同样 基于 所 有 浏览 器 事实 上 都 已 经 支持 的 专 有 扩展 。 为 此 ， 即 使 这 些 扩展 的 标准 化 相对 较 晚 ， 
很 多 浏览 豆 也 早 就 实现 了 相应 的 功能 。 


这 





1. readyState 属性 











readyState 是 IE4 最 早 添加 到 document 对 象 上 的 属性 ， 后 来 其 他 浏览 器 也 都 依 葫芦 画 标 地 支持 


这 个 














属性 。 最 终 ，HTML5 将 这 个 属性 写 进 了 标准 。document .readystate 属性 有 两 个 可 能 的 值 : 
口 10ading， 表 示 文 档 正 在 加 载 ; 
口 complete， 表 示 文 档 加 载 完 成 。 
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实际 开发 中 ， 最 好 是 把 socument .readstate 当成 一 个 指示 器 ， 以 判断 文档 是 否 加 载 完毕 。 在 这 
属性 得 到 广泛 支持 以 前 ,通常 要 依赖 onloag 事件 处 理 程序 设置 一 个 标记 ， 表 示 文 档 加 载 完了 。 这 个 
属性 的 基本 用 法 如 下 : 


if (document.readyState == "complete")t{ 
// 执行 操作 
} 











> 














三 
dl 


2. compatMode 属性 

自从 IE6 提供 了 以 标准 或 混杂 模式 泻 染 页 面 的 能 力 之 后 ， 检 测 页 面 浑 染 模式 成 为 一 个 必要 的 需求 。 
下 为 aocument 添加 了 compatMode 属性 , 这 个 属性 唯一 的 任务 是 指示 浏览 器 当前 处 于 什么 泻 染 模 式 。 
如 下 面 的 例子 所 示 ， 标 准 模式 下 document .compatMode 的 值 是 "Csslcompat"， 而 在 混杂 模式 下 ， 
document .compatMode 的 值 是 "BackCompat": 












































if (document.compatMode == "CSSlCompat")t{ 
console.log("Standards mode"); 
} else { 


console.log("Quirks mode"); 


} 

HTML5 最 终 也 把 compatMode 属性 的 实现 标准 化 了 。 

3. head 属性 

作为 对 document .body ( 指向 文档 的 <bodqv> 元 素 ) 的 补充 ，HTML5 增加 了 aocument .head 属 
性 ， 指 向 文档 的 <hnead> 元 素 。 可 以 像 下 面 这 样 直 接 取 得 <head> 元 素 : 


let head = document .head; 


























15.3.4 字符 集 属性 


HTMLS 增加 了 几 个 与 文档 字符 集 有 关 的 新 属性 。 其 中 ，charactersSet 属性 表示 文档 实际 使 用 的 
字符 集 , 也 可 以 用 来 指定 新 字符 集 。 这 个 属性 的 默认 值 是 "UTF-16", 但 可 以 通过 <meta> 元 素 或 响应 头 ， 
以 及 新 增 的 characterSeet 属性 来 修改 。 下 面 是 一 个 例子 : 


console.log(document.characterSet); // "UTF-16" 
document .characterSet = "UTF-8"; 





Hl 



































15.3.5” 自 定义 数据 属性 


HTMLS 允许 给 元 素 指 定 非 标准 的 属性 ， 但 要 使 用 前 级 aata- 以 便 告 诉 浏览 器 ， 这 些 属 性 既 不 包含 
与 泻 染 有 关 的 信息 ， 也 不 包含 元 素 的 语义 信息 。 除 了 前 级 ， 自 定义 属性 对 命名 是 没有 限制 的 ，data- 后 
面 跟 什 么 都 可 以 。 下 面 是 一 个 例子 : 

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div> 

定义 了 自 定义 数据 属性 后 ， 可 以 通过 元 素 的 dataset 属性 来 访问 。dataset 属性 是 一 个 
DOMStringMap 的 实例 ， 包 含 一 组 键 / 值 对 映射 。 元 素 的 每 个 aata-name 属性 在 dataset 中 都 可 以 通 
过 data- 后 面 的 字符 串 作为 键 来 访问 (例如 , 属性 data-myname、data-myName 可 以 通过 myname 访 
问 ， 但 要 注意 data-my-name、data-My-Name 要 通过 myName 来 访问 )。 下 面 是 一 个 使 用 自 定义 数据 
属性 的 例子 : 
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// 本 例 中 使 用 的 方法 仅 用 于 示范 
let div = document .getElementById ("myDiv"); 


// 取得 自 定义 数据 属性 的 值 
let appId = div.dataset.appId; 
let myName = div.dataset .myname; 


// 设置 自 定义 数据 属性 的 值 
div.dataset.appId = 23456; 
div.dataset.myname = "Michael"; 


// 有 "myname" 吗 ? 
if (div.dataset .myname)t{ 


console.log( ‘Hello, S${div.dataset.myname}.); 


} 





自 定义 数据 属性 非常 适合 需要 给 元 素 附 加 某 些 数据 的 场景 , 比如 链接 追踪 和 在 聚合 应 用 程序 中 标识 
页 面 的 不 同 部 分 。 男 外 ， 单 页 应 用 程序 框架 也 非常 多 地 使 用 了 自 定义 数据 属性 。 








15.3.6 ”插入 标记 


DOM 虽然 已 经 为 操纵 节点 提供 了 很 多 API， 但 向 文档 中 一 次 性 插入 大 量 HTML 时 还 是 比较 麻烦 。 




















相 比 先 创建 一 堆 节 点 ， 再 把 它们 以 正确 的 顺序 连接 起 来 ， 





























直接 搬入 一 个 HTML 字符 串 要 简单 (快速 ) 


得 多 。HTML5 已 经 通过 以 下 DOM 扩展 将 这 种 能 力 标准 化 了 。 


1. innerHTML 属性 








在 读 取 innerHTML 属性 时 ,会 返回 元 素 所 有 后 代 的 HTML 字符 串 ， 包 括 元 素 、 注 释 和 文本 节点 。 
而 在 写 入 innerHTML 时 , 则 会 根据 提供 的 字符 串 值 以 新 的 DOM 子 树 蔡 代 元 素 中 原来 包含 的 所 有 节点 。 























比如 下 面 的 HTML 代码 : 


<div id="content"> 














<p>This is a <strong>paragraph</strong> with a list following it.</p> 


<ul> 
<li>Item 1</1i> 
<li>Item 2</1i> 
<li>Item 3</1i> 

</ul> 

</div> 








对 于 这 里 的 <aiv> 元 素 而 言 ， 其 innerHTML 属性 会 返回 以 下 字符 串 : 


<p>This is a <strong>paragraph</strong> with a list following it.</p> 





<ul> 
<li>Item 1</1i> 
<li>Item 2</1i> 
<li>Item 3</1i> 
</ul> 


实际 返回 的 文本 内 容 会 因 浏览 器 而 不 同 。IE 和 Opera 会 把 所 有 元 素 标签 转换 为 大 写 ， 而 Safari、 
Chrome 和 Firefox 则 会 按照 文档 源 代 码 的 格式 返回 ， 包 含 空格 和 缩 进 。 因 此 不 要 指望 不 同 浏览 器 的 


innerHTML 会 返回 完全 一 样 的 值 。 











在 写 和 模式 下 ， 赋 给 innerHTML 属性 的 值 会 被 解析 为 DOM 子 树 ， 并 替代 元 素 之 前 的 所 有 节点 。 
因为 所 赋 的 值 默 认为 HTML ， 所 以 其 中 的 所 有 标签 都 会 以 浏览 器 处 理 HTML 的 方式 转换 为 元 素 〈 同样 ， 
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转换 结果 也 会 因 浏览 器 不 同 而 不 同 )。 如 果 赋 值 中 不 包含 任何 HTML 标签 ， 则 直接 生成 一 个 文本 节点 ， 









































如 下 所 示 : 

div.innerHTML = "Hello world!"; 

因为 浏览 器 会 解析 设置 的 值 ， 所 以 给 innerHTML 设置 包含 HTML 的 字符 串 时 ， 结 果 会 大 不 一 样 。 
来 看 下 面 的 例子 : 

div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>"; 

这 个 操作 的 结果 相当 于 : 

<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div> 











设置 完 innerHTML， 马 上 就 可 以 像 访 问 其 他 节点 一 样 访问 这 些 新 节点 。 





注意 设置 innerHTML 会 导致 浏览 器 将 HTML 字符 囊 解析 为 相应 的 DOM 树 。 这 意味 着 
设置 innerHTML 属性 后 马上 再 读 出 来 会 得 到 不 同 的 字符 串 。 这 是 因为 返回 的 字符 串 是 将 


原始 字符 串 对 应 的 DOM 子 树 序列 化 之 后 的 结果 。 





2. 旧 IE 中 的 innerHTML 

在 所 有 现代 浏览 器 中 , 通过 innerHTML 插入 的 <script> 标 签 是 不 会 执行 的 。 而 在 IE8 及 之 前 的 版 
本 中 ， 只 要 这 样 插 入 的 <script> 元 素 指定 了 defer 属性 ， 且 <script> 之 前 是 “ 受 控 元 素 ”( scoped 
element )， 那 就 是 可 以 执行 的 。<script> 元 素 与 <style> 或 注释 一 样 ， 都 是 “ 非 受 控 元 素 ”( NoScope 
element )， 也 就 是 在 页 面 上 看 不 到 它们 。IE 会 把 innerHTML 中 从 非 受 挖 元素 开始 的 内 容 都 删 掉 ， 也 就 
是 说 下 面 的 例子 是 行 不 通 的 : 


// 行 不 通 
div.innerHTML = "<script defer>console.log('hi');<\/script>"; 


在 这 个 例子 中 ，innerHTML 字符 串 以 一 个 非 受 控 元 素 开始 ， 因 此 整个 字符 串 都 会 被 清空 。 为 了 达 
到 目的 , 必须 在 <script> 前 面 加 上 一 个 受 控 元 素 , 例如 文本 节点 或 没有 结束 标签 的 元 素 ( 如 <input> )。 
因此 ， 下 面 的 代码 就 是 可 行 的 : 

// 以 下 都 可 行 

div.innerHTML = "_<script defer>console.log('hi');<\/script>"; 

div.innerHTML = "<div>&nbsp;</div><script defer>console.log('hi');<\/script>"; 

div.innerHTML = "<input type=\"hidden\"><script defer>console. 

OG (CI hi ) CriDt 
第 一 行 会 在 <script> 元 素 前 面 搬入 一 个 文本 节点 。 为 了 不 影响 页 面 排版 ， 可 能 稍 后 需要 删 掉 这 个 
文本 节点 。 第 二 行 与 之 类 似 ， 使 用 了 包含 空格 的 <aiv> 元 素 。 空 <aiv> 是 不 行 的 ， 必 须 包 含 一 点 内 容 ， 
以 强制 创建 一 个 文本 节点 。 同 样 ， 这 个 <aiv> 元 素 可 能 也 需要 事后 删除 ， 以 免 影响 页 面 外 观 。 第 三 行使 
用 了 一 个 隐藏 的 <input> 字 段 来 达成 同样 的 目的 。 因 为 这 个 字段 不 影响 页 面 布 局 , 所 以 应 该 是 最 理想 的 









































































































































方案 。 

在 正中， 通过 innerHTML 搬入 <style> 也 会 有 类 似 的 问题 。 多 数 浏览 器 支 持 使 用 innerHTML 插 
人 人 <style> 元 素 : 

div.innerHTML = "<style type=\"text/css\">body {background-color: red; }</style>"; 











但 在 IE8 及 之 前 的 版 本 中 ，<style> 也 被 认为 是 非 受 控 元 素 ， 所 以 必须 前 置 一 个 受 控 元 素 : 
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div.innerHTML = "_<style type=\"text/css\">body {background-color: red; }</style>"; 
div.removeChild(div.firstChild); 


注意 ”Firefox 在 内 容 类 型 为 application/xhtml+xml 的 XHTML 文档 中 对 innerHTML 
更 加 严格 。 在 XHTML 文档 中 使 用 innerHTML， 必 须 使 用 格式 良好 的 XHTML 代码 。 否 


则 ， 在 Firefox 中 会 静默 失败 。 





3. outerHTML 属性 

读 取 outerHTML 属性 时 ， 会 返回 调用 它 的 元 素 ( 及 所 有 后 代 元 素 ) 的 HTML 字符 串 。 在 写 和 人 
outerHTML 属性 时 ， 调 用 它 的 元 素 会 被 传人 的 HTML 字符 串 经 解释 之 后 生成 的 DOM 子 树 取代 。 比 如 
下 面 的 HIML 代码 : 


<div id="content"> 
<p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 
<li>Item 1</1i> 
<li>Item 2</1i> 
<li>Item 3</1i> 
</ul> 
</div> 


在 这 个 <qiv> 元 素 上 调用 outerHTML 会 返回 相同 的 字符 串 ， 包 括 <aiv> 本 身 。 注 意 ， 浏 览 回 因 解 
析 和 解释 HTML 代码 的 机 制 不 同 ， 返回 的 字符 串 也 可 能 不 同 。( 跟 innerHTML 的 情况 是 一 样 的 。) 

如 果 使 用 outerHTML 设置 HTML， 比 如 : 

div.outerHTML = "<p>This is a paragraph.</p>"; 

则 会 得 到 与 执行 以 下 脚本 相同 的 结 

let p = document.createElement ("p");} 


p.appendChild(document .createTextNode("This is a paragraph.")); 
div.parentNode.replaceChild(p, div); 


新 的 <zp> 元 素 会 取代 DOM 树 中 原来 的 <div> 元 素 。 

4. insertRAdjacentHTML () 与 insertAdjacentText () 

关于 插入 标签 的 最 后 两 个 新 增 方法 是 insertAdjacentHTML () 和 insertAdjacentText () 。 这 两 
个 方法 最 早 源 自 了 下， 它们 都 接收 两 个 参数 : 要 插入 标记 的 位 置 和 要 插入 的 HTML 或 文本 。 第 一 个 参数 
必须 是 下 列 值 中 的 一 个 : 
口 "beforebegin"， 插 人 当前 元 素 前 面 ， 作 为 前 一 个 同胞 节点 ; 
口 "afterbegin"， 插 入 当前 元 素 内 部 ， 作 为 新 的 子 节点 或 放 在 第 一 个 子 节点 前 面 ; 
口 "beforeeng", 插入 当前 元 素 内 部 ， 作 为 新 的 子 节 点 或 放 在 最 后 一 个 子 节点 后 面 ; 
口 "afterenda"， 插 入 当前 元 素 后 面 ， 作 为 下 一 个 同胞 节点 。 

注意 这 几 个 值 是 不 区 分 大 小 写 的 。 第 二 个 参数 会 作为 HTML 字符 串 解 析 (与 innerHTML 和 
outerHTML 相同 ) 或 者 作为 纯 文 本 解析 (与 innerText 和 outerText 相同 )。 如 果 是 HIML ， 则 会 
在 解析 出 错时 抛 出 错误 。 下 面 展 示 了 基本 用 法 ”: 





























































































































Q@ 假设 当前 元 素 是 <p>Hello world!</p>， 则 "beforebegin" 和 "afterbegin" 中 的 "begin" 指 开始 标签 <zp>; 而 
"afterend" 和 "beforeend" 中 的 "end" 指 结束 标签 </p>。 译 者 注 
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// 作为 前 一 个 同胞 节点 插入 

element.insertAdjacentHTML ("beforebegin", "<p>Hello world!</p>"); 
element.insertAdjacentText ("beforebegin", "Hello world!"); 

// 作为 第 一 个 子 节点 插入 

element .insertAdjacentHTML ("afterbegin", "<p>Hello world!</p>"); 
element.insertAdjacentText ("afterbegin", "Hello world!"); 

// 作为 最 后 一 个 子 节点 插入 

element.insertAdjacentHTML ("beforeend", "<p>Hello world!</p>"); 
element.insertAdjacentText ("beforeend", "Hello world!"); 

// 作为 下 一 个 同胞 节点 插入 

element.insertAdjacentHTML ("afterend", "<p>Hello world!</p>"); element. 
insertAdjacentText ("afterend", "Hello world!"); 


5. 内 存 与 性 能 问题 

使 用 本 节 介 绍 的 方法 替换 子 节点 可 能 在 浏览 器 ( 特别 是 正 ) 中 导致 内 存 问题 。 比 如 ， 如 果 被 移 除 的 
子 树 元 素 中 之 前 有 关联 的 事件 处 理 程 序 或 其 他 JavaScript 对 象 ( 作为 元 素 的 属性 ), 那 它 们 之 间 的 绑 定 关 
系 会 滞留 在 内 存 中 。 如 果 这 种 蔡 换 操作 频繁 发 生 ， 页 面 的 内 存 占用 就 会 持续 攀升 。 在 使 用 innerHTML、 
outerHTML 和 insertadjacentHTML () 之 前 , 最 好 手动 删除 要 被 蔡 换 的 元 素 上 关联 的 事件 处 理 程序 和 
JavaScript 对 象 。 

使 用 这 些 属性 当然 有 其 方便 之 处 ， 特 别 是 innerHTML 。 一 般 来 讲 ， 插 和 人 大 量 的 新 HTML 使 用 
innerHTML 比 使 用 多 次 DOM 操作 创建 节点 再 插入 来 得 更 便捷 。 这 是 因为 HTML 解析 需 会 解析 设置 给 
innerHTML (或 outerHTML ) 的 值 。 解 析 器 在 浏览 器 中 是 底层 代码 (通常 是 C++ 代码 )， 比 JavaScript 
快 得 多 。 不 过 ，HTML 解析 器 的 构建 与 解构 也 不 是 没有 代价 ， 因 此 最 好 限制 使 用 innerHTML 和 
outerHTML 的 次 数 。 比 如 ， 下 面 的 代码 使 用 innerHTML 创建 了 一 些 列表 项 : 


for (let value of values){ 
ul.innerHTML += '<li>${value}</1i>'; // 别 这 样 做 | 
J 


这 段 代 码 效率 低 ， 因 为 每 次 迭代 都 要 设置 一 次 innerHTML。 不 仅 如 此 ， 每 次 循环 还 要 先 读 取 
innerHTML， 也 就 是 说 循环 一 次 要 访问 两 次 innerHTML。 为 此 ， 最 好 通过 循环 先 构 建 一 个 独立 的 字符 
串 ， 最 后 再 一 次 性 把 生成 的 字符 串 赋 值 给 innerHTML， 比 如 : 


let itemsHtml = ""; 

for (let value of values){ 
itemsHtml += '<li>${value}</l1i>'; 

} 


ul.innerHTML = itemsHtml; 
这 样 修改 之 后 效率 就 高 多 了 ， 因 为 只 有 对 innerHTML 的 一 次 赋值 。 当 然 , 像 下 也 
可 以 搞定 : 


ul.innerHTML = values.map(value => '<li>${value}</1i>').join(''); 


6. 跨 站 点 脚本 

尽管 innerHTML 不 会 执行 自己 创建 的 <script> 标 签 , 但 仍然 向 恶意 用 户 暴露 了 很 大 的 攻击 面 , 因 
为 通过 它 可 以 毫 不 费力 地 创建 元 素 并 执行 onclick 之 类 的 属性 。 

如 果 页 面 中 要 使 用 用 户 提供 的 信息 , 则 不 建议 使 用 innerHTML。 与 使 用 innerHTML 获得 的 方便 相 
比 ， 防 止 XSS 攻击 更 让 人 头疼 。 此 时 一 定 要 隔离 要 搬入 的 数据 ， 在 插 人 页 面前 必须 毫 不 犹 驳 地 使 用 相 















































































































































这 样 一 行 代码 也 
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关 的 库 对 它们 进行 转 义 。 
15.3.7 scrollIntoView!() 


DOM 规范 中 没有 涉及 的 一 个 问题 是 如 何 深 动 页 面 中 的 某 个 区 域 。 为 填充 这 方面 的 缺失 ， 不 同 浏览 
器 实现 了 不 同 的 控制 滚动 的 方式 。 在 所 有 这 些 专 有 方法 中 , HTML5 选择 了 标准 化 scrollIntoView()。 
scrollIntoView() 方 法 存在 于 所 有 HTML 元 素 上 ， 可 以 深 动 浏览 絮 窗 口 或 容器 元 素 以 便 包含 元 
素 进入 视 口 。 这 个 方法 的 参数 如 下 : 
口 alignToTop 是 一 个 布尔 值 。 
图 true: 窗口 滚动 后 元 素 的 顶部 与 视 口 顶 部 对 章 。 
加 false: 窗口 滚动 后 元 素 的 底部 与 视 口 底部 对 齐 。 
口 scrollIntoViewOoptions 是 一 个 选项 对 象 。 
国 behavior: 定义 过 渡 动 画 ， 可 取 的 值 为 "smooth" 和 "auto"， 默 认为 "auto"。 
图 block: 定义 垂直 方向 的 对 齐 ， 可 取 的 值 为 "start"、"center"、"engd" 和 "nearest",， 默 
认为 "start"。 
加 inline: 定义 水 平方 向 的 对 齐 ， 可 取 的 值 为 "start"、"center" 、"end" 和 "nearest"， 默 
认为 "nearest"。 
口 不 传 参数 等 同 于 alignToTop 为 true。 
来 看 几 个 例子 : 


// 确保 元 素 可 见 
document .forms [0] .scrollIntoView!(); 



















































































// 同上 
document .forms [0] .scrollIntoView(true); 
document .forms [0] .scrollIntoView({block: 'start'}); 


// 尝试 将 元 素平 滑 地 滚 入 视 口 

Qqocument .forms [0] .scrollIntoView({behavior: 'smooth', block: 'start'}); 

这 个 方法 可 以 用 来 在 页 面 上 发 生 某 个 事件 时 引起 用 户 关注 。 把 焦点 设置 到 一 个 元 素 上 也 会 导致 浏览 
器 将 元 素 滚 动 到 可 见 位 置 。 


15.4 专 有 扩展 


尽管 所 有 浏览 器 厂商 都 理解 遵循 标准 的 重要 性 ， 但 它们 也 都 有 为 弥补 功能 缺失 而 为 DOM 添加 专 有 
扩展 的 历史 。 虽 然 这 表面 上 看 是 一 件 坏事 ,但 专 有 扩展 也 为 开发 者 提供 了 很 多 重要 功能 ， 而 这 些 功 能 后 
来 则 有 可 能 被 标准 化 ， 比 如 进入 HTML5。 

除了 已 经 标准 化 的 , 各 家 浏览 器 还 有 很 多 未 被 标准 化 的 专 有 扩展 。 这 并 不 意味 着 它们 将 来 不 会 被 纳 
入 标准 ， 只 不 过 在 本 书 编写 时 ， 它 们 还 只 是 由 部 分 浏览 器 专 有 和 采用 。 














































































































15.4.1 children 属性 


IE9 之 前 的 版 本 与 其 他 浏览 如 在 处 理 空白 文本 节点 上 的 差异 导致 了 chilgren 属性 的 出 现 。 
chilgren 属性 是 一 个 HTMLCollection， 只 包含 元 素 的 Element 类 型 的 子 节 点 。 如 果 元 素 的 子 节点 
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用 chil 


let childCount 
let firstChild 


15.4.2 


类 型 全 部 是 元 素 类 型 ， 那 chilaren 和 chilaNodes 中 包含 的 节点 应 该 是 一 样 的 。 可 以 像 下 面 这 样 使 5 








dren 属性 : 


element .children.length; 
element .children[0]; 


contains() 方 法 




















DOM 编程 中 经 常 需要 确定 一 个 元 素 是 不 是 另 一 个 元 素 的 后 代 。IE 首先 引入 了 contains () 方 法 ， 
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上 开发 者 可 以 在 不 遍历 DOM 的 情况 下 获取 这 个 信息 。contains () 方 法 应 该 在 要 搜索 的 祖先 元 素 上 调 




















用 





参数 是 待 确定 的 目标 节点 。 








如 果 目 标 节 点 是 被 搜索 节点 的 后 代 ，contains () 返 回 true， 否则 返回 false。 下 面 看 一 个 例子 : 


console.log(document .documentElement .contains (document .body)); // true 


这 个 例子 测试 <html> 元 素 中 是 否 包 含 <body> 元 素 ， 在 格式 正确 的 HTML 中 会 返回 true。 
另外 ,使 用 DOM Level 3 的 compareDocumentPosition() 方 法 也 可 以 确定 节点 间 的 关系 。 这 个 
方法 会 返回 表示 两 个 节点 关系 的 位 掩 码 。 下 表 给 出 了 这 些 位 掩 码 的 说 明 。 


















































掩 码 节点 关系 
Oxl 断 开 ( 传 入 的 节点 不 在 文档 中 ) 
0x2 领先 ( 传 入 的 节点 在 DOM 树 中 位 于 参考 节点 之 前 ) 
0x4 随后 〈 传 和 人 的 节点 在 DOM 树 中 位 于 参考 节点 之 后 ) 
0x8 包含 (传人 的 节点 是 参考 节点 的 祖先 ) 
0x10 被 包含 〈 传 人 的 节点 是 参考 节点 的 后 代 ) 





要 模仿 contains () 方 法 ,就 需要 用 到 掩 码 16 ( 0x10 )。compareDocumentPosition() 方 法 的 结 














果 可 以 通过 按 位 与 来 确定 参考 节点 是 否 包 含 传人 的 节点 ， 比 如 : 

















let 





result = document .documentElement .compareDocumentPosition (document .body); 


console.log(!!(result & 0x10) ) ， 


以 上 代码 执行 后 result 的 值 为 20 (或 0x14， 其 中 0x4 表示 “随后 ”， 加 上 0x10“ 被 包含 ” )。 对 


result 
IE9 
方法 。 


15.4.3 

















和 0x10 应 用 按 位 与 会 返回 非 零 值 ， 而 两 个 叹 号 将 这 个 值 转换 成 对 应 的 布尔 值 。 
及 之 后 的 版 本 ,以 及 所 有 现代 浏览 器 都 支持 contains() 和 compareDocumentPosition() 





插入 标记 








HTML5 将 IE 发 明 的 innerHTML 和 outerHTML 纳入 了 标准 , 但 还 有 两 个 属性 没有 入 选 。 这 两 个 剩 
下 的 属性 是 innerText 和 outerText。 





1. innerText 属性 


inn 





erText 属性 对 应 元 素 中 包含 的 所 有 文本 内 容 ， 无 论文 本 在 子 树 中 哪个 层级 。 在 用 于 读 取 值 时 ， 





innerText 会 按照 深度 优先 的 顺序 将 子 树 中 所 有 文本 节点 的 值 拼接 起 来 。 在 用 于 写 和 人 值 时 , innerText 
会 移 除 元 素 的 所 有 后 代 并 插入 一 个 包含 该 值 的 文本 节点 。 来 看 下 面 的 HTML 代码 : 
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<div id="content"> 
<p>This is a <strong>paragraph</strong> with a list following it.</p> 
<ul> 
<li>Item 1</1i> 
<li>Item 2</1i> 
<li>Item 3</1i> 
</ul> 
</div> 


对 这 个 例子 中 的 <divs 而 言 ，innerText 属性 会 返回 以 下 字符 串 : 


This is a paragraph with a list following it. 
Item 1 
Item 2 
Item 3 


注意 不 同 浏览 器 对 待 空 格 的 方式 不 同 , 因此 格式 化 之 后 的 字符 串 可 能 包含 也 可 能 不 包含 原始 HTML 
代码 中 的 缩 进 。 

下 面 再 看 一 个 使 用 innerText 设置 <aiv> 元 素 内 容 的 例子 : 

div.innerText = "Hello world!"; 

执行 这 行 代码 后 ，HTML 页 面 中 的 这 个 <aiv> 元 素 实际 上 会 变 成 这 个 样子 : 

<div id="content">Hello world!</div> 

设置 innerText 会 移 除 元 素 之 前 所 有 的 后 代 节 点 ， 完 全 改变 DOM 子 树 。 此 外 ,设置 innerText 
也 会 编码 出 现在 字符 串 中 的 HTML 语法 字符 (小 于 号 、 大 于 号 、 引 号 及 和 号 )。 下 面 是 一 个 例子 : 


div.innerText = "Hello & welcome, <b>\"reader\"!</b>"; 


执行 之 后 的 结果 如 下 : 


<div id="content">Hello &amp; welcome, &lt;b&gt;&quot;reader&quot; !&lt;/b&gt;</div> 


因为 设置 innerText 只 能 在 容器 元 素 中 生成 一 个 文本 节点 ， 所 以 为 了 保证 一 定 是 文本 节点 ， 就 必 
须 进 行 HTML 编码 。innerText 属性 可 以 用 于 去 除 HTML 标签 。 通 过 将 innerText 设置 为 等 于 
innerText， 可 以 去 除 所 有 HTML 标签 而 只 剩 文 本 ， 如 下 所 示 : 


div.innerText = div.innerText; 


执行 以 上 代码 后 ， 容 器 元 素 的 内 容 只 会 包含 原先 的 文本 内 容 。 
















































































注意 ”Firefox 45 (2016 年 3 月 发 布 ) 以 前 的 版 本 中 只 支持 textContent 属性 , 与 innerText 
的 区 别 是 返回 的 文本 中 也 会 返回 行内 样式 或 脚本 代码 。innerText 目前 已 经 得 到 所 有 浏 


览 器 支持 ， 应 该 作为 取得 和 设置 文本 内 容 的 首选 方法 使 用 。 





2. outerText 属性 

outerText 与 innerText 是 类 似 的 ， 只 不 过 作用 范围 包含 调用 它 的 节点 。 要 读 取 文本 值 时 ， 
outerText 与 innerText 实际 上 会 返回 同样 的 内 容 。 但 在 写 入 文本 值 时 ，outerText 就 大 不 相同 了 。 
写 入 文本 值 时 ，outerText 不 止 会 移 除 所 有 后 代 节 点 ， 而 是 会 替换 整个 元 素 。 比 如 : 


div.outerText = "Hello world!"; 


这 行 代码 的 执行 效果 就 相当 于 以 下 两 行 代码 : 


let text = document .createTextNode("Hello world!"); 
div.parentNode.replaceChild(text, div); 
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本 质 上 ， 这 相当 于 用 新 的 文本 节点 替代 outerText 所 在 的 元 素 。 此 时 ， 原 来 的 元 素 会 与 文档 脱离 15 
关系 ， 因 此 也 无 法 访问 。 

outerText 是 一 个 非 标准 的 属性 ， 而 且 也 没有 被 标准 化 的 前 景 。 因 此 ， 不 推荐 依赖 这 个 属性 实现 
重要 的 操作 。 除 Firefox 之 外 所 有 主流 浏览 器 都 支持 out erText。 






































15.4.4 ”滚动 


如 前 所 述 ， 滚 动 是 HIML5 之 前 DOM 标准 没有 涉及 的 领域 。 虽 然 HIML5 把 scrollIntoView() 
标准 化 了 ， 但 不 同 浏览 1 仍然 有 其 他 专 有 方法 。 比 如 ，scrollIintoviewIfNeeded() 作为 
HTMLElement 类 型 的 扩展 可 以 在 所 有 元 素 上 调用 。scroll1IintoviewIfNeedqed(alingCcenter) 会 在 
元 素 不 可 见 的 情况 下 ,将 其 深 动 到 窗口 或 包含 窗口 中 ,使 其 可 见 ; 如 果 已 经 在 视 口中 可 见 ， 则 这 个 方法 
什么 也 不 做 。 如 果 将 可 选 的 参数 alingcenter 设置 为 true, 则 浏览 器 会 尝试 将 其 放 在 视 口 中 央 。Safari、 
Chrome 和 Opera 实现 了 这 个 方法 。 

下 面 使 用 scrollIntoViewIfNeeded() 方 法 的 一 个 例子 : 

// 如 果 不 可 见 ， 则 将 元 素 可 见 


document .images[0] .scrollIntoViewIfNeeded(); 


考虑 到 scrol1Intoview () 是 唯一 一 个 所 有 浏览 器 都 支持 的 方法 ， 所 以 只 用 它 就 可 以 了 。 
15.5 小结 


虽然 DOM 规定 了 与 XML 和 HTML 文档 交互 的 核心 API， 但 其 他 几 个 规范 也 定义 了 对 DOM 的 扩 
展 。 很 多 扩展 都 基于 之 前 的 已 成 为 事实 标准 的 专 有 特性 标准 化 而 来 。 本 章 主要 介绍 了 以 下 3 个 规范 。 
口 Selectors API 为 基于 CSS 选择 符 获 取 DOM 元 素 定 义 了 几 个 方法 : querySelector()、 
querySelectorAl11() 和 matches ()。 
口 Element Traversal 在 DOM 元 素 上 定义 了 额外 的 属性 , 以 方便 对 DOM 元 素 进 行 遍历 。 这 个 需求 
是 因 浏 览 器 处 理 元 素 间 空格 的 差异 而 产生 的 。 
口 HTML5 为 标准 DOM 提供 了 大 量 扩展 。 其 中 包括 对 innerHTML 属性 等 事实 标准 进行 了 标准 化 ， 
还 有 焦点 管理 、 字 符 集 、 滚 动 等 特性 。 
DOM 扩展 的 数量 总 体 还 不 大 ,但 随 着 Web 技术 的 发 展 一 定 会 越 来 越 多 。 浏 览 器 仍然 没有 停止 对 专 
有 扩展 的 探索 ， 如 果 出 现成 功 的 扩展 ， 那 么 就 可 能 成 为 事实 标准 ， 或 者 最 终 被 整合 到 未 来 的 标准 中 。 



































































































































第 0 
DOM2 和 DOM3 


本 章 内 容 
口 DOM2 到 DOM3 的 变化 
口 操作 样式 的 DOM API 

口 DOM 遍历 与 范 月 
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DOMI1 (DOM Level 1 ) 主要 定义 了 HTML 和 XML 文档 的 底层 结构 。DOM2 (DOM Level 2 ) 和 
DOM3 ( DOM Level3 ) 在 这 些 结构 之 上 加 入 更 多 交互 能 力 , 提供 了 更 高 级 的 XML 特性 ,实际 上 , DOM2 
和 DOM3 是 按照 模块 化 的 思路 来 制定 标准 的 ， 每 个 模块 之 间 有 一 定 关联 ， 但 分 别针 对 某 个 DOM 子 集 。 
这 些 模 式 如 下 所 示 。 

口 DOM Core: 在 DOMI 核心 部 分 的 基础 上 ， 为 节点 增加 方法 和 
D DOM Views: 定义 基于 样式 信息 的 不 同 视图 。 

口 DOM Events: 定义 通过 事件 实现 DOM 文档 交互 。 

口 DOM Style: 定义 以 编程 方式 访问 和 修改 CSS 样式 的 接口 。 

口 DOM Traversal and Range: 新 增 人 遍历 DOM 文档 及 选择 文档 内 容 的 接口 。 
口 DOM HTML: 在 DOM1 HTML 部 分 的 基础 上 ， 增 加 属性 、 方 法 和 新 接口 。 
口 DOM Mutation Observers: 定义 基于 DOM 变化 触发 回调 的 接口 。 这 个 模块 是 DOM4 级 模块 ， 
用 于 取代 Mutation Events。 

本 章 介 绍 除 DOM Events 和 DOM Mutation Observers 之 外 的 其 他 所 有 模块 ,第 17 章 会 专门 介绍 事件 ， 
而 DOM Mutation Observers 第 14 章 已 经 介绍 过 了 。DOM3 还 有 XPath 模块 和 Load and Save 模块 ， 将 在 
第 22 章 介绍 。 
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注意 ”比较 老 旧 的 浏览 器 (如 IE8 ) 对 本 章 内 容 支持 有 限 。 如 果 你 的 项 目 要 兼容 这 些 低 
版 本 浏览 器 ,在 使 用 本 章 介 绍 的 API 之 前 先 确认 浏览 器 的 支持 情况 。 推荐 参考 Can TUse 


网 站 。 





16.1 DOM 的 演进 


DOM2 和 DOM3 Core 模块 的 目标 是 扩展 DOM API， 满足 XML 的 所 有 需求 并 提供 更 好 的 错误 处 理 
和 特性 检测 。 很 大 程度 上 ， 这 意味 着 支持 XML 命名 空间 的 概念 。DOM2 Core 没有 新 增 任 何 类 型 ， 仅 仅 
在 DOMI1 Core 基础 上 增加 了 一 些 方 法 和 属性 。 DOM3 Core 则 除了 增强 原 有 类 型 , 也 新 增 了 一 些 新 类 型 。 
类 似 地 , DOM View 和 HTML 模块 也 丰富 了 DOM 接口 , 定义 了 新 的 属性 和 方法 。 这 两 个 模块 很 小 ， 
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因此 本 章 将 在 讨论 JavaScript 对 象 的 基本 变化 时 将 它们 与 Core 模块 放 在 一 起 讨论 。 


注意 ”本章 只 讨论 浏览 器 实现 的 DOM API， 不 会 提 及 未 被 浏览 器 实现 的 。 





见 ， 


16.1.1 XML 命名 空间 


XML 命名 空间 可 以 实现 在 一 个 格式 规范 的 文档 中 混用 不 同 的 XML 语言 ， 而 不 必 担 心 元 素 命名 冲 
突 。 严格 来 讲 , XML 命名 空间 在 XHTML 中 才 支 持 , HTML 并 不 支持 。 因 此 , 本 节 的 示例 使 用 XHTML 。 
命名 空间 是 使 用 xmlns 指定 的 XHTML 的 命名 空间 是 "http://www.w3.org/1999/xhtml", 应 
该 包含 在 任何 格式 规范 的 XHTML 页 面 的 <html> 元 素 中 ， 如 下 所 示 : 
<html xmlns="http://www.w3.o0org/1999/xhtml"> 
<head> 


<title>Example XHTML page</title> 
</head> 
<body> 
Hello world! 
</body> 
</html> 


对 这 个 例子 来 说 ， 所 有 元 素 都 默认 属于 XHTML 命名 空间 。 可 以 使 月 
前 级 ， 格 式 为 “xmlins : 前 级 ”， 如 下 面 的 例子 所 示 : 


<xhtml :html xmlns:xhtml="http://www.w3.o0org/1999/xhtml"> 
<xhtml :head> 









































有 xmlns 给 命名 空间 创建 一 个 


<xhtml :title>Example XHTML page</xhtml:title> 
</xhtml :head> 
<xhtml :body> 
Hello world! 
</xhtml :body> 
</xhtml :html> 





这 里 为 XHTML 命名 空间 定义 了 一 个 前 级 xhntml, 同时 所 有 XHTML 元 素 都 必须 加 上 这 个 前 级 。 为 
避免 混淆 ， 属 性 也 可 以 加 上 命名 空间 前 级 ， 比 如 : 
<xhtml :html xmlns:xhtml="http://www.w3.o0org/1999/xhtml"> 
<xhtml :head> 
<xhtml :title>Example XHTML page</xhtml:title> 
</xhtml :head> 
<xhtml :body xhtml:class="home"> 
Hello world! 
</xhtml :body> 
</xhtml :html> 








这 里 的 class 属性 被 加 上 了 xhtml 前 级 。 如 果 文 档 中 只 使 用 一 种 XML 语言 ， 那 么 命名 空间 前 级 
其 实 是 多 余 的 , 只 有 一 个 文档 混合 使 用 多 种 XML 语言 时 才 有 必要 。 比 如 下 面 这 个 文档 就 使 用 了 XHTML 
和 SVG 两 种 语言 : 




















<html] xmlns="http://www.w3.o0org/1999/xhtml"> 
<head> 
<title>Example XHTML page</title> 
</head> 
<body> 


<svg xmlns="http://www.w3.0rg/2000/svg" version="1.1" 
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ViewBox="0 0 100 100" style="width:100%; height:100%"> 
<rect x="0" y="0" width="100" height="100" style="fill:red" /> 
</svg> 
</body> 
</html> 
在 这 个 例子 中 ， 通 过 给 <svo> 元 素 设置 自己 的 命名 空间 ,将 其 标识 为 当前 文档 的 外 来 元 素 。 这 村 
来 ，<svg> 元 素 及 其 属性 ， 包 括 它 的 所 有 后 代 都 会 被 认为 属于 "https://www.w3.org/2000/svg" 命 
名 空间 。 虽 然 这 个 文档 从 技术 角度 讲 是 XHTML 文档 ,但 由 于 使 用 了 命名 空间 ， 其 中 包含 的 SVG 代码 
也 是 有 效 的 。 
对 于 这 样 的 文档 ， 如 果 调 用 某 个 方法 与 节点 交互 ， 就 会 出 现 一 个 问题 。 比 如 ,创建 了 一 个 新 元 素 ， 
那 这 个 元 素 属于 哪个 命名 空间 ? 查询 特定 标签 名 时 ， 结 果 中 应 该 包含 哪个 命名 空间 下 的 元 素 ? DOM2 
Core 为 解决 这 些 问题 ， 给 大 部 分 DOM1 方法 提供 了 特定 于 命名 空间 的 版 本 。 
1. Noge 的 变化 
在 DOM2 中 ，Node 类 型 包含 以 下 特定 于 命名 空间 的 
口 localName， 不 包含 命名 空间 前 缀 的 节点 名 ; 
口 namespaceURI， 节 点 的 命名 空间 URL， 如 果 未 指定 则 为 nul1; 
口 prefix, 命名 空间 前 级 ， 如 果 未 指定 则 为 null。 
在 节点 使 用 命名 空间 前 级 的 情况 下 ，nodeName 等 于 prefix 十 ":" 十 localName。 比 如 下 面 这 个 
例子 : 


<html xmlns="http://www.w3.o0rg/1999/xhtml"> 
<head> 
<title>Example XHTML page</title> 
</head> 
<body> 
<S:SVg xmlns:s="http://www.w3.0rg/2000/svg" version="1.1" 
viewBox="0 0 100 100" style="width:100%; height:100%"> 
<s:rect x="0" y="0" width="100" height="100" style="fill:red" /> 
</s:svg> 
</body> 
</html> 
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其 中 的 <html> 元 素 的 localName 和 tagName 都 是 "html" ,namespaceURL 是 "http://www.w3 . 
org/1999/xhtml"， 而 prefix 是 null1。 对 于 <s:svg> 元 素 ，localName 是 "svg"，tagName 是 











"s:svg"，namespaceURI 是 "https://www.w3.org/2000/svg"， 而 prefix 是 "s"。 


DOM3 进一步 增加 了 如 下 与 命名 空间 相关 的 方法 : 











口 isDefaultNamespace (namespaceURI) ,返回 布尔 值 ， 表示 namespaceURI 是否 为 节点 的 默 
认命 名 空间 ; 

口 lookupNamespaceURI (prefix) ， 返 回 给 定 prefix 的 命名 空间 URI; 

D lookupPrefix (namespaceURI), 返回 给 定 namespaceURI 的 前 级 。 








对 前 面 的 例子 ， 可 以 执行 以 下 代码 : 


console.log(document .body.isDefaultNamespace ("http://www.w3.o0rg/1999/ 
Xhtml )): /true 


// 假设 svg 包含 对 <s :svg> 元 素 的 引用 
console.log(svg.lookupPrefix("http://www.w3.o0rg/2000/svg")); // "s" 
console.log(svg.lookupNamespaceURI("s")); // "http://www.w3.org/2000/svg" 
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这 些 方 法 主要 用 于 通过 元 素 查 询 前 面 和 命名 空间 URI， 以 确定 元 素 与 文档 的 关系 。 

2. Document 的 变化 

DOM2 在 Document 类 型 上 新 增 了 如 下 命名 空间 特定 的 方法 : 

口 createElementNS (namespaceURI，tagName) ， 以 给 定 的 标签 名 tagName 创建 指定 命名 空 

间 namespaceURI 的 一 个 新 元 素 ; 

口 createAttributeNSs (namespaceURI, attributeName) ， 以 给 定 的 属性 名 attributeName 

创建 指定 命名 空间 namespaceURI 的 一 个 新 属性 ; 

口 getElementsByTagNameNS (namespaceURI，tagName) ， 返 回 指定 命名 空间 namespaceURI 
中 所 有 标签 名 为 tagName 的 元 素 的 NodeList。 

使 用 这 些 方法 都 需要 传人 相应 的 命名 空间 URI ( 不 是 命名 空间 前 缀 )， 如 下 面 的 例子 所 示 : 

// 创建 一 个 新 SVG 元 素 


let svg = document.createElementNS ("http://www.w3.o0rg/2000/svg", "svg"); 
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// 创建 一 个 任意 命名 空间 的 新 属性 


let att = document.createAttripbuteNS ("http://www.somewhere.com", "random"); 





// 获取 所 有 XHTML 元 素 
let elems = document .getElementsByTagNameNS ("http://www.w3.o0org/1999/xhtml", "*"),; 


这 些 命 名 空间 特定 的 方法 只 在 文档 中 包含 两 个 或 两 个 以 上 命名 空间 时 才 有 用 。 

3. Element 的 变化 

DOM2 Core 对 Element 类 型 的 更 新 主要 集中 在 对 属性 的 操作 上 。 下 面 是 新 增 的 方法 : 

口 getAttributeNS (namespaceURI, localName), 取得 指定 命名 空间 namespaceURI 中 名 为 

localName 的 属性 ; 

口 getALtributeNodqeNS (namespaceURI, localName), 取得 指定 命名 空间 namespaceURI 中 

名 为 1ocalName 的 属性 节点 ; 

口 getElementsByTagNameNS (namespaceURI，tagName) ， 取 得 指定 命名 空间 namespaceURI 

中 标签 名 为 tagName 的 元 素 的 NodeList; 

口 hasAttributeNS (namespaceURI，1ocalName) ， 返 回 布尔 值 ， 表 示 元 素 中 是 否 有 命名 空间 
namespaceURI 下 名 为 localName 的 属性 (注意 ，DOM2 Core 也 添加 不 带 命名 空间 的 
hasAttribute() 方 法 ); 

口 removeAttributeNSsS (namespaceURI, localName), 删除 指定 命名 空间 namespaceURI 中 

名 为 1ocalName 的 属性 ; 

口 setALETributeNS (namespaceURI, qualifiedName, value), 设置 指定 命名 空间 namespaceURI 

中 名 为 gualifiedName 的 属性 为 value; 

口 setAttributeNodeNS (attNode), 为 元 素 设置 (添加 ) 包含 命名 空间 信息 的 属性 节点 attNode。 

这 些 方法 与 DOM1 中 对 应 的 方法 行为 相同 , 除 setAttributeNodeNs () 之 外 都 只 是 多 了 一 个 命名 
空间 参数 。 

4. NamedNodeMap 的 变化 

NamedNodeMap 也 增加 了 以 下 人 处理 命名 空间 的 方法 。 因 为 NamedNodeMap 主要 表示 属性 ， 所 以 这 
些 方法 大 都 适用 于 属性 : 
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D getNamedItemNS (namespaceURI, localName), 取得 指 定 命名 空间 namespaceURI 1 名 为 


localName 的 项 ; 

口 femoveNamedqItemNS (namespaceURI, localName), 删除 指定 命名 空间 namespaceURI 中 
名 为 1ocalName 的 项 ; 

口 setNamedItemNS (node) ， 为 元 素 设置 (添加) 包含 命名 空间 信息 的 节点 。 

这 些 方 法 很 少 使 用 ， 因 为 通常 都 是 更 用 元 素来 访问 属性 。 


16.1.2 ”其 他 变化 


除 命名 空间 相关 的 变化 ，DOM2 Core 还 对 DOM 的 其 他 部 分 做 了 一 些 更 新 。 这 些 变化 与 XML 命名 
空间 无 关 ， 主 要 关注 DOM API 的 完整 性 与 可 靠 性 。 

1. DocumentType 的 变化 

DocumentType 新 增 了 3 个 属性 : publicId、systemId 和 internalSubset。publicId、 
systemId 属性 表示 文档 类 型 声明 中 有 效 但 无 法 使 用 DOMI1 API 访问 的 数据 ,比如 下 面 这 个 HTML 文档 
类 型 声明 : 


<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.01// EN" 
"http://ww.w3.o0rg/TR/html4/strict.dtd"> 














































































































其 pupblicIgd 是 "-// W3C// DTD HTML 4.01// EN", 而 systemId 是 "http://www.w3.org/TR/ 
html4/strict.dtgd"。 支 持 DOM2 的 浏览 器 应 该 可 以 运行 以 下 JavaScript 代码 : 


console.log(document .doctype.publicId); 
console.log(document .doctype.systemId); 


通常 在 网 页 中 很 少 需要 访问 这 些 信息 。 
internalSubset 用 于 访问 文档 类 型 声明 中 可 能 包含 的 额外 定义 ， 如 下 面 的 例子 所 示 : 


<!IDOCTYPE html PUBLIC "-// W3C// DTD XHTML 1.0 Strict// EN" 
"http://www.w3.org/TR/xhtml1l/DTD/xhtmll-strict.dtd" 
[<!ELEMENT name (#PCDATA)>] > 



























































对 于 以 上 声明 , document .doctype.internalSubset 会 返回 "<!ELEMENT name (#PCDATA)> 
HTML 文档 中 几乎 不 会 涉及 文档 类 型 的 内 部 子 集 ，XML 文档 中 稍微 常用 一 些 。 

2. Document 的 变化 

Document 类 型 的 更 新 中 唯一 跟 命名 空间 无 关 的 方法 是 importNode () 。 这 个 方法 的 目的 是 从 其 他 
以 便 将 其 插入 新 文档 。 每 个 ee ownerDocument 属性 ， 
表示 所 属 文档 。 如 果 调 用 appendchi1d() 方 法 时 传人 节点 的 ownerDocument 不 是 指向 当前 文档 ， 则 
会 发 生 错 误 。 而 调用 importNode() 导 和 其 他 文档 的 节点 会 返回 一 个 新 节点 ， 这 个 新 节点 的 
ownerDocument 属性 是 正确 的 。 

importNode () 方 法 跟 cloneNode () 方 法 类 似 , 同样 接收 两 个 参数 : 要 复制 的 节点 和 表示 是 否 同时 
复制 子 树 的 布尔 值 ， 返 回 结果 是 适合 在 当前 文档 中 使 用 的 新 节点 。 下 面 看 一 个 例子 : 


let newNode = document.importNode (oldNode, true); // 导入 节点 及 所 有 后 代 
document .bodqy .appendChild (newNode); 


这 个 方法 在 HTML 中 使 用 得 并 不 多 ， 在 XML 文档 中 的 使 用 会 更 多 一 些 (第 22 章 会 深入 讨论 )。 
DOM2 View 给 Document 类 型 增加 了 新 属性 defaultview， 是 一 个 指向 拥有 当前 文档 的 窗口 (或 
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窗 格 <frame> ) 的 指针 。 这 个 规范 中 并 没有 明确 视图 何 时 可 用 , 因此 这 是 添加 的 唯一 一 个 属性 。 dqefaultView 
属性 得 到 了 除 IE8 及 更 早 版 本 之 外 所 有 浏览 器 的 支持 IE8 及 更 早 版 本 支持 等 价 的 parentwindow 属性， 
Opera 也 支持 这 个 属性 。 因 此 要 确定 拥有 文档 的 窗口 ， 可 以 使 用 以 下 代码 : 

let parentWindow = document.defaultView || document .parentWindow; 

除了 上 面 这 一 个 方法 和 一 个 属性 ，DOM2 Core 还 针对 document . implementation 对 象 增 加 了 两 
个 新 方法 : createDocumentType() 和 createDocument () 。 前 者 用 于 创建 DocumentType 类 型 的 新 
节点 ,接收 3 个 参数 :文档 类 型 名 称 、publicId 和 systemId。 比如 ,以 下 代码 可 以 创建 一 个 新 的 HTML 
4.01 严格 型 文档 : 


let doctype = document.implementation.createDocumentType ("html", 
"-// W3C// DTD HTML 4.01// EN", 
"http://www.w3.o0rg/TR/html4/strict.dtd"); 


已 有 文档 的 文档 类 型 不 可 更 改 ， 因 此 createDocumentType() 只 在 创建 新 文档 时 才 会 用 到 ， 而 创 
建新 文档 要 使 用 createDocument () 方法 。createDocument () 接收 3 个 参数 : 文档 元 素 的 
namespaceURI、 文 档 元 素 的 标签 名 和 文档 类 型 。 比 如 ， 下 列 代 码 可 以 创建 一 个 空 的 XML 文档: 

































































let doc = document.implementation.createDocument ("", "root", null); 
这 个 空 文档 没有 命名 空间 和 文档 类 型 ， 只 指定 了 <root> 作 为 文档 元 素 。 要 创建 一 个 XHTML 文档 ， 
可 以 使 用 以 下 代码 : 


let doctype = document.implementation.createDocumentType ("html", 
"-// W3C// DTD XHTML 1.0 Strict// EN", 
"http://www.w3.o0org/TR/xhtml1/DTD/xhtml1l-strict.dtd"); 





let doc = document.implementation.createDocument ("http://www.w3.org/1999/xhtml", 
"html", doctype); 


这 里 使 用 了 适当 的 命名 空间 和 文档 类 型 创建 一 个 新 XHTML 文档 。 这 个 文档 只 有 一 个 文档 元 素 <html>， 
他 一 切 都 需要 另行 添加 。 

DOM2 HTML 模块 也 为 document . implamentation 对 象 添加 了 createHTMLDocument () 方 法 。 
使 用 这 个 方法 可 以 创建 一 个 完整 的 HTML 文档 , 包含 <html>、<head>、 <title> 和 <body> 元 素 。 这 个 
方法 只 接收 一 个 参数 ， 即 新 创建 文档 的 标题 ( 放 到 <title> 元 素 中 ), 返回 一 个 新 的 HTML 文档 。 比 如 : 


let htmldoc = document.implementation.createHTMLDocument ("New Doc" ) ; 
console.log(htmldoc.title); // "New Doc" 
console.log(typeof htmldoc.body); // "object" 


createHTMLDocument () 方 法 创建 的 对 象 是 HTMLDocument 类 型 的 实例 ， 因 此 包括 该 类 型 所 有 相 
关 的 方法 和 属性 ， 包 括 title 和 body 属性 。 

3. Node 的 变化 

DOM3 新 增 了 两 个 用 于 比较 节点 的 方法 : ijsSameNode () 和 isEqualNode()。 这 两 个 方法 都 接收 
一 个 节点 参数 ， 如 果 这 个 节点 与 参考 节点 相同 或 相等 ， 则 返回 true。 节 点 相同 ， 意 味 着 引用 同一 个 对 
象 ; 节点 相等 , 意味 着 节点 类 型 相同 , 拥有 相等 的 属性 (nodeName、nodeValue 等 ), 而 且 attributes 
和 childNogdes 也 相等 ( 即 同样 的 位 置 包 含 相等 的 值 )。 来 看 一 个 例子 : 


let divl = document.createElement ("div"); 
divl.setAttripbute("class", "box"); 
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let div2 = document.createElement ("div"); 
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div2.setAttribute("class", "box"); 
console.log(divil.isSameNode (div1)); // true 
console.log(divil.isEqualNode (div2)); // true 
console.log(divl.isSameNode (div2)); // false 





这 里 创建 了 包含 相同 属性 的 两 个 <aiv> 元 素 。 这 两 个 元 素 相等 ， 但 不 相同 。 

DOM3 也 增加 了 给 DOM 节点 附加 额外 数据 的 方法 。setUserData() 方 法 接收 3 个 参数 : 键 、 值 、 
处 理 函 数 ， 用 于 给 节点 追加 数据 。 可 以 像 下 面 这 样 把 数据 添加 到 一 个 节点 : 

document .body.setUserData("name", "Nicholas", function() {}); 

然后 ， 可 以 通过 相同 的 键 再 取得 这 个 信息 ， 比 如 : 

let value = document .body.getUserDatal("name"),; 

setUserData() 的 处 理 函数 会 在 包含 数据 的 节点 被 复制 、 删 除 、 重 命名 或 导入 其 他 文档 的 时 候 执 
行 , 可 以 在 这 时 候 决 定 如 何 处 理 用 户 数据 。 处 理 函数 接收 5 个 参数 : 表示 操作 类 型 的 数值 (1 代表 复制 ， 
2 代表 导入 ，3 代表 删除 ，4 代表 重 命 名 )、 数 据 的 键 、 数 据 的 值 、 源 节点 和 目标 节点 。 删 除 节 点 时 ， 源 
节点 为 nu11; 除 复制 外 ， 目 标 节 点 都 为 null。 


let div = document.createElement ("div"); 


















































div.setUserData("name", "Nicholas", function(operation, key, value, src, dest) { 
if (operation == 1) { 
dest.setUserData(key, value, function() {}); } 


学 


let newDiv = Qiv.cloneNode (true) ; 
console.log (newDiv.getUserData("name")); // "Nicholas" 


这 里 先 创建 了 一 个 <aiv> 元 素 , 然后 给 它 添加 了 一 些 数据 , 包含 用 户 的 名 字 。 在 使 用 cloneNode () 
复制 这 个 元 素 时 ,就 会 调用 处 理 函 数 ， 从 而 将 同样 的 数据 再 附加 给 复制 得 到 的 目标 节点 。 然 后 ， 在 副本 
节点 上 调用 getUserData() 能 够 取得 附加 到 源 节点 上 的 数据 。 

4. 内 嵌 窗 格 的 变化 

DOM2 HTML 给 HTMLIFrameElement ( 即 <iframe>， 内 般 窗 格 ) 类 型 新 增 了 一 个 属性 ， 叫 
contentDocument。 这 个 属性 包含 代表 子 内 山 窗 格 中 内 容 的 aocument 对 象 的 指针 。 下 面 的 例子 展示 
了 如 何 使 用 这 个 属性 : 


let iframe = document .getElementById("myIframe"); 
let iframeDoc = iframe.contentDocument; 


contentDocument 属性 是 Document 的 实例 ， 拥 有 所 有 文档 属性 和 方法 ， 因 此 可 以 像 使 用 其 他 
HTML 文档 一 样 使 用 它 。 还 有 一 个 属性 contentwindow， 返 回 相 应 窗 格 的 window 对 象 ， 这 个 对 象 上 
有 一 个 aocument 属性 。 所 有 现代 浏览 器 都 支持 contentDocument 和 contentwingdow 属性 。 


























































































































注意 跨 源 访问 子 内 广 窗 格 的 document 对 象 会 受到 安全 限制 。 如 果 内 嵌 窗 格 中 加 载 了 不 
同 域名 (或 子 域名 ) 的 页 面 ， 或 者 该 页 面 使 用 了 不 同 协议 ， 则 访问 其 document 对 象 会 抛 
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16.2 ”样式 


HTML 中 的 样式 有 3 种 定义 方式 : 外 部 样式 表 (通过 <1ink> 元 素 )、 文 档 样式 表 (使 用 <style> 元 
素 ) 和 元 素 特定 样式 (使 用 style 属性 )。DOM2 Style 为 这 3 种 应 用 样式 的 机 制 都 提供 了 API。 


16.2.1 存 取 元 素 样式 


任何 支持 style 属性 的 HTML 元 素 在 JavaScript 中 都 会 有 一 个 对 应 的 style 属性 。 这 个 style 属 
性 是 cssstyleDeclaration 类 型 的 实例 ， 其 中 包含 通过 HTML style 属性 为 元 素 设置 的 所 有 样式 信 
息 ， 但 不 包含 通过 层 县 机 制 从 文档 样式 和 外 部 样式 中 继承 来 的 样式 。HTML style 属性 中 的 CSS 属性 
在 JavaScript style 对 象 中 都 有 对 应 的 属性 。 因 为 CSS 属性 名 使 用 连 字符 表示 法 ( 用 连 字符 分 隔 两 个 单 
词 ， 如 background-image )， 所 以 在 JavaScript 中 这 些 属性 必须 转换 为 驼峰 大 小 写 形式 (如 
backgroundImage )。 下 表 给 出 了 几 个 常用 的 CSS 属性 与 style 对 象 中 等 价 属 性 的 对 比 。 

























































































CSS 属性 JavaScript 属性 
background-image style.backgroundImage 
color style.color 
display style.display 
font-family style.fontFamily 




















大 多 数 属性 名 会 这 样 直接 转换 过 来 。 但 有 一 个 CSS 属性 名 不 能 直接 转换 ， 它 就 是 float。 因 为 
float 是 JavaScript 的 保留 字 ， 所 以 不 能 用 作 属 性 名 。DOM2 Style 规定 它 在 style 对 象 中 对 应 的 属性 
应 该 是 cssFloat。 

任何 时 候 ， 只 要 获得 了 有 效 DOM 元 素 的 引用 ， 就 可 以 通过 JavaScript 来 设置 样式 。 来 看 下 面 的 
例子 : 


let myDiv = document .getElementById("myDiv" ) ; 





























// 设置 背景 颜色 
myDiv.style.backgroundColor = "red"; 


// 修改 大 小 
myDiv.style.width = "100px"; 
myDiv.style.height = "200px"; 


// 设置 边框 
myDiv.style.border = "lpx solid black"; 


像 这 样 修 改 样式 时 ， 元 素 的 外 观 会 自动 更 新 。 











注意 在 标准 模式 下 ， 所 有 尺寸 都 必须 包含 单位 。 在 混杂 模式 下 ， 可 以 把 style.wiath 
设置 为 "20"， 相 当 于 "20px"。 如 果 是 在 标准 模式 下 ， 把 style.wiath 设置 为 "20" 会 被 


忽略 ， 因 为 没有 单位 。 实 践 中 ， 最 好 一 直 加 上 单位 。 











通过 style 属性 设置 的 值 也 可 以 通过 style 对 象 获取 。 比 如 下 面 的 HTML : 


<div id="myDiv" style="background-color: blue; width: 10px; height: 25px"></div> 
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这 个 元 素 style 属性 的 值 可 以 像 这 样 通过 代码 获取 : 

console.log(myDiv.style.backgroundColor); // "blue" 
console.log(myDiv.style.width); A LOBE 
console.log(myDiv.style.height); A ZOD" 








如 果 元 素 上 没有 style 属性 ， 则 style 对 象 包含 所 有 可 能 的 CSS 属性 的 空 值 。 


1. DOM 样式 属性 和 方法 
DOM2 Style 规范 也 在 style 对 象 上 定义 了 一 些 属性 和 方法 。 这 些 属性 和 方法 提供 了 元 素 style 属 














value, 




















通过 cssT 








性 的 信息 并 支持 修改 ， 列 举 如 下 。 

口 cssText ,包含 style 属性 中 的 CSS 代码 。 

口 length， 应 用 给 元 素 的 CSS 属性 数量 。 

口 barentRule， 表 示 CSS 信息 的 cssRule 对 象 (下 一 节 会 讨论 cssRule 类 型 )。 

口 getPropertyCSSValue (propertyName) ,返回 包含 CSS 属 性 propertyName 值 的 cssvalue 
对 象 (已 废弃 )。 


口 getPropertyPriority (propertyName) ,如 果 CSS 属性 propertyName 使 用 了 !important 















































zr 


则 返回 "important"， 和 否则 返回 空 字符 串 。 





口 getPropertyValue (propertyName), 返回 属性 propertyName 的 字符 串 值 。 
口 item(index) ， 返回 索引 为 ndex 的 CSS 属性 名 。 
口 removeProperty (propertyName) ， 从 样式 中 删除 CSS 属性 propertyName。 








= 








上 











口 setProperty (propertyName，value，priority)， 设置 CSS 属性 propertyName 的 值 为 








已 


priority 是 "important "或 空 字 符 串 。 


ext 属性 可 以 存 取 样式 的 CSS 代码 。 在 读 模 式 下 ，cssText 返回 style 属性 CSS 代码 























在 浏览 器 内 部 的 表示 。 在 写 模式 下 ， 给 cssText 赋值 会 重 写 整个 style 属性 的 值 ， 意 味 着 之 前 通过 
style 属性 设置 的 属性 都 会 丢失 。 比 如 ， 如 果 一 个 元 素 通过 style 属性 设置 了 边框 ， 而 赋 给 cssText 





















































属性 的 值 不 包含 边框 ， 则 元 素 的 边框 会 消失 。 下 面 的 例子 演示 了 cssText 的 使 用 : 


myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; 
console.log(myDiv.style.cssText); 


设置 cssT 
lengtn 属 











人 
口 





for (let 





ext 是 一 次 性 修改 元 素 多 个 样式 最 快捷 的 方式 ， 因 为 所 有 变化 会 同时 生效 。 
性 是 跟 item() 方 法 一 起 配套 迭代 CSS 属性 用 的 。 此 时 ，style 对 象 实际 上 变 成 了 一 个 














， 也 可 以 用 中 括号 代替 item() 取 得 相应 位 置 的 CSS 属性 名 ， 如 下 所 示 : 











i = 0, len = myDiv.style.length; i < len; i++) { 


console.log (myDiv.style[i]); // 或 者 用 myDiv.style.item(i) 


} 
































使 用 中 括号 或 者 item() 都 可 以 取得 相应 位 置 的 CSS 属性 名 ("background-color"， 不 是 














"backgroundColor" )。 这 个 属性 名 可 以 传 给 getPropertyValue () 以 取得 属性 的 值 ， 如 下 面 的 例子 


所 示 : 


let prop, 
下 OF (二 ,三 
prop = 
Value = 
console 


} 








value, i, len; 

0, len = myDiv.style.length; i < len; i++) { 
myDiv.style[i]; // 或 者 用 myDiv.style.item(i) 
myDiv.style.getPropertyValue (prop); 

.log( prop: S${value}. ); 
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getPropertyValue() 方 法 返回 CSS 属性 值 的 字符 串 表 示 。 如 果 需 要 更 多 信息 ， 则 可 以 通过 
getPropertyCSSValue() 获取 cssvalue 对 象 。 这 个 对 象 有 两 个 属性 : cssText 和 cssValueType。 
前 者 的 值 与 get PropertyValue() 方 法 返回 的 值 一 样 ; 后 者 是 一 个 数值 常量 ， 表 示 当 前 值 的 类 型 (0 
代表 继承 的 值 ，1 代表 原始 值 ，2 代表 列表 ，3 代表 自 定义 值 ) “下 面 的 代码 演示 了 如 何 输出 CSS 属性 
值 和 值 类 型 : 
let prop, value, i, len; 
for (i = 0, len = myDiv.style.length; i < len; i++) { 
prop = myDiv.stylel[lil]; // alternately, myDiv.style.item(i) 
value = myDiv.style.getPropertyCSSValue (prop); 
console.log( prop: ${value.cssText} (${value.cssValueType}).); 


} 

removeProperty () 方 法 用 于 从 元 素 样式 中 删除 指定 的 CSS 属性 ,使 用 这 个 方法 删除 属性 意味 着 会 
应 用 该 属性 的 默认 〈 从 其 他 样式 表层 受 继 承 的 ) 样式 。 例 如 ， 可 以 像 下 面 这 样 删 除 style 属性 中 设置 
的 border 样式 : 


myDiv.style.removeProperty ("border"); 


在 不 确定 给 定 CSS 属性 的 默认 值 是 什么 的 时 候 ， 可 以 使 用 这 个 方法 。 只 要 从 style 属性 中 删除 ， 
就 可 以 使 用 默认 值 。 


2. 计算 样式 

style 对 象 中 包含 支持 style 属性 的 元 素 为 这 个 属性 设置 的 样式 信息 , 但 不 包含 从 其 他 样式 表层 琶 继 
承 的 同样 影响 该 元 素 的 样式 信息 .DOM2 Style 在 document .defaultView 上 增加 了 getCcomputedstyle() 
方法 。 这 个 方法 接收 两 个 参数 : 要 取得 计算 样式 的 元 素 和 伪 元 素 字符 串 (如 " :after" )。 如 果 不 需要 查 
询 伪 元 素 ， 则 第 二 个 参数 可 以 传 nul1。getComputedstyle() 方 法 返回 一 个 CssstyleDeclaration 
对 象 (与 style 属性 的 类 型 一 样 )， 包 含 元 素 的 计算 样式 。 假 设 有 如 下 HTML 页 面 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>Computed Styles Example</title> 
<style type="text/css"> 
#myDiv { 
background-color: blue; 
width: 100px; 
height: 200px; 
} 
</style> 
</head> 
<body> 
<div id="myDiv" style="background-color: red; border: lpx solid black"></div> 
</body> 
</html> 


这 里 的 <div> 元 素 从 文档 样式 表 ( <style> 元 素 ) 和 自己 的 style 属性 获取 了 样式 。 此 时 ， 这 个 元 
素 的 style 对 象 中 包含 backgroundColor 和 border 属性 ， 但 不 包含 (通过 样式 表 规 则 应 用 的 ) 
width 和 height 属性 。 下 面 的 代码 从 这 个 元 素 获取 了 计算 样式 : 

































































































































































中 不 过 ，getPropertycssvalue() 方 法 已 经 被 废弃 ,虽然 可 能 有 浏览 器 还 支持 , 但 随时 有 可 能 被 删除 。 建 议 开发 中 使 


用 getPropertyValue()。 一 一 译 者 注 
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let myDiv = document .getElementById("myDiv"); 
let computedStyle = document .defaultView.getComputedSstyle (myDiv, null); 


console.log(computedStyle.backgroundColor); // "red" 
console.log(computedSstyle.width); 77 ”OOP 
console.log(computedStyle.height); 7 O00PY 

console.log (computedSstyle.border); // "1px solid black" (在 某 些 浏览 器 中 ) 


在 取得 这 个 元 素 的 计算 样式 时 ， 得 到 的 背景 颜色 是 "red" ， 宽 度 为 "100px" ， 高 度 为 "200px"。 背 
景 颜色 不 是 "blue" , 因为 元 素 样式 覆盖 了 它 。border 属性 不 一 定 返回 样式 表 中 实际 的 poraer 规则 ( 某 
些 浏览 器 会 )。 这 种 不 一 致 性 是 因 浏览 器 解释 简写 样式 的 方式 造成 的 ， 比 如 boraet 实际 上 会 设置 一 组 
别 的 属性 ,在 设置 border 时 , 实际 上 设置 的 是 4 条 边 的 线条 宽度 、 颜 色 和 样式 (border-left-wigdth、 
border-top-color、border-bottom-style 等 )。 因 此 ， 即 使 computedstyle.border 在 所 有 浏 
览 费 中 都 不 会 返回 值 ， computedStyle.borderLeftWidth 也 一 定 会 返回 值 。 









































注意 浏览 器 虽然 会 返回 样式 值 ， 但 返回 值 的 格式 不 一 定 相 同 。 比 如 ，Firefox 和 Safari 会 
把 所 有 颜色 值 转换 为 RGB 格式 ( 如 红色 会 变 成 rgb(255,0,0) ), 而 Opera 把 所 有 颜色 转 


换 为 十 六 进 制 表示 法 ( 如 红色 会 变 成 #ff0000 )。 因 此 在 使 用 getcomputedStyle() 时 一 
定 要 多 测试 几 个 浏览 器 。 











关于 计算 样式 要 记 住 一 点 ， 在 所 有 浏览 器 中 计算 样式 都 是 只 读 的 ,不 能 修改 getcomputedqstyle() 
方法 返回 的 对 象 。 而 且 ， 计算 样式 还 包含 浏览 器 内 部 样式 表 中 的 信息 。 因 此 有 默认 值 的 CSS 属性 会 出 现 
在 计算 样式 里 。 例 如 ，visibility 属性 在 所 有 浏览 器 中 都 有 默认 值 ， 但 这 个 值 因 实现 而 不 同 。 有 些 浏 
览 器 会 把 visibility 的 默认 值 设置 为 "visible", 而 另 一 些 将 其 设置 为 "inherit"。 不 能 假设 CSS 属 
性 的 默认 值 在 所 有 浏览 器 中 都 一 样 。 如 果 需 要 元 素 具 有 特定 的 默认 值 , 那么 一 定 要 在 样式 表 中 手动 指定 。 


16.2.2 ”操作 样式 表 


CSSStyleSheet 类 型 表示 CSS 样式 表 ， 包 括 使 用 <1ink> 元 素 和 通过 <style> 元 素 定义 的 样式 表 。 
注意 , 这 两 个 元 素 本 身分 别 是 HTMLLinkElement 和 HTMLStyleElement。CSSStyleSheet 类 型 是 一 
个 通用 样式 表 类 型 ， 可 以 表示 以 任何 方式 在 HTML 中 定义 的 样式 表 。 男 外 ， 元 素 特定 的 类 型 允许 修改 
HTML 属性 ， 而 CSsstyleSheet 类 型 的 实例 则 是 一 个 只 读 对 象 (只 有 一 个 属性 例外 )。 

CSSStylesheet 类 型 继承 stylesheet ,后 者 可 用 作 非 CSS 样 式 表 的 基 类 ,以 下 是 cssstylesheet 
从 stylesheet 继承 的 属性 。 
D disabled, 布尔 值 ， 表 示 样 式 表 是 否 被 禁用 了 这 个 属性 是 可 读 写 的 ， 因 此 将 它 设 置 为 true 
会 禁用 样式 表 )。 
口 nref， 如 果 是 使 用 <1ink> 包 含 的 样式 表 ， 则 返回 样式 表 的 URL， 和 否则 返回 null。 

口 media， 样 式 表 支持 的 媒体 类 型 集合 ， 这 个 集合 有 一 个 length 属性 和 一 个 item() 方 法 ， 跟 所 
有 DOM 集合 一 样 。 同 样 跟 所 有 DOM 集合 一 样 ， 也 可 以 使 用 中 括号 访问 集合 中 特定 的 项 。 如 果 
样式 表 可 用 于 所 有 媒体 ， 则 返回 空 列表 。 

口 ownerNode, 指向 拥有 当前 样式 表 的 节点 , 在 HTML 中 要 么 是 <1ink> 元 素 要 么 是 <style> 元 素 
(在 XML 中 可 以 是 处 理 指令 ), 如 果 当 前 样式 表 是 通过 eimport 被 包含 在 另 一 个 样式 表 中 , 则 这 
个 属性 值 为 nul1。 
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口 parentStyleSheet， 如 果 当 前 样式 表 是 通过 eimport 被 包含 在 男 一 个 样式 表 中 ， 则 这 个 
指向 导入 它 的 样式 表 。 
口 title，ownerNode 的 title 属性 。 
口 type， 字 符 串 ， 表 示 样 式 表 的 类 型 。 对 
上 述 属性 里 除了 aisableqa， 其 他 属性 都 是 
还 支持 以 下 属性 和 方法 。 
口 cssRules， 当 前 样式 表 包 含 的 样式 规则 的 集合 。 
口 ownerRule， 如 果 样 式 表 是 使 用 eimport 导入 的 ， 则 指向 导入 规则 ; 否则 为 nul1。 
口 deleteRule (index) ， 在 指定 位 置 删除 cssRules 中 的 规则 。 
口 insertRule(rule，index) ， 在 指定 位 置 向 cssRules 中 插入 规则 。 

document .styleSheets 表示 文档 中 可 用 的 样式 表 集 合 。 这 个 集合 的 1ength 属性 保存 着 文档 中 
样式 表 的 数量 ， 而 每 个 样式 表 都 可 以 使 用 中 括号 或 item() 方 法 获取 。 来 看 这 个 例子 : 


let sheet = null; 

for (let i = 0, len = document.styleSheets.length; i < len; i++) { 
sheet = document.styleSheets[i]; 
console.log(sheet .href) ; 


以 上 代码 输出 了 文档 中 每 个 样式 表 的 href 属性 (<style> 元 素 没 有 这 个 属性 )。 

document .styleSheets 返回 的 样式 表 可 能 会 因 浏 览 器 而 异 。 所 有 浏览 器 都 会 包含 <style> 元 素 
和 rel 属性 设置 为 "stylesheet "的 <1ink> 元 素 。IE 、Opera 、Chrome 也 包含 rel 属性 设置 为 
"alternate stylesheet" 的 <1ink> 元 素 。 

通过 <1link> 或 <style> 元 素 也 可 以 直接 获取 cssstylesheet 对 象 。DOM 在 这 两 个 元 素 上 暴露 了 
sheet 属性 ， 其 中 包含 对 应 的 cssstylesheet 对 象 。 

1. CSS 规则 

CSSRule 类 型 表示 样式 表 中 的 一 条 规则 。 这 个 类 型 也 是 一 个 通用 基 类 , 很 多 类 型 都 继承 它 , 但 其 中 
最 常用 的 是 表示 样式 信息 的 cssstyleRule (其 他 CSS 规则 还 有 eimport 、efont-face、epage 和 
echarset 等 ， 不 过 这 些 规则 很 少 需要 使 用 脚本 来 操作 )。 以 下 是 cssstyleRule 对 象 上 可 用 的 属性 。 
口 cssText， 返 回 整 条 规则 的 文本 。 这 里 的 文本 可 能 与 样式 表 中 实际 的 文本 不 一 样 ， 因 为 浏览 
内 部 处 理 样 式 表 的 方式 也 不 一 样 。Safari 始终 会 把 所 有 字母 都 转换 为 小 写 。 

口 parentRule, 如 果 这 条 规则 被 其 他 规则 ( 如 emedia ) 包含 , 则 指向 包含 规则 ， 和 否则 就 是 null。 

口 barentStylesheet， 包 含 当 前 规则 的 样式 表 。 

口 selectorText, 返回 规则 的 选择 符 文 本 。 这 里 的 文本 可 能 与 样式 表 中 实际 的 文本 不 一 样 ， 因 为 
浏览 器 内 部 处 理 样 式 表 的 方式 也 不 一 样 。 这 个 属性 在 Firefox、Safari、Chrome 和 正 中 是 只 读 的 ， 
在 Opera 中 是 可 以 修改 的 。 

口 style,， 返回 CssstyleDeclaration 对 象 ， 可 以 设置 和 获取 当前 规则 中 的 样式 。 

口 type， 数 值 常量 ， 表 示 规 则 类 型 。 对 于 样式 规则 ， 它 始终 为 1。 

在 这 些 属性 中 , 使 用 最 多 的 是 cssText .selectorText 和 styleocssText 属性 与 style.cssText 
类 似 , 不 过 并 不 完全 一 样 。 前 者 包含 选择 符 文本 和 环绕 样式 声明 的 大 括号 , 而 后 者 则 只 包含 样式 声明 ( 类 
似 于 元 素 上 的 style.cssText )。 此 外 ，cssText 是 只 读 的 ， 而 style .cssText 可 以 被 重 写 。 

多 数 情 况 下 ， 使 用 style 属性 就 可 以 实现 操作 样式 规则 的 任务 了 。 这 个 对 象 可 以 像 每 个 元 素 上 的 























CSS 样式 表 来 说 ， 就 是 "text /css"。 
只 读 的 。 除 了 上 面 继承 的 属性 ，cssstylesheet 类 型 





































































































































































































































































































472 第 16 章 DOM2 和 DOM3 





style 对 象 一 样 ， 用 来 读 取 或 修改 规则 的 样式 。 比 如 下 面 这 个 CSS 规则 : 


div.box { 
background-color: blue; 
width: 100px; 
height: 200px; 

} 






























































假设 这 条 规则 位 于 页 面 中 的 第 一 个 样式 表 中 , 而 且 是 该 样式 表 中 唯一 一 条 CSS 规则 , 则 下 列 代码 可 
以 获取 它 的 所 有 信息 : 

let sheet = Qocument .Sty1leSheets [0]:， 

let rules = sheet.cssRules || sheet.rules; // 取得 规则 集合 

let rule = rules[0]; // 取得 第 一 条 规则 

console.log(rule.selectorText); /YY “div boOK" 

console.log(rule.style.cssText); // 完整 的 CSS 代码 

console.log(rule.style.backgroundColor); // "blue" 

console.log(rule.style.width); A EOOBR" 

console.log(rule.style.height); ZA” DOOPDKT 

使 用 这 些 接口 ， 可 以 像 确定 元 素 style 对 象 中 包含 的 样式 一 样 ， 确 定 一 条 样式 规则 的 样式 信息 。 
































与 元 素 的 场景 一 样 ， 也 可 以 修改 规则 中 的 样式 ， 如 下 所 示 : 


let sheet 





document .styleSheets[0]; 





let rules sheet.cssRules || sheet.rules; // 取得 规则 集合 
let rule = rules[0]; // 取得 第 一 条 规则 
rule.style.backgroundColor = "red" 











注意 ， 这 样 修改 规则 会 影响 到 页 面 上 所 有 应 用 了 该 规则 的 元 素 。 如 果 页 面 上 有 两 个 <aiv> 元 素 有 
"box" 类 ， 则 这 两 个 元 素 都 会 受到 这 个 修改 的 影响 。 

2. 创建 规则 

DOM 规定 ， 可 以 使 用 insertRule () 方 法 向 样式 表 中 添加 新 规则 。 这 个 方法 接收 两 个 参数 : 规则 
的 文本 和 表示 插入 位 置 的 索引 值 。 下 面 是 一 个 例子 : 

sheet .insertRule("body { background-color: silver }"，0); // 使 用 DOM 方法 

这 个 例子 插入 了 一 条 改变 文档 背景 颜色 的 规则 。 这 条 规则 是 作为 样式 表 的 第 一 条 规则 ( 位置 0 ) 插 
和 的， 顺序 对 规则 层 赫 是 很 重要 的 。 
虽然 可 以 这 样 添加 规则 , 但 随 着 要 维护 的 规则 增多 ,很 快 就 会 变 得 非常 麻烦 。 这 时 候 ， 更 好 的 方式 
是 使 用 第 14 章 介绍 的 动态 样式 加 载 技术 。 

3. 删除 规则 

支持 从 样式 表 中 删除 规则 的 DOM 方法 是 seleteRule() ， 它 接收 一 个 参数 : 要 删除 规则 的 索引 。 
要 删除 样式 表 中 的 第 一 条 规则 ， 可 以 这 样 做 : 

sheet.deleteRule(0); // 使 用 DOM 方法 

与 添加 规则 一 样 ， 删 除 规则 并 不 是 Web 开发 中 常见 的 做 法 。 考 虑 到 可 能 影响 CSS 层 秋 的 效果 ， 册 
除 规则 时 要 慎重 。 


16.2.3 元素 尺寸 


本 节 介 绍 的 属性 和 方法 并 不 是 DOM2 Style 规范 中 定义 的 ， 但 与 HTML 元 素 的 样式 有 关 。DOM 一 
直 缺 乏 页 面 中 元 素 实际 尺寸 的 规定 。IE 率先 增加 了 一 些 属性 , 向 开发 者 暴露 元 素 的 尺寸 信息 。 这 些 属性 
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现在 已 经 得 到 所 有 主流 浏览 器 文 持 。 
1. 偏 移 尺 十 

第 一 组 属性 涉及 偏 移 尺 寸 (offset dimensions )， 包 含 元 素 在 屏幕 上 占用 的 所 有 视觉 空间 。 元 素 在 页 
面 上 的 视 党 空间 由 其 高 度 和 宽度 决定 ， 包 括 所 有 内 边 距 、 滚 动 条 和 边框 (但 不 包含 外 中) 以下 4 个 四 于 
属性 用 于 取得 元 素 的 偏 移 尺寸 。 
口 offsetHeight， 元 素 在 垂直 方向 上 占用 的 像素 尺寸 , 包括 它 的 高 度 、 水 平 滚动 条 高 度 ( 如 果 可 
见 ) 和 上 、 下 边框 的 高 度 。 
口 offsetLeft， 元 素 左 边框 外 侧 距离 包含 元 素 左边 框 内 侧 的 像素 数 。 
口 offsetTop， 元素 上 边框 外 侧 距 离 包 含 元 素 上 边框 内 侧 的 像素 数 。 
口 of fsetwidth， 元 素 在 水 平方 向 上 占用 的 像素 尺寸 ， 包括 它 的 宽度 、 垂 直 深 动 条 宽度 ( 如 果 可 

见 ) 和 左 、 右 边框 的 宽度 。 
其 中 , offsetLeft 和 offsetTop 是 相对 于 包含 元 素 的 , 包含 元 素 保存 在 offsetParent 属性 中 。 
offsetParent 不 一 定 是 parentNode。 比 如 ，<td> 元 素 的 offsetParent 是 作为 其 祖先 的 <table> 
元 素 ， 因 为 <table> 是 节点 层级 中 第 一 个 提供 尺寸 的 元 素 。 图 16-1 展示 了 这 些 属性 代表 的 不 同 尺寸 。 
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, > offsetHeight 
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图 16-1 


FE 


要 确定 一 个 元 素 在 页 面 中 的 偏 移 量 ， 可 以 把 它 的 offsetLeft 和 offsetTop 属性 分 别 与 offsetParent 
的 相同 属性 相 加 ， 一 直 加 到 根 元 素 。 下 面 是 一 个 例子 : 


function getElementLeft (element) { 
let actualLeft = element .offsetLeft; 
let current = element .offsetParent; 

































































while (current !== null) { 
actualLeft += current .offsetLeft; 
current = current.offsetpParent; 


} 


return actualLeft; 


. 
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function getElementTop(element) { 
let actualTop = element .offsetTop; 
let current = element .offsetParent; 


while (current !== null) { 
actualTop += current .offsetTop; 
current = current .offsetParent; 


} 
return actualTop; 
} 
这 两 个 函数 使 用 offsetParent 在 DOM 树 中 逐 级 上 溯 ， 将 每 一 级 的 偏 移 属 性 相 加 ， 最 终 得 到 元 
素 的 实际 偏 移 量 。 对 于 使 用 CSS 布局 的 简单 页 面 ， 这 两 个 函数 是 很 精确 的 。 而 对 于 使 用 表格 和 内 骨 窗 
格 的 页 面 布局 ， 它 们 返回 的 值 会 因 浏 览 器 不 同 而 有 所 差异 ， 因 为 浏览 器 实现 这 些 元 素 的 方式 不 同 。 一 
般 来 说 ， 包 含 在 <div> 元 素 中 所 有 元 素 都 以 <body> 为 其 offsetParent， 因 此 getElementleft () 
和 getElementTop() 返 回 的 值 与 offsetLeft 和 offsetTop 返回 的 值 相 同 。 



















































































注意 ”所 有 这 些 偏 移 尺 寸 属 性 都 是 只 读 的 ， 每 次 访问 都 会 重新 计算 。 因 此 ， 应 该 尽量 减少 





查询 它们 的 次 数 。 比 如 把 查询 的 值 保存 在 局 量 中 ， 就 可 以 避免 影响 性 能 。 





2. 客户 端 尺 十 

元 素 的 客户 端 尺 寸 ( client dimensions ) 包含 元 素 内 容 及 其 内 边 距 所 占用 的 空间 。 客 户 端 尺 寸 只 有 两 
个 相关 属性 : clientwidth 和 clientHeight。 其 中 ， clientwidth 是 内 容 区 宽度 加 左 、 右 内 边 距 宽 
度 ，clientHeight 是 内 容 区 高 度 加 上 、 下 内 边 距 高 度 。 图 16-2 形象 地 展示 了 这 两 个 属性 。 
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图 16-2 






































客户 端 尺 寸 实际 上 就 是 元 素 内 部 的 空间 ， 因 此 不 包含 滚动 条 占用 的 空间 。 这 两 个 属性 最 常用 于 确定 
浏览 器 视 口 尺寸 ， 即 检测 aocument .documentElement 的 clientwiath 和 clientHeight。 这 两 个 
属性 表示 视 口 (<html> 或 <body> 元 素 ) 的 尺寸 。 
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注意 “与 偏 移 尺寸 一 样 ， 客 户 端 


尺寸 也 是 只 读 的 ， 而 且 每 次 访问 都 会 重新 计算 。 





3. 滚动 尺寸 














最 后 一 组 尺寸 是 滚动 尺寸 scroll dimensions )， 提 供 了 元 素 内 容 滚动 距离 的 信息 。 有 些 元 素 ， 比 如 16 














<html> 无 须 任何 代码 就 可 以 自动 滚动 ， 而 其 他 元 素 则 需要 使 用 CSS 的 overflow 属性 令 其 滚动 。 滨 动 





尺寸 相关 的 属性 有 如 下 4 个 。 


口 scrollHeight， 没 有 滚动 条 出 现时 ， 元 素 内 容 的 总 高 度 。 











口 scrollTop， 内 容 区 顶部 隐藏 











图 16-3 展示 了 这 些 属 性 的 含 


口 scrollLeft， 内 容 区 左 侧 隐藏 的 像素 数 ， 设置 这 个 属性 











可 以 改变 元 素 的 滚动 位 置 。 


的 像素 数 ， 设 置 这 个 属性 可 以 改变 元 素 的 滚动 位 置 。 








口 scrollWwidth, 出 现时 ， 元 素 内 容 的 总 宽度 。 


scrollWidth 





隐藏 的 内 容 


scrollHeight 





边框 


scrollLeft 


scrollWigdth 和 scrollHeignht 可 以 用 来 者 
览 器 中 滚动 视 口 的 元 素 。 因 此 ，dqocument .documentElement .scrollHeight 





向 的 总 高 度 。 























scrollTop 

















上 定 给 定 元 素 内 容 的 实际 尺寸 。 例 如， <html> 元 素 是 浏 
就 是 整个 页 面 垂直 方 








scrollWidth 和 scrollHeight 与 clientwidth 和 clientHeight 之 间 的 关系 在 不 需要 滚动 的 
文档 上 是 分 不 清 的 。 如 果 文 档 尺 寸 超 过 视 口 尺寸 ， 则 在 所 有 主流 浏览 器 中 这 两 对 属性 都 不 相等 ， 
scrollWigdth 和 scollHeight 等 于 文档 内 容 的 宽度 ， 而 clientwidth 和 clientHeight 等 于 视 口 


的 大 小 。 








scrollLeft 和 scrollTop 属性 可 以 用 于 确定 当前 元 素 滚动 的 位 置 ， 或 者 用 于 设置 它们 的 滚动 位 
置 。 元 素 在 未 滚动 时 ， 这 两 个 属性 都 等 于 0。 如 果 元 素 在 垂直 方向 上 滚动 , 则 scrollTop 会 大 于 0， 














表示 元 素 顶 部 不 可 见 区 域 的 高 度 。 如 果 元 素 在 水 平方 向 上 滚动 ， 











侧 不 可 见 区 域 的 宽度 。 因 为 这 两 个 属 全 


也 是 可 写 的 ,所 以 把 它们 都 设置 为 0 就 可 以 重 


则 scrollLeft 会 大 于 0， 表 示 元 素 左 


E 署 元 素 的 滚动 位 置 。 
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下 面 这 个 函数 检测 元 素 是 不 是 位 于 顶部， 如 果 不 是 则 把 它 深 动 回 项 部 : 


function scrollToTop(element) { 
if (element.scrollTop != 0) { 
element.scrollTop = 0; 
} 
} 


这 个 函数 使 用 scrol1lTop 获取 并 设置 值 。 

4. 确定 元 素 尺寸 

浏览 器 在 每 个 元 素 上 都 暴露 了 getBoundingClientRect () 方 法 , 返回 一 个 DOMRect 对 象 ， 包含 
6 个 属性 : left、top、right、bottom、height 和 widqth。 这 些 属性 给 出 了 元 素 在 页 面 中 相对 于 视 





















































口 的 位 置 。 图 16-4 "展示 了 这 些 属性 的 含义 。 

(0,0) 全 

yop 

bottom 
十 
x / Left 
元 素 
< 一 此 - 
right 
图 16-4 


16.3 ”遍历 


DOM2 Traversal and Range 模块 定义 了 两 个 类 型 用 于 辅助 顺序 遍历 DOM 结构 。 这 两 个 类 型 一 一 
NodeIterator 和 TreeWalker 从 某 个 起 点 开始 执行 对 DOM 结构 的 深度 优先 遍历 。 

如 前 所 述 ，DOM 遍历 是 对 DOM 结构 的 深度 优先 遍历 ， 至 少 允 许 朝 两 个 方向 移动 ( 取决 于 类 型 )。 
遍历 以 给 定 节点 为 根 ， 不 能 在 DOM 中 向 上 超越 这 个 根 节 点 。 来 看 下 面 的 HTML : 

<!DOCTYPE html> 

<html> 

<head> 
<title>Example</title> 


</head> 
<body> 





























中 这 张 择 图 为 译 者 补充 ， 图 片 来 源 为 MDN 文档 的 Element .getBoundingClientRect () 英 文 版 页 面 。 一 一 译 者 注 
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<p><b>Hello</b> world!</p> 
</body> 
</html> 


这 段 代码 构成 的 DOM 树 如 图 16-5 所 示 。 


Element html 










Element body 
Element p 


Text world! 


Element head 







Element title 







Text Example Element b 














Text Hello 


图 16-5 





其 中 的 任何 节点 都 可 以 成 为 遍历 的 根 节点 。 比 如 ， 假 设 以 <bodqy> 元 素 作 为 遍历 的 根 节 点 ， 那 么 接 
下 来 是 <p> 元 素 、<b> 元 素 和 两 个 文本 节点 (都 是 <body> 元 素 的 后 代 )。 但 这 个 遍历 不 会 到 达 <html> 元 
素 、<head> 元 素 , 或 者 其 他 不 属于 <body> 元 素 子 树 的 元 素 。 而 以 document 为 根 节 点 的 遍历 ， 则 可 以 
访问 到 文档 中 的 所 有 节点 。 图 16-6 展示 了 以 document 为 根 节 点 的 深度 优先 遍历 。 


O 
@) Element html 


Element head 


Element title 
Text Example 






















Element pody 
Text world! 









©) 


@ 
(> 














Element b 
@) Text Hello 


图 16-6 
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从 aocument 开始 ， 然 后 循序 移动 ， 第 一 个 节点 是 Gocument ， 最 后 一 
。 到 达 文 档 末 尾 最 后 那个 文本 节点 后 ， 遍 历 会 在 DOM 树 中 反 向 回 湖 。 此 时 ， 
点 就 是 包含 "worldl" 的 文本 节点 ,而 最 后 一 个 是 document 节点 本 身 ,NodeItera 


文本 贡 点 





都 以 这 文 种 方式 进行 遍历 。 
16.3.1 


NodeIterator 类 


法 创建 其 








D whatToShow, 












































NodeIterator 


型 是 两 个 类 型 
实例 。 这 个 方法 接收 以 下 4 个 参数 。 

口 root ， 作 为 遍历 根 节 点 的 节点 。 

数值 代码 ， 表 示 应 该 访问 哪些 节 



































个 节点 是 包含 " worlqd! "的 


第 一 个 访问 的 节 
tor 和 TreeWalker 


和 








1 比较 简单 的 ， 可 以 通过 document .createNodeIterator() 方 





















































































































































口 filter，NodeFilter 对 象 或 函数 ， 表 示 是 否 a re 



















































































口 entityReferenceExpansion, 布尔 值 , 表示 是 否 扩展 实体 引用 。 这 个 参数 在 HTML 文档 中 没 
有 效果 ， 因 为 实体 引用 永远 不 扩展 。 

whatToShow 参数 是 一 个 位 掩 码 ， 通 过 应 用 一 个 或 多 个 过 滤器 来 指定 访问 哪些 节点 。 这 个 参数 对 应 
的 常量 是 在 NodeFilter 类 型 中 定义 的 。 

口 NodeFilter.SHOW_ALL， 所 有 节点 。 

口 NodeFilter .SHOW_ELEMENT， 元 素 节 点 。 

口 NodeFilter.SHOW_ATTRIBUTE， 属 性 节点 。 由 于 DOM 的 结构 ， 因 此 实际 上 用 不 上 。 

口 NodeFilter .SHOW_TEXT， 文 本 节点 。 

口 NodeFilter.SHOW_CDATA_SECTION，CData 区 块 节点 。 不 是 在 HTML 页 面 中 使 用 的 。 

口 NogdeFilter.SHOW_ENTITY_REFERENCE， 实 体 引 用 节点 。 不 是 在 HTML 页 面 中 使 用 的 。 

口 NodeFilter .SHOW_ENTITY， 实 体 节点 。 不 是 在 HTML 页 面 中 使 用 的 。 

口 NodeFilter .SHOW_PROCESSING_INSTRUCTION, 人 处理 指令 节点 ,不 是 在 HTML 页 面 中 使 用 的 。 

口 NodeFilter .SHOW_COMMENT， 注 释 节 点 。 

口 NodeFilter.SHOW_DOCUMENT， 文 档 节点 。 

口 NodeFilter .SHOW_DOCUMENT_TYPE， 文 档 类 型 节点 。 

口 NodeFilter.SHOW_DOCUMENT_FRAGMENT， 文 档 片 段 节点 。 不 是 在 HTML 页 面 中 使 用 的 。 

口 NodqeFilter.SHOW_NOTATION， 记 号 节点 。 不 是 在 HTML 页 面 中 使 用 的 。 

这 些 值 除了 NoaeFilter.SHOW_ALL 之 外 ， 都 可 以 组 合 使 用 。 比 如 ， 可 以 像 下 面 这 样 使 用 按 位 或 
操作 组 合 多 个 选项 : 





let whatToShow = NodeFilter.SHOW_ ELEMENT | NodeFilter.SHOW_ TEXT; 


Re NodeFilter 对 象 ， 或 者 一 个 


CreateNodqeILerator ( 
作为 节点 过 滤器 的 函数 。NodeFilter 对 象 只 
ER_ACC 
上 建 它 


回 NodeFilter .FILTI 
抽象 类 型 ， 所 以 不 可 能 


createNodeIlterator!( 














let filter = { 


) 方 法 的 filter 参数 可 以 用 来 
4 有 一 个 方法 acceptNode ( 
回 NodeFilter .FILTE 





EPT， 和 否则 返 

















， 如 果 给 定 
ER_SKIP。 因 为 NodeFilter 是 一 个 


的 实例 。 只 要 创建 一 个 包含 acceptNode() 的 对 象 ， 然 后 把 它 传 给 


月 .A 


节点 应 该 访问 就 返 








(0) 就 可 以 了 。 以 下 代码 定义 了 只 接收 <p> 元 素 的 节点 过 滤器 对 象 : 


acceptNode (node) 


return node.tagName.toLowerCase!() 


{ 


"pr" 


有 
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NodeFilter.FILTER_ACCEPT : 
NodeFilter.FILTER_SKIP; 
} 
于 


let iterator = document.createNodeIterator(root, NodeFilter.SHOW_ ELEMENT, 
filter, false); 


filter 参数 还 可 以 是 一 个 函数 ， 与 acceptNode() 的 形式 一 样 ， 如 下 面 的 例子 所 示 : 


let filter = function(node) { 
return node.tagName.toLowerCase() == "p" ? 
NodeFilter.FILTER ACCEPT : 
NodeFilter.FILTER SKIP; 


























}; 


let iterator = document.createNodeIterator(root, NodeFilter.SHOW_ ELEMENT, 
filter, false); 


通常 , JavaScript 会 使 用 这 种 形式 , 因为 更 简单 也 更 像 普 通 JavaScript 代码 。 如 果 不 需 要 指定 过 滤器 ， 
则 可 以 给 这 个 参数 传人 null。 
要 创建 一 个 简单 的 遍历 所 有 节点 的 NodeIterator， 可 以 使 用 以 下 代码 : 


let iterator = document.createNodeIterator (document, NodeFilter.SHOW_ALL, 
null, false); 












































NodeIterator 的 两 个 主要 方法 是 nextNode () 和 previousNode()。nextNode() 方 法 在 DOM 
子 树 中 以 深度 优先 方式 进 前 一 步 ， 而 previousNode () 则 是 在 遍历 中 后 退 一 步 。 创 建 NodeIterator 
对 象 的 时 候 , 会 有 一 个 内 部 指针 指向 根 节点 ， 因 此 第 一 次 调用 nextNoge () 返 回 的 是 根 节 点 。 当 遍历 到 
达 DOM 树 最 后 一 个 节点 时 ，nextNode () 返回 null。previousNode() 方 法 也 是 类 似 的 。 当 遍历 到 达 
DOM 树 最 后 一 个 节点 时 ， 调 用 previousNoaqe () 返 回 遍历 的 根 节 点 后 ， 再 次 调用 也 会 返回 nu11。 

以 下 面 的 HTML 片段 为 例 : 


<div idq="QiVv1"> 
<p><b>Hello</b> world!</p> 
<ul> 
<li>List item 1</1i> 
<li>List item 2</1i> 
<li>List item 3</1i> 
</ul> 
</div> 


假设 想 要 遍历 <aiv> 元 素 内 部 的 所 有 元 素 ， 那么 可 以 使 用 如 下 代码 : 


let div = document .getElementById("divl1l"); 
let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ ELEMENT, 
null, false); 

































































let node = iterator.nextNode(); 

while (node !== null) { 
console.log (node.tagName); 
node = iterator.nextNode(); 


} 


这 个 例子 中 第 一 次 调用 nextNode () 返 回 <div> 元 素 。 因 为 nextNode () 在 遍历 到 达 DOM 子 树 末 
尾 时 返回 nul1， 所 以 这 里 通过 while 循环 检测 每 次 调用 nextNode () 的 返回 值 是 不 是 nul1。 以 上 代 


// 输出 标签 名 
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码 执 f 


了 后 会 输出 以 下 标签 名 : 


DIV 
攻 
B 
UL 
五 下 
LI 
LI 


如 果 只 想 遍 历 <11> 元 素 ， 可 以 传人 一 个 过 滤器 ， 比 如 : 


let div = document .getElementById("Qqiv1") ; 
let filter = function(node) { 
return node.tagName.toLowerCase() == "li" ? 
NodeFilter.FILTER ACCEPT : 
NodeFilter.FILTER SKIP; 





}; 


let iterator = document .createNodeIterator(div, NodeFilter.SHOW ELEMENT, 
filter, false); 


let node = iterator.nextNode(); 

while (node !== null) { 
console.1log (node.tagName); // 输出 标签 名 
node = iterator.nextNode(); 


} 


在 这 个 例子 中 ,遍历 只 会 输出 <1i> 元 素 的 标签 。 
nextNode () 和 previousNode() 方 法 共同 维护 NodeIterator 对 DOM 结构 的 内 部 指针 ， 





改 DOM 结构 也 会 体现 在 遍历 中 。 


16.3.2 TreeWalker 


Treewalker 还 添加 了 如 下 在 DOM 结构 中 向 不 同方 向 万 的 方法 。 





TreeWalker 是 NodeIterator 的 高 级 版 ,除了 包含 同样 的 nextNode () previousNodel 














口 barentNodqe() ， 遍 历 到 当前 节点 的 父 节 点 。 

D firstchild()， 遍历 到 当前 节点 的 第 一 个 子 节点 

口 Ce 遍历 到 当前 节 点 的 最 后 一 个 子 节点 

口 nextSibling() ， 遍历 到 当前 节点 的 下 一 个 同胞 节点 RS 

口 previousSibling()， 遍历 到 当前 节点 的 上 一 个 同胞 节点 。 




















document .createNodeIterator () 同 样 的 参数 : 作为 遍历 起 点 的 根 节点 、 要 查看 的 节点 类 型 、 
过 滤器 和 一 个 表示 是 和 否 扩展 实体 引用 的 布尔 值 。 因 为 两 者 很 类 似 ， 所 以 Treewalker 通常 可 


Nod 








eIterator， 比 如 : 


let div = document .getElementById("div1l"); 
let filter = function(node) { 
return node.tagName.toLowerCase() == "11" ? 
NodeFilter.FILTER_ ACCEPT : 
NodeFilter.FILTER_SKIP; 
js 





因此 修 





) 方 法 ， 


TreeWalker 对 象 要 调用 document.createTreeWalker() 方 法 来 创建 ， 这 个 方法 接收 与 


节点 
节点 


以 取代 
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let walker = document .createTreeWalker (div, NodeFilter.SHOW ELEMENT, 


filter, false); 


let node = iterator.nextNode(); 


while (node !== null) { 
console.1log (node.tagName) // 输出 标签 名 





node = iterator.nextNode(); 


} 














不 同 的 是 , 节点 过 滤器 ( filter ) 除了 可 以 返回 NodeFilter.FILTER_ACCEPT 和 NodeFilter. 


山 


山 


役 昌 加 上 


该 











TER_SKIP, 还 可 以 返回 NodeFilter .FILTER_REJECT。 在 使 用 NodeIterator 时 , NodeFilter. 
TER_SKIP 和 NodeFilter .FILTER_REJECT 是 一 样 的 。 但 在 使 用 Treewalker 时 , NodeFilter. 
TER_SKIP 表示 跳 过 节点 ,访问 子 树 中 的 下 一 个 节点 ， 而 NodeFilter.FILTER_REJECT 则 表示 跳 


山上 1 















































节点 以 及 该 节点 的 整个 子 树 。 例 如 ， 如 果 把 前 面 示例 中 的 过 滤器 函数 改 为 返回 NodeFilter. 




















TER_REJECT ( 而 不 是 NodeFilter.FILTER_SKIP )， 则 会 导致 遍历 立即 返回 ,不 会 访问 任何 节点 。 





mH 
鼎 | 


山 





a 
全 


洲 



































因为 第 一 个 返回 的 元 素 是 <div>, 其 中 标签 名 不 是 "1i" ,因此 过 滤 函 数 返 回 NodeFilter .FILTER_ 























四 








EJECT， 表 示 要 跳 过 整个 子 树 。 因 为 <aiv> 本 身 就 是 遍历 的 根 节点 ， 所 以 遍历 会 就 此 结束 。 











当然 ，Treewalket 真正 的 威力 是 可 以 在 DOM 结构 中 四 处 游 走 。 如 果 不 使 用 过 滤器 ， 单 纯 使 用 


TreeWalker 的 漫游 能 力 同样 可 以 在 DOM 树 中 访问 <11> 元 素 ， 比 如 : 


let div = document .getElementById("dqiv1") ， 
let walker = dqocument .createTreeWalker (div, NodeFilter.SHOW_ELEMENT, null, false); 


walker.firstCchild(); // 前 往 <p> 
walker.nextSibling(); // 前 往 <ul> 


let node = walker.firstchild(); // 前 往 第 一 个 <1i> 
while (node !== null) { 

console.log (node.tagName); 

node = walker.nextSibling(); 


} 
因为 我 们 知道 <1i> 元 素 在 文档 结构 中 的 位 置 ， 所 以 可 以 直接 定位 过 去 。 先 使 用 firstchild() 前 





























往 <p> 元 素 ， 再 通过 nextsipling () 前 往 <ul> 元 素 , 然后 使 用 firstchi1lg() 到 达 第 一 个 <1i> 元 素 。 


Ve 


意 , 此 时 的 Treewalker 只 返回 元 素 (这 是 因为 传 给 createTreeWalker () 的 第 二 个 参数 ), 最 后 就 


ER 























可 以 使 用 nextsipbling () 访 问 每 个 <1i> 元 素 ， 直 到 再 也 没有 元 素 ， 此 时 方法 返回 nul1。 

















TreeWalker 类 型 也 有 一 个 名 为 currentNode 的 属性 ， 表 示 遍 历 过 程 中 上 一 次 返回 的 节点 (无论 


使 用 的 是 哪个 遍历 方法 )。 可 以 通过 修改 这 个 属性 来 影响 接 下 来 侦 历 的 起 点 ， 如 下 面 的 例子 所 示 : 


16 


档 中 选择 内 容 ， 而 不 用 考虑 节点 之 间 的 界限 。( 选择 在 后 台 发 生 ， 用 户 是 看 不 到 的 。) 范 





let node = walker.nextNode(); 
console.log(node === walker.currentNode); // true 
walker.currentNode = document .body; // 修改 起 点 


相 比 于 NodeIterator，TreeWalker 类 型 为 遍历 DOM 提供 了 更 大 的 灵活 性 。 



































.4 ”范围 
为 了 支持 对 页 面 更 细致 的 控制 ，DOM2 Traversal and Range 模块 定义 了 范围 接口 。 范 围 可 用 于 在 文 























mn 
ey 




















在 常规 DOM 




















操作 的 粒度 不 够 时 可 以 发 挥 作用 。 
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16.4.1 DOM 范围 


DOM2 在 Document 类 型 上 定义 了 一 个 createRange () 方 法 ， 暴露 在 document 对 象 上 。 使 用 

个 方法 可 以 创建 一 个 DOM 范围 对 象 ， 如 下 所 示 : 

let range = dqocument .createRange () 
与 节点 类 似 ， 这 个 新 创建 的 范围 对 象 是 与 创建 它 的 文档 关联 的 ,不 能 在 其 他 文档 中 使 用 。 然 后 可 以 

使 用 这 个 范围 在 后 台 选 择 文档 特定 的 部 分 。 创 建 范围 并 指定 它 的 位 置 之 后 , 可 以 对 范围 的 内 容 执行 一 些 

操作 ， 从 而 实现 对 底层 DOM 树 更 精细 的 控制 。 

每 个 范围 都 是 Range 类 型 的 实例 ， 拥 有 相应 的 属性 和 方法 。 下 面 的 属性 提供 了 与 范围 在 文档 中 位 

置 相关 的 信息 。 

口 startcontainer， 范围 起 点 所 在 的 节点 (选区 中 第 一 个 子 节 点 的 父 节 点 )。 

口 startoffset， 范 围 起 点 在 startcontainer 中 的 偏 移 量 。 如 果 startcontainer 是 文本 节 
点 、 注 释 节点 或 CData 区 块 节点 , 则 startoffset 指 范 围 起 点 之 前 跳 过 的 字符 数 ; 否则 ， 表 示 
范围 中 第 一 个 节点 的 索引 。 

口 endcontainer,， 范围 终点 所 在 的 节点 (选区 中 最 后 一 个 子 节点 的 父 节点 )。 

口 endoffset， 范围 起 点 在 startcontainer 中 的 偏 移 量 ( 与 startoffset 中 偏 移 量 的 含义 相同 )。 

口 commonAncestorContainer, 文 档 中 以 startcontainer 和 endcontainer 为 后 代 的 最 深 的 节点 。 

这 些 属性 会 在 范围 被 放 到 文档 中 特定 位 置 时 获得 相应 的 值 。 


16.4.2 简单 选择 


通过 范围 选择 文档 中 某 个 部 分 最 简单 的 方式 , 就 是 使 用 selectNode () 或 selectNodeContents() 
方法 。 这 两 个 方法 都 接收 一 个 节点 作为 参数 ， 并 将 该 节点 的 信息 添加 到 调用 它 的 范围 。selectNode() 方 
法 选择 整个 节点 , 包括 其 后 代 节 点 , 而 selectNodeContents () 只 选择 节点 的 后 代 。 假设 有 如 下 HTML: 


<!DOCTYPE html> 

<html> 

<body> 

<p id="pl"><b>Hello</b> world!</p> 
</body> 

</html> 


以 下 JavaScript 代码 可 以 访问 并 创建 相应 的 范围 : 


let rangel = document .createRange () ， 
range2 = document .createRange () ， 
pl = document .getElementById("pl"); 
rangel.selectNode (pl1); 
range2.selectNodeContents (pl1); 


例子 中 的 这 两 个 范围 包含 文档 的 不 同 部 分 。rangel 包含 <p> 元 素 及 其 所 有 后 代 ， 而 range2 包含 
<p> 元 素 、 文 本 节点 "Hello" 和 文本 节点 " world!"， 如 图 16-7 所 示 。 
泥 围 | 


[ 1 
<p id="pl"><b>Hello</b> world!</p> 
| 
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沁 围 2 
图 16-7 
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调用 selectNode() 时 ，startContainer、endContainer 和 commonAncestorContainer 都 
等 于 传人 节点 的 父 节 点 。 在 这 个 例子 中 , 这 几 个 属性 都 等 于 document .body。 startOffset 属性 等 于 
传 入 节点 在 其 父 节点 chilgNodes 集合 中 的 索引 ( 在 这 个 例子 中 ，startoffset 等 于 1， 因为 DOM 
的 合 规 实现 把 空格 当成 文本 节点 )， 而 endoffset 等 于 startoffset 加 1 (因为 只 选择 了 一 个 节点 )。 














在 调用 selectNodqecontents () 时 ， 























startContainer、 endContainer 和 commonAncestor 











container 属性 就 是 传人 的 节点 ， 在 这 个 例子 中 是 <p> 元 素 。startoffset 属性 始终 为 0， 因 为 范围 
从 传人 节点 的 第 一 个 子 节点 开始 ， 而 engdoffset 等 于 传人 节点 的 子 节点 数量 ( node.chila 








Nodes .length )， 在 这 个 例子 中 等 于 Ds 





























在 像 上 面 这 样 选 定 节 点 或 节点 后 代 之 后 , 还 可 以 在 范围 上 调用 相应 的 方法 ,实现 对 范围 中 选区 的 更 


精细 控制 。 


口 setStartBefore (refNode)， 把 范围 的 起 点 设置 到 refNode 之 前 ， 从 而 让 refNode 成 为 选 
区 的 第 一 个 子 节 点 。 startcontainer 属性 被 设置 为 refNode.parentNode, 而 startOffset 











属性 被 设置 为 refNoge 在 其 父 节 点 
口 setSstartAfter(refvode)， 把 范 


























chilgdNodes 集合 中 的 索引 
围 的 起 点 设置 到 refNoge 之 后 ， 从 而 将 refwode 排除 在 选 

















区 之 外 ， 让 其 下 一 个 同胞 节点 成 为 选区 的 第 一 个 子 节点 。startcontainer 属性 被 设置 为 




















refNode.parentNode，startOffset 属性 被 设置 为 refNode 在 其 父 节点 chilgNodes 集合 





中 的 索引 加 1。 











口 setEndqBefore(refvodae), 把 范围 的 终点 设置 到 refNode 之 前 , 从 而 将 refNode 排除 在 选区 


之 外 、 让 其 上 一 个 同胞 节点 成 为 选区 





parentNode，endoffset 属性 被 设置 为 refNode 在 其 父 节 点 childNodes 集合 中 的 索引 。 

















的 最 后 一 个 子 节 点 endqcontainet 属性 被 设置 为 refNode. 














口 setEndqAfter (refVode)， 把 范围 的 终点 设置 到 refNode 之 后 ， 从 而 让 refNode 成 为 选区 的 





最 后 一 个 子 节 点 。endContainer 


属性 被 设置 为 refNode .parentNode，endoffset 属 
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设置 为 refVodae 在 其 父 节 点 chilg 











Nodes 集合 中 的 索引 加 1。 








调用 这 些 方法 时 ,所 有 属性 都 会 自动 重新 赋值 。 不 过 ,为 了 实现 复杂 的 选区 ， 也 可 以 直接 修改 这 些 


属性 的 值 。 
16.4.3 ”复杂 选择 




















J! 








要 创建 复杂 的 范围 , 需要 使 用 setstart () 和 setEnd() 方 法 。 这 两 个 方法 都 接收 两 个 参数 : 参照 节点 
和 偏 移 量 。 对 set start () 来 说 ， 参 照 节点 会 成 为 startcontainer， 而 偏 移 量 会 赋值 给 startoffset。 
对 setEng() 而 言 ， 参照 节点 会 成 为 endcontainer， 而 偏 移 量 会 赋值 给 sndqoffset。 

















使 用 这 两 个 方法 ， 可 以 模拟 selectNo 





























de () 和 selectNodeContents() 的 行为 。 比 如 : 











let rangel document .createRange 
range2 = document .createRange 


pl = document .getElementById( 
plIndex = -1, 

i 

len; 


for (i = 0, len = pl.parentNode.c 
if (pl.parentNode.childNodes[i] 
plIndex = i; 
break; 
} 
} 


(), 
(), 
Td 


hildNodes.length; i < len; i++) { 
=== pl1) { 
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rangel.setStart (pl.parentNode, plIindex); 
rangel.setEnd(pl.parentNode, plIndex + 1)， 
range2.setSstart (pl1l, 0); 

range2.setEnd(pl, pl.childNodes.length); 


注意 ， 要 选择 节点 (使 用 rangel )， 必 须 先 确定 给 定 节 点 (pl ) 在 其 父 节点 chilgNodes 集合 中 
的 索引 。 而 要 选择 节点 的 内 容 (使 用 range2 )， 则 不 需要 这 样 计算 ,因为 可 以 直接 给 setstart () 和 
setEnd() 传 默认 值 。 虽然 可 以 模拟 selectNode() 和 selectNodeContents(), 但 setstart() 和 
setEnd() 真正 的 威力 还 是 选择 节点 中 的 某 个 部 分 。 

假设 我 们 想 通过 范围 从 前 面 示例 中 选择 从 "Hello" 中 的 "11o" 到 " world!" 中 的 "o" 的 部 分 。 很 简 
单 ， 第 一 步 是 取得 所 有 相关 节点 的 引用 ， 如 下 面 的 代码 所 示 : 


let pl = document .getElementById("pl1" 
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helloNode = pl.firstChild.firstCchilg, 
worldNode = pl.lastChild 


文本 "Hello" 其 实 是 <p> 的 孙子 节点 ， 因 为 它 是 <b> 的 子 节 点 。 为 此 可 以 使 用 p1.firstchild 取 
得 <b>, 而 使 用 p1.firstchild.firstchild 取 得 "Hello" 这 个 文本 节点 。 文 本 节点 " world!" 是 <p> 
的 第 二 个 〈 也 是 最 后 一 个 ) 子 节点 ， 因 此 可 以 使 用 pl1.1astchilda 来 取得 它 。 然 后 ， 再 创建 范围 ， 指 
定 其 边界 ， 如 下 所 示 : 


let range = dqocument .createRange () 
range.SetStatrt (helloNode, 2); 
range.setEnd (worldNode, 3); 


姑 为 选区 起 点 在 "Hello" 中 的 字母 "e" 之 后 ， 所 以 要 给 setstart () 传 人 helloNode 和 偏 移 量 2 

"e" 后 面 的 位 置 ，"H" 的 位 置 是 0 )。 要 设置 选区 终点 ， 则 要 给 setEnd () 传 人 worldNode 和 偏 移 量 3， 
即 不 属于 选区 的 第 一 个 字符 的 位 置 ， 也 就 是 "rx" 的 位 置 3( 位置 0 是 一 个 空格 )。 图 16-8 展示 了 范围 对 
应 的 选区 。 






































































































































范围 


<p id="pl"><b>|Hellllld</b> REDGT </ 6> 
0 1234 


0123456 

















图 16-8 


因为 helloNode 和 worldNogde 是 文本 节点 ， 所 以 它们 会 成 为 范围 的 startcontainer 和 
endContainer, 这 样 startoffset 和 endqoffset 实际 上 表示 每 个 节点 中 文本 字符 的 位 置 , 而 不 是 子 
节点 的 位 置 (传人 元 素 节 点 时 的 情形 )。 而 commonAncestorContainer 是 <p> 元 素 ， 即 包含 这 两 个 节 
点 的 第 一 个 祖先 节点 。 

当然 ， 只 选择 文档 中 的 某 个 部 分 并 不 是 特别 有 用 ， 除 非 可 以 对 选中 部 分 执行 操作 。 


16.4.4 操作 范围 


创建 范围 之 后 ,浏览 器 会 在 内 部 创建 一 个 文档 片段 节点 ， 用 于 包含 范围 选区 中 的 节点 。 为 操作 范围 
的 内 容 ,选区 中 的 内 容 必须 格式 完好 。 在 前 面 的 例子 中 ， 因 为 范围 的 起 点 和 终点 都 在 文本 节点 内 部 ,并 
不 是 完好 的 DOM 结构 ， 所 以 无 法 在 DOM 中 表示 。 不 过 ， 范 围 能 够 确定 缺失 的 开始 和 结束 标签 ， 从 而 
可 以 重 构 出 有 效 的 DOM 结构 ， 以 便 后 续 操 作 。 

仍 以 前 面 例子 中 的 范围 来 说 ， 范 围 发 现 选区 中 缺少 一 个 开始 的 <b> 标 签 ， 于 是 会 在 后 台 动 态 补 上 这 
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个 标签 ， 同 时 还 需要 补 上 封闭 "He " 的 结束 标签 </p> ， 结 果 会 把 DOM 修改 为 这 样 : 


<D><b>He</b><b>11o</b> world!</p> 


而 且 ，"worla1" 文 本 节点 会 被 拆 分 成 两 个 文本 节点 ， 一 个 包含 ，wo"， 另 一 个 包含 "rlq1"。 最 
终 的 DOM 树 ， 以 及 范围 对 应 的 文档 片段 如 图 16-9 所 示 。 16 


Document Range 


Text He 


























| DocumentFragment 


Text 上 1o 
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EE 





Text rld! 





16-9 


这 样 创建 了 范围 之 后 ， 就 可 以 使 用 很 多 方法 来 操作 范围 的 内 容 。( 注意 ， 范 围 对 应 文档 片段 中 的 所 
有 节点 ， 都 是 文档 中 相应 节点 的 指针 。) 
第 一 个 方法 最 容易 理解 和 使 用 ，aeletecontents () 。 顾 名 思 义 ,这 个 方法 会 从 文档 中 删除 范围 包 
含 的 节点 。 下 面 是 一 个 例子 : 


let pl = document .getElementById("pl"), 
helloNode = pl.firstChild.firstChilgd, 
worldNode = pl.lastChilgd, 
range = document.createRange(); 















































range.setSstart (helloNode, 2); 
range.setEnd (worldNode, 3); 


range.deleteContents(); 


执行 上 面 的 代码 之 后 ， 页 面 中 的 HTML 会 变 成 这 样 : 

<p><b>He</b>rld!</p> 

因为 前 面 介 绍 的 范围 选择 过 程 通过 修改 底层 DOM 结构 保证 了 结构 完好 ， 所 以 即使 删除 范围 之 后 ， 
剩 下 的 DOM 结构 照样 是 完好 的 。 

另 一 个 方法 extractContents() 跟 deleteContents( ) 类 似 ， 也 会 从 文档 中 移 除 范围 选区 。 但 不 
同 的 是 ，extractcontents() 方 法 返回 范围 对 应 的 文档 片段 。 这 样 ， 就 可 以 把 范围 选中 的 内 容 插 入 文 
档 中 其 他 地 方 。 来 看 一 个 例子 : 


let pl = document .getElementById("pl"), 
helloNode = pl.firstChild.firstChilgd, 
worldNode = pl.lastChilgd, 
range = document.createRange(); 
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range.setSstart (helloNode, 2); 
range.setEnd (worldNode, 3); 


let fragment = range.extractContents(); 
pl.parentNode.appendChild(fragment); 



































这 个 例子 提取 了 范围 的 文档 片段 ， 然 后 把 它 添加 到 文档 <body> 元 素 的 最 后 。( 别 忘 了 ， 在 把 文档 片 
段 传 给 appenachila() 时 ， 只 会 添加 片段 的 子 树 ， 不 包含 片段 自身 。) 结果 就 会 得 到 如 下 HTML : 


人 到 





回 的 文档 片段 包含 范 上 


<p><b>He</b>rld!</p> 
<b>llo</b> wo 
[P595 代码 三 


如 果 不 想 把 范围 从 文档 中 移 除 ， 也 可 以 使 用 clonecontents() 创 建 一 个 副本 ,然后 把 这 个 副本 扣 
文档 其 他 地 方 。 比 如 : 


let pl = document .getElementById("pl1"), 
helloNode = pl.firstChild.firstChilgd, 
worldNode = pl.lastChilgd, 
range = document.createRange(); 








En 
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range.setSstart (helloNode, 2); 
range.setEnd (worldNode, 3); 


let fragment = range.cloneContents(); 
pl.parentNode.appendChild(fragment); 


这 个 方法 跟 extractcontents() 很 相似 ， 因 为 它们 都 返回 文档 片段 。 主 要 区 别 是 clonecontents () 
节点 的 副本 , 而 非 实 际 的 节点 。 执行 上 面 操作 之 后 , HTML 页 面 会 变 成 这 样 : 


<p><b>Hello</b> world!</p> 
<b>llo</b> wo 


此 时 关键 是 要 知道 , 为 保持 结构 完好 而 拆 分 节点 的 操作 , 只 有 在 调用 前 述 方法 时 才 会 发 生 。 在 DOM 
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被 修改 之 前 ， 原 始 HTML 会 一 直 保 持 不 变 
16.4.5 ”范围 插入 



































上 一 节 介 绍 了 移 除 和 复制 范围 的 内 容 , 本 节 来 看 一 看 怎么 向 范围 中 搬 和 人 内容。 使 用 insertNode () 



























































方法 可 以 在 范围 选区 的 开始 位 置 插入 一 个 节点 。 例 如 , 假设 我 们 想 在 前 面 例子 中 的 HTML 中 插入 如 下 HTML: 


<span style="color: red">Inserted text</span> 


可 以 使 用 下 列 代码 : 

let pl = document .getElementById("pl1"), 
helloNode = pl.firstChild.firstCchilg, 
worldNode = pl.lastChilg, 
range = document.createRange(); 





range.setSstart (helloNode, 2); 
range.setEnd (worldNode, 3); 


let span = document .createElement ("span"); 

span.style.color = "red"; 

span.appendChild(document .createTextNode("Inserted text")); 
range.insertNode (span); 
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运行 上 面 的 代码 会 得 到 如 下 HTML 代码 : 
<p id="pl"><b>He<span style="color: red">Inserted text</span>llo</b> world</p> 


注意 ，<span> 正 好 插入 到 "Hel1lo" 中 的 "11o" 之 前 , 也 就 是 范围 选区 的 前 面 。 同 时, 也 要 注意 原始 
的 HTML 并 没有 添加 或 删除 <b> 元 素 ， 因 为 这 里 并 没有 使 用 之 前 提 到 的 方法 。 使 用 这 个 技术 可 以 插入 有 
用 的 信息 ， 比 如 在 外 部 链接 旁边 插入 一 个 小 图 标 。 

除了 向 范围 中 插入 内 容 ， 还 可 以 使 用 surroundcontents() 方 法 插入 包含 范围 的 内 容 。 这 个 方法 
接收 一 个 参数 ， 即 包含 范围 内 容 的 节点 。 调 用 这 个 方法 时 ， 后 台 会 执行 如 下 操作 : 

(1) 提取 出 范围 的 内 容 ; 

(2) 在 原始 文档 中 范围 之 前 所 在 的 位 置 插入 给 定 的 节点 ; 

(3) 将 范围 对 应 文档 片段 的 内 容 添加 到 给 定 节 点 。 

这 种 功能 适合 在 网 页 中 高 亮 显 示 某 些 关键 词 ， 比 如 : 

let pl = document .getElementById("pl"), 

helloNode = pl.firstChild.firstChilgd, 


worldNode = pl.lastChilgd, 
range = document .createRange(); 































































































range.selectNode (helloNode); 

let span = document .createElement ("span"); 
span.style.backgroundColor = "yellow"; 

range.surroundContents (span); 

执行 以 上 代码 会 以 黄色 背景 高 亮 显示 范围 选择 的 文本 。 得 到 的 HTML 如 下 所 示 : 


<p><b><span style="background-color:yellow">Hello</span></b> world!</p> 


为 了 搬入 <span> 元 素 ， 范 围 中 必须 包含 完整 的 DOM 结构 。 如 果 范 围 中 包含 部 分 选择 的 非 文 节点 ， 
这 个 操作 会 失败 并 报错 。 另 外 , 如 果 给 定 的 节点 是 Document 、DocumentType 或 DocumentFragment 
类 型 ， 也 会 导致 抛 出 错误 。 



































16.4.6 ”范围 折 葡 














如 果 范 围 并 没有 选择 文档 的 任何 部 分 ， 则 称 为 折 赤 (collapsed )。 折 著 范 围 有 点 类 似 文本 框 : 如 果 
文本 框 中 有 文本 ,那么 可 以 用 鼠标 选中 以 高 亮 显示 全 部 文本 。 这 时 候 ， 如 果 再 单 击 鼠 标 ， 则 选区 会 被 移 
除 ， 光 标 会 落 在 某 两 个 字符 中 间 。 而 在 折 炙 范围 时 ,位 置 会 被 设置 为 范围 与 文档 交界 的 地 方 ， 可 能 是 范 
围 选区 的 开始 处 ， 也 可 能 是 结尾 处 。 图 16-10 展示 了 范围 折 受 时 会 发 生 什么 。 


<p id="pl"><b>Hell Lo</b> "中 :ac 


原始 范围 

































































<p hs world!</p> 


折 秋 到 起 点 


<Db id="pl"><b>Hello</b> a </p> 
折 又 到 终点 


图 16-10 
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true 表示 折 闭 到 起 点 ，false 表示 折 著 到 终点 。 要 确定 范围 是 否 已 经 被 折 闭 ,可 以 检测 范 目 











折 半 范围 可 以 使 用 collapse () 方 法 ， a 布尔 值 ， 表 示 折 又 到 范围 哪 一 端 。 
的 collapsed 


























ey 























range.collapse (true); // 折 司 到 起 点 
console.log(range.collapsed); // 输出 true 


测试 范围 是 否 被 折 难 ， 能 够 帮助 确定 范围 中 的 两 个 节点 是 否 相 邻 。 例 如 有 以 下 HTML 代码 : 


<p id="pl">Paragraph 1</p><p 
id="p2">Paragraph 2</p> 


如 果 事 先 并 不 知道 标记 的 结构 ( 比如 自动 生成 的 标记 )， 则 可 以 像 下 面 这 样 创建 一 个 范围 : 


let pl = document .getElementById("pl1"), 
p2 = document .getElementById("p2"),， 
range = document.createRange(); 
range.setSstartAfter (pl1); 
range.setSstartBefore(p2); 
console.log(range.collapsed); // true 


在 这 种 情况 下 ,创建 的 范围 是 折 炙 的， 因为 pl 后 面 和 pp2 前 面 没 有 任何 内 容 。 
































16.4.7 ”范围 比较 


界 ( 








如 果 有 多 个 范围 ， 则 可 以 使 用 compareBoundqaryPoints () 方 法 确定 范围 之 间 是 否 存在 公所 < 
起 点 或 终点 )。 这 个 方法 接收 两 个 参数 : 要 比较 的 范围 和 一 个 常量 值 ， 表 示 比 较 的 方式 。 这 个 常 上 





路基 














上 四 [ 
pal 








参数 包括 : 


在 两 
看 下 


口 Range.START_TO_START (0 )， 比 较 两 个 范围 的 起 点 ; 

口 Range .START_TO_END (1)， 比 较 第 一 个 范围 的 起 点 和 第 二 个 范围 的 终点 ; 
口 Range .END_TO_END (2 )， 比 较 两 个 范围 的 终点 ; 
口 Range.END_TO_START (3 )， 比 较 第 一 个 范围 的 终点 和 第 二 个 范围 的 起 点 。 
compareBoundaryPoints() 方 法 在 第 一 个 范围 的 边界 点 位 于 第 二 个 范围 的 边界 点 之 前 时 返回 -1， 
个 范围 的 边界 点 相等 时 返回 0， 在 第 一 个 范围 的 边界 点 位 于 第 二 个 范围 的 边界 点 之 后 时 返回 1。 来 
面 的 例子 : 


Jet rangel = document .createRange(); 
let range2 = document.createRange(); 
let pl = document .getElementById("pl1l"); 



























































uy 











rangel.selectNodeContents (pl1); 
range2.selectNodeContents (pl1); 
range2.setEndBefore(pl.lastChild); 


console.log(rangel .compareBoundaryPoints (Range.START_TO_START, range2)); // 0 
console.log(rangel .compareBoundaryPoints (Range.END_TO_END, range2)); NA 


在 这 段 代码 中 , 两 个 范围 的 起 点 是 相等 的 ,因为 它们 都 是 selectNodecontents () 默 认 返 回 的 值 。 

















J! 











因此 ， 比 较 二 者 起 点 的 方法 返回 0。 不 过 ， 0 range2 的 终 点 被 使 用 setEngdBefore() 修 改 了 ， 所 以 
导致 rangel 的 终点 位 于 range2 的 终点 之 后 ( 见 图 16-11 )， 结 果 这 个 方法 返回 了 1。 
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沁 围 1 
[ ] 
<P id="pl"*><b>Hello</b> worldi</p> 
LL | 
































16.4.8 复制 范围 
调用 范围 的 cloneRange () 方 法 可 以 复制 范围 。 这 个 方法 会 创建 调用 它 的 范围 的 如 


let newRange = range.cloneRange();} 


新 范围 包含 与 原始 范围 一 样 的 属性 ， 修 改 其 边界 点 不 会 影响 原始 范围 。 
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本 : 
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16.4.9 ”清理 


在 使 用 完 范围 之 后 , 最 好 调用 detach () 方 法 把 范围 从 创建 它 的 文档 中 剥离 。 调 用 aetach () 之 后 ， 
就 可 以 放心 解除 对 范围 的 引用 ， 以 便 垃圾 回收 程序 释放 它 所 占用 的 内 存 。 下 面 是 一 个 例子 : 



















































































range.detach(); // 从 文档 中 剥离 范围 

range = null; // 解除 引用 

这 两 步 是 最 合理 的 结束 使 用 范围 的 方式 。 剥 离 之 后 的 范围 就 不 能 再 使 用 了 。 
16.5 小结 











DOM2 规范 定义 了 一 些 模 块 ， 用 来 丰富 DOMI1 的 功能 。DOM2 Core 在 一 些 类 型 上 增加 了 与 XML 
命名 空间 有 关 的 新 方法 。 这 些 变 化 只 有 在 使 用 XML 或 XHTML 文档 时 才 会 用 到 , 在 HTML 文档 中 则 没 
有 用 处 。DOM2 增加 的 与 XML 命名 空间 无 关 的 方法 涉及 以 编程 方式 创建 Document 和 DocumentType 
类 型 的 新 实例 。 

DOM2 Style 模块 定义 了 如 何 操作 元 素 的 样式 信息 。 

口 每 个 元 素 都 有 一 个 关联 的 style 对 象 ， 可 用 于 确定 和 修改 元 素 特定 的 样式 。 

口 要 确定 元 素 的 计算 样式 ,包括 应 用 到 元 素 身 上 的 所 有 CSS 规则 ,可 以 使 用 getcomputedstyle() 
方法 。 

口 通过 document .styleSheets 集合 可 以 访问 文档 上 所 有 的 样式 表 。 
DOM2 Traversal and Range 模块 定义 了 与 DOM 结构 交互 的 不 同方 式 。 

口 NodeIterator 和 TreeWalker 可 以 对 DOM 树 执行 深度 优先 的 遍历 。 

口 NodeIterator 接口 很 简单 ， 每 次 只 能 向 前 和 向 后 移动 一 步 。Treewalkezr 除了 支持 同样 的 行 
为 ， 还 支持 在 DOM 结构 的 所 有 方向 移动 ， 包 括 父 节 点 、 同 胞 节点 和 子 节点 。 

口 范围 是 选择 DOM 结构 中 特定 部 分 并 进行 操作 的 一 种 方式 。 

口 通过 范围 的 选区 可 以 在 保持 文档 结构 完好 的 同时 从 文档 中 移 除 内 容 , 也 可 复制 文档 中 相应 的 部 分 。 











































































































第 4 
事 件 


本 章 内 容 
口 理解 事件 流 
口 使 





























用 事件 处 理 程序 











口 了 


JavaScript 与 HTML 的 交互 是 通过 事件 实现 的 ， 








可 以 使 用 仅 在 
“观察 者 模式 ”， 
分 离 9 





























~ 











事件 最 早 是 在 IE3 和 Netscape Navigator 2 


不 同类 型 的 事件 


能 够 做 到 页 本 














事件 代表 文档 或 浏览 器 和 窗 
事件 发 生 时 执行 的 监听 器 ( 也 叫 处 理 程序 ) 订阅 事 




















行为 (在 




















出 现 的 ,当时 的 








视 绩 讲解 


口中 某 个 有 意义 的 时 刻 。 
在 传统 软件 工程 领域 ， 这 个 模型 叫 








件 。 





JavaScript 中 定义 ) 与 页 面 展 示 (在 HIML 和 CSS 中 定义 ) 的 








用 意 是 把 某 些 表单 处 理工 作 从 服务 器 转 

















移 到 浏览 器 上 来 。 到 了 IE4 和 Netscape Navigator 3 发 布 的 时 候 ， 这 两 家 浏览 器 都 提供 了 类 似 但 又 不 同 的 





API， 而 且 持 续 了 好 几 代 。 














DOM2 开始 


尝试 以 符合 逻辑 的 方式 来 标准 化 DOM 事件 API。 








目前 所 有 现代 





浏览 需 都 实现 了 DOM2 Events 的 核心 部 分 。IE8 是 最 后 一 个 使 用 专 有 事件 系统 的 主流 浏览 需 。 


浏览 需 的 事件 系统 非常 复杂 。 即 使 所 有 主流 浏览 器 都 实现 了 DOM2 Events， 








事件 类 型 。BOM 也 支持 习 


混淆 (HTML5 已 经 致力 于 明 条 





事件 ， 





























根据 具体 的 需求 不 同 , 使 


是 最 重要 的 。 


事件 流 





在 第 四 代 Web 浏览 器 (IE4 和 Netscape Communicator 4 ) 开始 开发 时 ， 开 









































的 问题 : 页 面 明 


个 部 分 

















个 页 面 。 





上 有 特定 的 事件 呢 ? 要 至 
到 圆心 上 ， 则 手指 不 仅 是 在 一 个 圆圈 里 ， 而 且 
方式 看 待 浏览 器 事件 的 。 当 你 点 击 一 个 按钮 时 ， 实 际 上 不 光 点 击 了 这 个 按钮 ， 











事件 流 描述 了 页 面 接收 事件 的 顺序 。 





反 的 事件 流 方案 。 


事件 冒 泡 





17.1.1 





IE 事件 流 被 称 为 事件 冒 泡 ,这 是 因为 事件 被 定义 为 从 最 具体 的 元 素 (文档 树 中 最 深 








IE 将 支持 事件 冒 泡 流 ， 








发 ， 然 后 向 上 传播 至 没有 











那么 








这 些 关 系 )。 而 DOM3 3 


这 些 事 件 与 DOM 事件 之 间 的 关系 由 于 长 期 以 来 缺乏 文档 ， 


规范 也 没有 涵盖 所 有 的 
经 常 容易 被 




















结果 非常 有 意思 ， 


新 增 的 事件 API 又 让 这 些 问 题 进 一 
事件 可 能 会 相对 简单 ， 也 可 能 会 非常 复杂 。 但 无 论 女 


LE 解 这 个 问题 ， 可 以 在 一 张 纸 上 面 几 个 同心 加 。 把 
是 在 所 有 的 圆圈 里 。 两 家 浏览 器 的 开发 闭 队 都 是 以 同样 的 


IE 和 Netscape 开 


步 复杂 s 化 了 。 
[ 何 ， 理解 其 中 的 核心 概 


























发 团队 碰 到 了 一 个 有 意思 


手指 放 






































还 点 击 了 它 的 容 需 以 及 整 


发 团队 提出 了 几乎 完全 相 











而 Netscape Communicator 将 支持 事件 捕获 流 。 


的 节点 ) 开始 触 


lL 体 的 元 素 (文档 )。 比 如 有 如 下 HTML 页 面 : 
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<!DOCTYPE html> 
<html> 
<head> 
<title>Event Bubbling Example</title> 
</head> 
<body> 
<div id="myDiv">Click Me</div> 
</body> 
</html> 


在 点 击 页 面 中 的 <aiv> 元 素 后 ，click 事件 会 以 如 下 顺序 发 生 : 

(1) <div> 

(2) <body> 

(3) <html> 

(4) document 

也 就 是 说 ，<giv> 元 素 ， 即 被 点 击 的 元 素 , 最 先 触 发 click 事件 。 然后，click 事件 沿 DOM 树 一 
路 向 上 ， 在 经 过 的 每 个 节点 上 依次 触发 ， 直 至 到 达 document 对 象 。 图 17-1 形象 地 展示 了 这 个 过 程 。 


ON 
ON 
J 



































所 有 现代 浏览 器 都 支持 事件 冒 泡 , 只 是 在 实现 方式 上 会 有 一 些 变化 -IE5.5 及 早期 版 本 会 跳 过 <htm] > 
元 素 ( 从 <body> 直 接 到 aocument )。 现 代 浏览 器 中 的 事件 会 一 直 冒 泡 到 window 对 象 。 


17.1.2 事件 捕获 


Netscape Communicator 团队 提出 了 另 一 种 名 为 事件 捕获 的 事件 流 。 事件 捕获 的 意思 是 最 不 具体 的 节 
点 应 该 最 先 收 到 事件 ， 而 最 具体 的 节点 应 该 最 后 收 到 事件 。 事 件 捕获 实际 上 是 为 了 在 事件 到 达 最 终 目标 
前 拦截 事件 。 如 果 前 面 的 例子 使 用 事件 捕获 ， 则 点 击 <aiv> 元 素 会 以 下 列 顺序 触发 click 事件 : 

(1) document 

(2) <html> 

(3) <body> 

(4) <div> 

在 事件 捕获 中 ，click 事件 首先 由 document 元 素 捕获 ， 然 后 沿 DOM 树 依 次 向 下 传播 ， 直 至 到 达 
实际 的 目标 元 素 <aiv>。 这 个 过 程 如 图 17-2 所 示 。 

虽然 这 是 Netscape Communicator 唯一 的 事件 流 模 型 ， 但 事件 捕获 得 到 了 所 有 现代 浏览 器 的 支持 。 
实际 上 ， 所 有 浏览 器 者 是 从 wingow 对 象 开 始 捕获 事件 ， 而 DOM2 Events 规范 规定 的 是 从 aocument 开始 。 
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由 于 旧版 本 浏览 器 不 支持 ， 因 此 实际 当中 几乎 不 会 使 用 事件 捕获 。 通 常 建议 使 用 事件 冒 泡 ,特殊 情 
况 下 可 以 使 用 事件 捕获 。 














17.1.3 ”DOM 事件 流 


DOM2 Events 规范 规定 事件 流 分 为 3 个 阶段 : 事件 捕获 到达 目标 和 事件 冒 泡 。 事 件 捕获 最 先 发 生 ， 
为 提前 拦截 事件 提供 了 可 能 。 然 后 ， 实 际 的 目标 元 素 接 收 到 事件 。 最 后 一 个 阶段 是 冒 泡 ， 最 迟 要 在 这 个 
阶段 响应 事件 。 仍 以 前 面 那个 简单 的 HTML 为 例 ,点 击 <aiv> 元 素 会 以 如 图 17-3 所 示 的 顺序 触发 事件 。 

































捕获 阶段 





Element div 








在 DOM 事件 流 中 ,实际 的 目标 (<div> 元 素 ) 在 捕获 阶段 不 会 接收 到 事件 。 这 是 因为 捕获 阶段 从 
document 到 <html> 再 到 <body> 就 结束 了 。 下 一 阶段 ， 即 会 在 <aiv> 元 素 上 触发 事件 的 “到 达 目 标 ” 
阶段 ,通常 在 事件 处 理 时 被 认为 是 冒 泡 阶段 的 一 部 分 ( 稍 后 讨论 )。 然 后 ， 冒 泡 阶 段 开 始 ， 事 件 反 向 传 
播 至 文档 。 

大 多 数 支持 DOM 事件 流 的 浏览 器 实现 了 一 个 小 小 的 拓展 。 虽 然 DOM2 Events 规范 明确 捕获 阶段 不 
命中 事件 目标 ,但 现代 浏览 器 都 会 在 捕获 阶段 在 事件 目标 上 触发 事件 。 最 终结 果 是 在 事件 目标 上 有 两 个 
机 会 来 处 理事 件 。 






































注意 ”所 有 现代 浏览 器 都 支持 DOM 事件 流 ， 只 有 IE8 及 更 早 版 本 不 支持 。 
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17.2 事件 处 理 程序 


事件 意味 着 用 户 或 浏览 器 执行 的 某 种 动作 。 比 如 ， 单 击 ( click )、 加 载 (10ad )、 鼠 标 悬 停 
(mouseover )。 为 响应 事件 而 调用 的 函数 被 称 为 事件 处 理 程序 (或 事件 监听 器 )。 事 件 处 理 程序 的 名 字 
以 "on" 开 头 ， 因 此 click 事件 的 处 理 程序 叫 作 onclick， 而 10ad 事件 的 处 理 程序 叫 作 onloadq。 有 
很 多 方式 可 以 指定 事件 处 理 程序 。 


17.2.1 HTML 事件 处 理 程序 


特定 元 素 支 持 的 每 个 事件 都 可 以 使 用 事件 处 理 程序 的 名 字 以 HTML 属性 的 形式 来 指定 。 此 时 属性 
的 值 必须 是 能 够 执行 的 JavaScript 代码 。 例如, 要 在 按钮 被 点 击 时 执行 某 些 JavaScript 代码 , 可 以 使 用 以 
下 HTML 属性 : 

<input type="button" value="Click Me" onclick="console.log('Clicked')"/> 

点 击 这 个 按钮 后 ， 控 制 台 会 输出 一 条 消息 。 这 种 交互 能 力 是 通过 为 onclick 属性 指定 JavaScript 
代码 值 来 实现 的 。 注 意 ， 因 为 属性 的 值 是 JavaScript 代码 ， 所 以 不 能 在 未 经 转 义 的 情况 下 使 用 HTML 语 
法 字符 ， 比 如 和 号 (& )、 双 引号 (" )、 小 于 号 (< ) 和 大 于 号 (> )。 此 时 ,为 了 避免 使 用 HTML 实体 ， 
可 以 使 用 单 引 号 代替 双 引 号 。 如 果 确 实 需要 使 用 双 引 号 ， 则 要 把 代码 改 成 下 面 这 样 : 


<input type="button" Value="Click Me" 
onclick="console.log(&quot;Clicked&quot;)"/> 


在 HTML 中 定义 的 事件 处 理 程序 可 以 包含 精确 的 动作 指令 ， 也 可 以 调用 在 页 面 其 他 地 方 定义 的 脚 
本 ， 比 如 : 


<script> 
function showMessage() { 
console.log("Hello world!"); 
} 
</script> 
<input type="button" value="Click Me" onclick="showMessage()"/> 


在 这 个 例子 中 , 单 击 按钮 会 调用 snowMessage () 函数 snowMessage() 函数 是 在 单独 的 <script> 
元 素 中 定义 的 , 而 且 也 可 以 在 外 部 文件 中 定义 。 作 为 事件 处 理 程序 执行 的 代码 可 以 访问 全 局 作用 域 中 的 
一 切 。 

以 这 种 方式 指定 的 事件 处 理 程序 有 一 些 特殊 的 地 方 。 首 先 , 会 创建 一 个 函数 来 封装 属性 的 值 。 这 个 
函数 有 一 个 特殊 的 局 部 变量 event ， 其 中 保存 的 就 是 event 对 象 ( 本 章 后 面 会 讨论 ): 


<!-- 输出 "click" --> 
<input type="button" value="Click Me" onclick="console.log(event.type)"> 


有 了 这 个 对 象 ， 就 不 用 开发 者 另外 定义 其 他 变量 ， 也 不 用 从 包装 函数 的 参数 列表 中 去 取 了 。 
在 这 个 函数 中 ，this 值 相当 于 事件 的 目标 元 素 ， 如 下 面 的 例子 所 示 : 


<!-- 输出 "Click Me" --> 
<input type="button" value="Click Me" onclick="console.log(this.value)"> 


这 个 动态 创建 的 包装 函数 还 有 一 个 特别 有 意思 的 地 方 ， 就 是 其 作用 域 链 被 扩展 了 。 在 这 个 函数 中 ， 
document 和 元 素 自 身 的 成 员 都 可 以 被 当成 局 部 变量 来 访问 。 这 是 通过 使 用 with 实现 的 : 




























































































































































































494 第 17 章 事 件 





function() { 
with(document) { 
with(this) { 
// 属性 值 
} 
} 
} 














这 意味 着 事件 处 理 程序 可 以 更 方便 地 访问 自己 的 属性 。 下 面 的 代码 与 前 面 的 示例 功能 一 样 : 


<!-- 输出 "Click Me" --> 
<input type="button" value="Click Me" onclick="console.log(value)"> 


如 果 这 个 元 素 是 一 个 表单 输入 框 ， 则 作用 域 链 中 还 会 包含 表单 元 素 , 事件 处 理 程序 对 应 的 函数 等 价 
于 如 下 这 样 : 
function() { 
with(document) { 
with(this.form) { 
with(this) { 
// 属性 值 
} 
} 
} 
} 


本 质 上 , 经 过 这 样 的 扩展 , 事件 处 理 程序 的 代码 就 可 以 不 必 引 用 表单 元 素 ， 而 直接 访问 同一 表单 中 
的 其 他 成 员 了 。 下 面 的 例子 就 展示 了 这 种 成 员 访问 模式 : 
<form method="post"> 
<input type="text" name="username" value=""> 
<input type="button" value="Echo Username" 


onclick="console.log(username.value) "> 
</form> 


点 击 这 个 例子 中 的 按钮 会 显示 出 文本 框 中 包含 的 文本 。 注 意 ， 事件 处 理 程序 中 的 代码 直接 引用 了 
USernarmeo 

在 HTML 中 指定 事件 处 理 程序 有 一 些 问题 。 第 一 个 问题 是 时 机 问题 。 有 可 能 HTML 元 素 已 经 显示 
在 页 面 上 ， 用 户 都 与 其 交互 了 ， 而 事件 处 理 程 序 的 代码 还 无 法 执行 。 比 如 在 前 面 的 例子 中 ， 如 果 
showMessage () 图 数 是 在 页 面 后 面 , 在 按钮 中 代码 的 后 面 定义 的 , 那么 当 用 户 在 showMessage () 函数 
被 定义 之 前 点 击 按钮 时 ， 就 会 发 生 错 误 。 为 此 , 大 多 数 HTML 事件 处 理 程序 会 封装 在 try/catch 块 中 ， 
以 便 在 这 种 情况 下 静默 失败 ， 如 下 面 的 例子 所 示 : 

<input type="button" value="Click Me" onclick="try{showMessage();}catch(ex) {}"> 

这 样 , 如 果 在 showMessage () 函数 被 定义 之 前 点 击 了 按钮 ， 就 不 会 发 生 JavaScript 错误 了 , 这 是 
为 错误 在 浏览 需 收 到 之 前 已 经 被 拦截 了 。 

另 一 个 问题 是 对 事件 处 理 程序 作用 域 链 的 扩展 在 不 同 浏览 器 中 可 能 导致 不 同 的 结果 。 不 同 
JavaScript 引擎 中 标识 符 解 析 的 规则 存在 差异 ， 因 此 访问 无 限定 的 对 象 成 员 可 能 导致 错误 。 
使 用 HTML 指定 事件 处 理 程序 的 最 后 一 个 问题 是 HTML 与 JavaScript 强 耦 合 。 如 果 需 要 修改 事件 处 
理 程 序 ， 则 必须 在 两 个 地 方 ， 即 HTML 和 JavaScript 中 ， 修 改 代码 。 这 也 是 很 多 开发 者 不 使 用 HTML 
事件 处 理 程序 ， 而 使 用 JavaScript 指定 事件 处 理 程序 的 主要 原因 。 
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17.2.2 ”DOM0 事件 处 理 程序 


在 JavaScript 中 指定 事件 处 理 程序 的 传统 方式 是 把 一 个 函数 赋值 给 ( DOM 元 素 的 ) 一 个 事件 处 理 程 
序 属性 。 这 也 是 在 第 四 代 Web 浏览 器 中 开始 支持 的 事件 处 理 程序 赋值 方法 ， 直 到 现在 所 有 现代 浏览 
仍然 都 支持 此 方法 ， 主 要 原因 是 简单 。 要 使 用 JavaScript 指定 事件 处 理 程序 ， 必 须 先 取得 要 操作 对 象 的 
引用 。 

每 个 元 素 (包括 window 和 document ) 都 有 通常 小 写 的 事件 处 理 程序 属性 ， 比 如 onclick。 只 要 
把 这 个 属性 赋值 为 一 个 函数 即 可 : 


let btn = document .getElementById("myBtn"); 
btn.onclick = function() { 
console.log("Clicked"); 


}; 

这 里 先 从 文档 中 取得 按钮 ， 然 后 给 它 的 onclick 事件 处 理 程序 赋值 一 个 函数 。 注 意 ， 前 面 的 代码 
在 运行 之 后 才 会 给 事件 处 理 程序 赋值 。 因 此 如 果 在 页 面 中 上 面 的 代码 出 现在 按钮 之 后 , 则 有 可 能 出 现 用 
户 点 击 按钮 没有 反应 的 情况 。 

像 这 样 使 用 DOM0 方式 为 事件 处 理 程序 赋值 时 ， 所 赋 函 数 被 视 为 元 素 的 方法 。 因 此 ， 事 件 处 理 程 
序 会 在 元 素 的 作用 域 中 运行 ， 即 this 等 于 元 素 。 下 面 的 例子 演示 了 使 用 this 引用 元 素 本 身 ; 


let btn = document .getElementById("myBtn"); 

btn.onclick = function() { 
console.log(this.id); // "myBtn" 

}3 


点 击 按钮 ， 这 段 代码 会 显示 元 素 的 DD。 这 个 DD 是 通过 this.ia 获取 的 。 不 仅仅 是 ia， 在 事件 处 
理 程序 里 通过 this 可 以 访问 元 素 的 任何 属性 和 方法 。 以 这 种 方式 添加 事件 处 理 程序 是 注册 在 事件 流 的 
冒 泡 阶段 的 。 

通过 将 事件 处 理 程序 属性 的 值 设 置 为 nul1l， 可 以 移 除 通过 DOM0 方式 添加 的 事件 处 理 程序 ， 如 下 
面 的 例子 所 示 : 

btn.onclick = null; // 移 除 事件 处 理 程序 


把 事件 处 理 程序 设置 为 null1， 再 点 击 按钮 就 不 会 执行 任何 操作 了 。 


























































































































































































































注意 ”如果 事件 处 理 程序 是 在 HTML 中 指定 的 ， 则 onclick 属性 的 值 是 一 个 包装 相应 
HTML 事件 处 理 程序 属性 值 的 函数 。 这 些 事件 处 理 程序 也 可 以 通过 在 JavaScript 中 将 相应 


属性 设置 为 null 来 移 除 。 





17.2.3 DOM2 事件 处 理 程序 


DOM2 Events 为 事件 处 理 程序 的 赋值 和 移 除 定 义 了 两 个 方法 : addEventListener() 和 remove- 
EventListener()。 这 两 个 方法 暴露 在 所 有 DOM 节点 上 ， 它 们 接收 3 个 参数 : 事件 名 、 事 件 处 理 函 
数 和 一 个 布尔 值 ，true 表示 在 捕获 阶段 调用 事件 处 理 程序 ，false (默认 值 ) 表示 在 冒 泡 阶段 调用 事 
件 处 理 程序 。 

仍 以 给 按钮 添加 click 事件 处 理 程序 为 例 ， 可 以 这 样 写 : 
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let btn = document .getElementById("myBtn"); 


btn.addEventListener("click", () => { 
console.log(this.id); 


}, false); 
































以 上 代码 为 按钮 添加 了 会 在 事件 冒 泡 阶段 触发 的 onclick 事件 处 理 程序 ( 因为 最 后 一 个 参数 值 为 


false )。 与 DOM0 方式 类 似 ， 这 个 事件 处 理 程序 同样 在 被 附加 到 的 元 素 的 作 】 























] 域 











! 运 行 。 使 用 DOM2 











方式 的 主要 优势 是 可 以 为 同一 个 事件 添加 多 个 事件 处 理 程序 。 来 看 下 钙 





let btn 

















的 例子 : 














document .getElementById("myBtn"); 
btn.addEventListener ("click", 


() 


ER 


console.log(this.id); 


}, false); 


btn.addEventListener("click", () => { 
console.log("Hello world!"); 


}, false); 


这 里 给 按钮 添加 了 两 个 事件 处 理 程序 。 多 个 事件 处 理 程序 以 添加 顺序 来 触发 ， 因 此 前 面 的 代码 会 先 











打印 元 素 ID， 然 后 显示 消息 “Hello world!”。 


























子 所 示 : 


let btn 


通过 adqdEventListener() 添 加 


加 时 同样 的 参数 来 移 




















的 事件 处 理 程序 只 能 使 用 

















ner () 并 传人 与 添 








removeEventList 














除 。 这 意味 着 使 月 








日 addEventListener () 添 加 的 





document .getElementById ( "myBtn" ) 
btn.adqdqEventListener("C1Lick" ， 


() 


SS 和 


console.log(this.id); 


}, false); 


// 其 他 代码 


btn.removeEventListener("click", 


function() { 


// 没有 效果 | 


console.log(this.id); 


}, false); 











这 个 例子 通过 addEventListener() 添 加 了 一 个 匿名 函数 作为 事件 处 理 程序 。 











相同 的 参数 调用 了 remov 
的 完全 不 是 一 回 事 。 














EventListener ()。 但 实际 上 ， 第 二 个 参数 与 传 给 aqdq] 





匿名 函数 无 法 移 除 ， 如 下 面 的 例 


然后 ， 又 以 看 起 来 











传 给 remov 














的 是 同一 个 ， 如 下 夯 








i 的 例子 所 示 : 





let btn 


document .getElementById("myBtn"); 


let handler = function() { 
console.log(this.id); 
































EventListener() 的 事件 处 理 函 数 必须 与 传 给 aaadl 


EventListener() 





EventListener() 


}; 

btn.addEventListener("click", handler, false); 

// 其 他 代码 

btn.removeEventListener("click",，handler, false); // 有 效果 | 

这 个 例子 有 效 ， 因 为 调用 addEventListener() 和 removeEventListener() 时 传人 的 是 同一 个 
函数 。 

大 多 数 情 况 下 ,事件 处 理 程序 会 被 添加 到 事件 流 的 冒 泡 阶段 ， 主 要 原因 是 跨 浏览 器 兼容 性 好 。 把 事 


件 处 理 程序 注册 到 捕获 阶段 通常 








用 事件 捕获 。 



































] 于 在 事件 到 达 








~ 








晶 定 目标 之 前 拦截 事件 。 如 果 不 需要 拦截 ， 则 不 要 使 
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17.2.4 IE 事件 处 理 程序 


正 实 现 了 与 DOM 类 似 的 方法 , 即 attachEvent () 和 detachEvent () 。 这 两 个 方法 接收 两 个 同样 
的 参数 : 事件 处 理 程序 的 名 字 和 事件 处 理 函 数 。 因 为 IE8 及 更 早 版 本 只 支持 事件 冒 泡 ， 所 以 使 用 
attachEvent () 添 加 的 事件 处 理 程序 会 添加 到 冒 泡 阶段 。 

要 使 用 attachEvent () 给 按钮 添加 click 事件 处 理 程序 ， 可 以 使 用 以 下 代码 : 


var btn = document .getElementById ("myBtn"); 

btn.attachEvent ("onclick", function() { 
console.log("Clicked"); 

}); 


注意 ，attachEvent () 的 第 一 个 参数 是 "onclick"， 而 不 是 DOM 的 addEventListener () 方 法 
的 "click"。 

在 IE 中 使 用 attachEvent () 与 使 用 DOM0 方式 的 主要 区 别 是 事件 处 理 程序 的 作用 域 。 使 用 DOM0 
方式 时 ， 事 件 处 理 程序 中 的 this 值 等 于 目标 元 素 。 而 使 用 attachEvent () 时 ， 事 件 处 理 程序 是 在 全 
局 作用 域 中 运行 的 ， 因 此 this 等 于 windqow。 来 看 下 面 使 用 attachEvent () 的 例子 : 


var btn = document .getElementById("myBtn"); 
btn.attachEvent ("onclick", function() { 
console.log(this === window); // true 


}); 

理解 这 些 差 异 对 编写 跨 浏览 器 代码 是 非常 重要 的 。 

与 使 用 addEventListener() 一 样 ,使 用 attachEvent () 方 法 也 可 以 给 一 个 元 素 添加 多 个 事件 处 
理 程序 。 比 如 下 面 的 例子 : 


Var btn = document .getElementById ("myBtn"); 

btn.attachEvent ("onclick", function() { 
console.log("Clicked"); 

Fs 

btn.attachEvent ("onclick", function() { 
console.log("Hello world!"); 

}); 


这 里 调用 了 两 次 attachEvent () ， 分 别 给 同一 个 按钮 添加 了 两 个 不 同 的 事件 处 理 程序 。 不 过 ， 与 
DOM 方法 不 同 ， 这 里 的 事件 处 理 程序 会 以 添加 它们 的 顺序 反 向 触发 。 换 名 话说 ， 在 点 击 例子 中 的 按钮 
后 ， 控 制 台 中 会 先 打 印 出 "Hello world!"， 然 后 再 打印 出 "clicked"。 

使 用 attachEvent () 添加 的 事件 处 理 程序 将 使 用 aetachgvent () 来 移 除 ， 只 要 提供 相同 的 参数 。 
与 使 用 DOM 方法 类 似 ， 作 为 事件 处 理 程序 添加 的 匿名 函数 也 无 法 移 除 。 但 只 要 传 给 detachEvent () 
方法 相同 的 函数 引用 ， 就 可 以 移 除 。 下 面 的 例子 演示 了 附加 和 剥离 事件 : 









































































































































































































































Var btn = document .getElementById("myBtn"); 

var handler = function() { 
console.log("Clicked"); 

}; 

btn.attachEvent ("onclick", handler); 


// 其 他 代码 


btn.detachEvent ("onclick", handler); 


这 里 先 把 事件 处 理 程序 保存 到 变量 nangler ,之 后 又 将 其 传 给 detachEvent () 来 移 除 事件 处 理 程序 。 
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17.2.5” 跨 浏览 器 事件 处 理 程序 
为 了 以 跨 浏 览 器 兼容 的 方式 处 理事 件 ， 























很 多 开发 者 会 选择 使 用 一 个 JavaScript 库 ， 











浏览 右 的 差异 。 有 些 开发 者 也 可 能 会 自己 纺 
器 事件 处 理 代码 也 很 简单 ， 主 要 依赖 能 力 检 
冒 泡 阶段 运行 即 可 。 

为 此 ， 需 要 先 创建 一 个 addHandler ( 


























写 代码 ， 以 便 使 用 最 合适 的 事件 处 理 手 段 。 
测 。 





























DOM2 方式 或 正方 式 来 添加 事件 处 理 程序 。 这 个 方法 会 在 
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其 中 抽象 了 不 同 
自己 编写 跨 浏览 





要 确保 事件 处 理 代 码 具 有 最 大 兼容 性 ， 只 需要 让 代码 在 


) 方 法 。 这 个 方法 的 任务 是 根据 需要 分 别 使 用 DOM0 方式 、 
EventUtil 对 象 ( est 的 对 





象 ) 上 









































添加 一 个 方法 ， 以 实现 跨 浏览 器 事件 处 理 。 添 加 的 这 个 aaaHanaler () 方 法 接收 3 个 
事件 名 ee 
有 了 addHandle 还 要 写 一 个 也 接收 同样 的 3 个 参数 的 removeHandler ( 
a 不 管 是 通过 何 种 方式 添加 的 ， 默 认为 DOM0 es 
以 下 就 是 包含 这 两 个 方法 的 EventUtil 对 象 : 
Var EventUtil = { 
addHandler: function(element, type, handler) { 
if (element.addEventListener) { 
element .addEventListener(type, handler, false); 
} else if (element .attachEvent) { 
element .attachEvent ("on" + type, handler); 
} else { 
element["on" + type] = handler; 
} 
es 
removeHandler: function(element, type, handler) { 
if (element.removeEventListener) { 
element .removeEventListener (type, handler, false); 
} else if (element .detachEvent) { 
element .detachEvent ("on" + type, handler); 
} else { 
element["on" + typel] = null; 





} 
} 


两 个 方法 都 是 首先 检测 传人 元 素 上 是 




















用 该 方式 。 注 意 这 时 候 必须 在 事件 类 型 前 加 
DOM0 方式 (在 现代 浏览 器 中 不 0 
事件 处 理 程序 或 null 赋 给 了 这 个 属性 。 


可 以 像 下 面 这 样 使 用 EventUtil 对 象 : 












































let btn = document 
let handler = function() { 
console.log("Clicked"); 
} 
EventUtil.addHandler (btn, 





// 其 他 代码 


EventUtil.removeHandler (btn, 


否 存 在 DOM2 方式 。 如 及 


MeLicek", 


"click", 








Fr on", 











参数 : 目标 元 素 、 


这 个 方法 的 任务 








R 有 DOM2 方式 ， 就 使 用 该 方式 ， 传 
入 事件 类 型 和 事件 处 理 函 数 ， 以 及 表示 冒 泡 阶 段 的 第 三 个 参数 false。 和 否则 ， 如 果 存 在 正方 式 ， 则 使 
才能 保证 在 IE8 及 更 早 版 本 中 有 效 。 最 后 是 使 用 




















)。 注意 使 用 DOM0 方式 时 使 用 了 


括号 计算 属性 名 ， 并 将 





.getElementById( "myBtn" ) 


handler); 


handler); 
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这 里 的 aqaaqHandqler() 和 removeHandler () 方 法 并 没有 解决 所 有 路 浏览 器 一 致 性 问题 ， 比 如 下 
的 作用 域 问 题 、 多 个 事件 处 理 程序 执行 顺序 问题 等 。 不 过 ， 这 两 个 方法 已 经 实现 了 跨 浏览 器 添加 和 移 除 
事件 处 理 程 序 。 另 外 也 要 注意 ，DOM0 只 支持 给 一 个 事件 添加 一 个 处 理 程序 。 好 在 DOM0 浏览 器 已 经 
很 少 有 人 使 用 了 ， 所 以 影响 应 该 不 大 。 


17.3 事件 对 象 


在 DOM 中 发 生 事件 时 , 所 有 相关 信息 都 会 被 收集 并 存储 在 一 个 名 为 event 的 对 象 中 。 这 个 对 象 包 
含 了 一 些 基 本 信息 , 比如 导致 事件 的 元 素 、 发 生 的 事件 类 型 , 以 及 可 能 与 特定 事件 相关 的 任何 其 他 数据 。 
例如 ,鼠标 操作 导致 的 事件 会 生成 鼠标 位 置信 息 ， 而 键盘 操作 导致 的 事件 会 生成 与 被 按 下 的 刍 有 关 的 信 
息 。 所 有 浏览 器 都 支持 这 个 event 对 象 ， 尽 管 支持 方式 不 同 。 


17.3.1 DOM 事件 对 象 


在 DOM 合 规 的 浏览 器 中 ，event 对 象 是 传 给 事件 处 理 程序 的 唯一 参数 。 不 管 以 哪 种 方式 (DOM0 
或 DOM2 ) 指定 事件 处 理 程序 ， 都 会 传人 这 个 event 对 象 。 下 面 的 例子 展示 了 在 两 种 方式 下 都 可 以 使 
用 事件 对 象 : 


let btn = document .getElementById("myBtn" ) ， 

btn.onclick = function(event) { 
console.log(event.type); // "click" 

}; 

















































































































btn.addEventListener("click", (event) => { 
console.log(event.type); // "click" 
}, false); 


这 个 例子 中 的 两 个 事件 处 理 程序 都 会 在 控制 台 打 出 event .type 属性 包含 的 事件 类 型 ,这 个 属性 中 
始终 包含 被 触发 事件 的 类 型 ,如 "click"( 与 传 给 addEventListener() 和 removeEventListener () 
方法 的 事件 名 一 致 )。 

在 通过 HTML 属性 指定 的 事件 处 理 程序 中 ， 同 样 可 以 使 用 变量 event 引用 事件 对 象 。 下 面 的 例子 
中 演示 了 如 何 使 用 这 个 变量 : 

<input type="button" value="Click Me" onclick="console.log(event.type)"> 

以 这 种 方式 提供 event 对 象 ， 可 以 让 HTML 属性 中 的 代码 实现 与 JavaScript 函数 同样 的 功能 。 

如 前 所 述 , 事件 对 象 包含 与 特定 事件 相关 的 属性 和 方法 。 不同 的 事件 生成 的 事件 对 象 也 会 包含 不 同 
的 属性 和 方法 。 不 过 ， 所 有 事件 对 象 都 会 包含 下 表 列 出 的 这 些 公共 属性 和 方法 。 










































































































































































属性 /方法 类 型 读 / 写 说 明 
bubbles 布尔 值 只 读 表示 事件 是 否 冒 泡 
cancelable 布尔 值 只 读 表示 是 否 可 以 取消 事件 的 默认 行为 
currentTarget 元 素 只 读 当前 事件 处 理 程序 所 在 的 元 素 
defaultPrevented 布尔 值 只 读 true 表示 已 经 调用 preventDefault () 方 法 (DOM3 
Events 中 新 增 ) 
detail 整数 只 读 事件 相关 的 其 他 信息 
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( 续 ) 
属性 /方法 类 型 读 / 写 说 明 
event Phase 整数 只 读 表示 调用 事件 处 理 程序 的 阶段 : 1 代表 捕获 阶段 ，2 代表 
到 达 目 标 ，3 代表 冒 泡 阶 段 
preventDefault () 函数 只 读 用 于 取消 事件 的 默认 行为 。 只 有 cancelable 为 true 才 
可 以 调用 这 个 方法 
stopImmediatePropagation() ”函数 只 读 用 于 取消 所 有 后 续 事 件 捕获 或 事件 冒 泡 ， 并 阻止 调用 任 
何 后 续 事 件 处 理 程序 ( DOM3 Events 中 新 增 ) 
StopPropagation () 函数 只 读 用 于 取消 所 有 后 续 事 件 捕获 或 事件 冒 泡 。 只 有 bubbles 
为 true 才 可 以 调用 这 个 方法 
target 元 素 只 读 事件 目标 
trusted 布尔 值 只 读 true 表示 事件 是 由 浏览 器 生成 的 。false 表示 事件 是 开 
发 者 通过 JavaScript 创建 的 (DOM3 Events 中 新 增 ) 
type 字符 串 只 读 被 触发 的 事件 类 型 
View AbstractView 只 读 与 事件 相关 的 抽象 视图 ,等 于 事件 所 发 生 的 window 对 象 
在 事件 处 理 程序 内 部 ，this 对 象 始终 等 于 currentTarget 的 值 ， 而 target 只 包含 事件 的 实际 
目标 。 如 果 事 件 处 理 程序 直接 添加 在 了 意图 的 目标 , 则 this、currentTarget 和 target 的 值 是 一 样 














的 。 下 面 的 例子 


let btn 
btn.onclick 


展示 了 这 











console.log(event.target 
}; 


上 面 的 代码 检测 了 currentT 
钮 ,所 以 这 3 个 值 是 相等 的 。 如 果 这 























arget 和 target 的 值 是 否 等 于 this。 


两 个 属性 都 等 于 this 的 情形 : 
document .getElementById("myBtn"); 


function(event) { 
console.log(event.currentTarget === this); 


// true 


=== this); // true 














因为 click 事件 的 目标 是 按 
个 事件 处 理 程序 是 添加 到 按钮 的 父 节 点 (如 document .body ) 上 ， 








么 它们 的 值 就 不 一 样 了 。 比 如 下 镍 





i 的 例子 在 aocument .body 上 添加 了 单 击 处 理 程序 : 











document .body .onclick 
console.log(event.curren 
console.log(this 
console.log(event.target 


过 
这 种 情况 下 点 击 
处 理 程序 的 元 素 。 而 target 




















本 身 并 没有 注册 事件 处 理 程序 , 因此 click 事件 





处 理 程序 。 


type 属性 在 一 个 处 理 程 
et btn 
let handler 


switch(event.type) { 
case "click": 














function (event) 


按钮 , this 和 currentTarget 都 等 于 document .body, 这 
属性 等 于 按钮 本 身 ， 这 是 因为 那 才 是 click 事件 真正 的 目标 。 由 于 按钮 


序 处 理 多 个 事件 时 和 


document .getElementById ( "myBtn" ) 
function(event) { 


€ 





tTarget === document .body); // true 
document .body); // true 
=== document .getElementById("myBtn")); // true 











是 因为 它 是 注册 事件 











冒 泡 到 aocument .body， 从 而 触发 了 在 它 上 面 注册 的 




















民有 用 。 比 如 下 面 的 处 理 程序 中 就 使 月 








有 了 event .type: 











console.log("Clicked"); 


break; 
case "mouseover": 


17.3 ”事件 对 象 501 





event .target .style.backgroundColor = "red"; 
break; 
case "mouseout": 
event .target .style.backgroundColor = "" 
break; 
} 
}; 


btn.onclick = handler; 
btn.onmouseover = handler; 
btn.onmouseout = handler; 


在 这 个 例子 中 ， 哨 数 nandler 被 用 于 处 理 3 种 不 同 的 事件 : click、mouseover 和 mouseout。 
当 按 钮 被 点 击 时 ， 应 该 在 控制 台 打 印 一 条 消息 ， 如 前 面 的 例子 所 示 。 而 把 鼠标 放 到 按钮 上 ,会 导致 按钮 
背景 变 成 红色 ， 接 着 把 鼠标 从 按钮 上 移 开 ,背景 颜色 应 该 又 恢复 成 默认 值 。 这 个 函数 使 用 event .type 
属性 确定 了 事件 类 型 ， 从 而 可 以 做 出 不 同 的 响应 。 

preventDefault () 方 法 用 于 阻止 特定 事件 的 默认 动作 。 比 如 , 链接 的 默认 行为 就 是 在 被 单 击 时 导 
航 到 href 属性 指定 的 URL。 如 果 想 阻止 这 个 导航 行为 ， 可 以 在 onclick 事件 处 理 程序 中 取消 ， 如 下 
面 的 例子 所 示 : 


let link = document .getElementById("myLink"); 
link.onclick = function(event) { 

event .preventDefault (); 
}3 
任何 可 以 通过 preventDefault () 取 消 默认 行为 的 事件 ， 其 事件 对 象 的 cancelable 属性 都 会 设 
置 为 true。 
stopPropagation() 方 法 用 于 立即 阻止 事件 流 在 DOM 结构 中 传播 ， 取消 后 续 的 事件 捕获 或 冒 泡 。 
例如 ， 直 接 添 加 到 按钮 的 事件 处 理 程序 中 调用 stopPropagation() ， 可 以 阻止 document .body 上 注 
册 的 事件 处 理 程序 执行 。 比 如 : 


let btn = document .getElementById("myBtn"); 
btn.onclick = function(event) { 
console.log("Clicked"); 
event .stopPropagation(); 


于 了 







































































document .bodqy .onclick = function(event) { 
console.log("Body clicked" ) ， 
}; 


如 果 这 个 例子 中 不 调用 stopPropagation() ,那么 点 击 按钮 就 会 打印 两 条 消息 。 但 这 里 由 于 click 
事件 不 会 传播 到 aocument .body， 因 此 onclick 事件 处 理 程序 永远 不 会 执行 。 

eventPhase 属性 可 用 于 确定 事件 流 当 前 所 处 的 阶段 。 如 果 事 件 处 理 程序 在 捕获 阶段 被 调用 ， 则 
eventPhase 等 于 1; 如 果 事 件 处 理 程序 在 目标 上 被 调用 ， 则 event Phase 等 于 2; 如 果 事 件 处 理 程序 
在 冒 泡 阶段 被 调用 , 则 eventPhase 等 于 3。 不 过 要 注意 的 是 , 虽然 “到 达 目 标 ” 是 在 冒 泡 阶段 发 生 的 ， 
但 其 eventPhase 仍然 等 于 2。 下 面 的 例子 展示 了 eventPhase 在 不 同 阶段 的 值 : 


let btn = document .getElementById("myBtn"); 
btn.onclick = function(event) { 
console.log(event .eventPhase); // 2 


下 了 
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document .body.addEventListener("click", (event) => { 


console.log(event .eventPhase)， // 1 
}, true); 
document .body .onclick = (event) => { 
console.log(event .eventPhase); // 3 


}; 

在 这 个 例子 中 ,点 击 按钮 首先 会 触发 注册 在 捕获 阶段 的 aocument .poay 上 的 事件 处 理 程序 ， 
显示 eventPhase 为 1。 接 着 ， 会 触发 按钮 本 身 的 事件 处 理 程序 ( 尽管 是 注册 在 冒 泡 阶段 )， 此 时 显 
示 eventPhase 等 于 2。 最 后 触发 的 是 注册 在 冒 泡 阶 段 的 socument .body 上 的 事件 处 理 程 序 ， 显 示 
eventPhase 为 3。 而 当 eventPhase 等 于 2 时 ，this、target 和 currentTarget 三 者 相等 。 
































注意 event 对 象 只 在 事件 处 理 程序 执行 期 间 存 在 ， 一 旦 执行 完毕 ， 





17.3.2 IE 事件 对 象 


与 DOM 事件 对 象 不 同 ， 焉 事件 对 象 可 以 基于 事件 处 理 程序 被 指定 的 方式 以 不 同方 式 来 访问 。 如 曙 
事件 处 理 程序 是 使 用 DOM0 方式 指定 的 ， 则 event 对 象 只 是 window 对 象 的 一 个 属性 ， 如 下 所 示 : 


Var btn = document .getElementById("myBtn"); 
btn.onclick = function() { 
let event = window.event; 
console.log(event.type); // "click" 
}; 


这 里 ，window .event 中 保存 着 event 对 象 ， 其 event .type 属性 保存 着 事件 类 型 ( 正 的 这 个 属 
性 的 值 与 DOM 事件 对 象 中 一 样 )。 不 过 ， 如 果 事 件 处 理 程序 是 使 用 attachEvent () 指 定 的 , 则 event 
对 象 会 作为 唯一 的 参数 传 给 处 理 函 数 ， 如 下 所 示 : 

var btn = document .getElementById("myBtn"); 

btn.attachEvent ("onclick", function(event) { 

console.log(event.type); // "click" 

}); 
使 用 attachEvent () 时 ，event 对 象 仍 然 是 window 对 象 的 属性 ( 像 DOM0 方式 那样 )， 只 是 出 
于 方便 也 将 其 作为 参数 传人 。 
如 果 是 使 用 HTML 属性 方式 指定 的 事件 处 理 程序 , 则 event 对 象 同样 可 以 通过 变量 event 访问 ( 与 
DOM 模型 一 样 )。 下 面 是 在 HTML 事件 属性 中 使 用 event .type 的 例子 : 


<input type="button" value="Click Me" onclick="console.1og(event .type) "> 

正事 件 对 象 也 包含 与 导致 其 创建 的 特定 事件 相关 的 属性 和 方法 , 其 中 很 多 都 与 相关 的 DOM 属性 和 
方法 对 应 。 与 DOM 事件 对 象 一 样 ， 基 于 触发 的 事件 类 型 不 同 ，event 对 象 中 包含 的 属性 和 方法 也 不 一 
样 。 不 过 ， 所 有 正事 件 对 象 都 会 包含 下 表 所 列 的 公共 属性 和 方法 。 
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属性 /方法 类 型 读 / 写 说 明 
cencelBubble 布尔 值 读 / 写 默认 为 false， 设置 为 true 可 以 取消 冒 泡 (与 DOM 的 














stopPropagation() 方 法 相同 ) 
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( 续 ) 
属性 /方法 类 型 读 / 写 说 明 
returnValue 布尔 值 读 / 写 默认 为 true， 设 置 为 false 可 以 取消 事件 默认 行为 
(与 DOM 的 preventDefault () 方 法 相同 ) 
srcElement 元 素 只 读 事件 目标 (与 DOM 的 target 属性 相同 ) 
type 字符 串 只 读 触发 的 事件 类 型 





























由 于 事件 处 理 程序 的 作用 域 取 决 于 指定 它 的 方式 ， 因 此 this 值 并 不 总 是 等 于 事件 目标 。 为 此 ， 更 
好 的 方式 是 使 用 事件 对 象 的 srcElement 属性 代替 this。 下 面 的 例子 表明 ， 不同 事件 对 象 上 的 
srcElement 属性 中 保存 的 都 是 事件 目标 : 


var btn = document .getElementById("myBtn"); 
btn.onclick = function() { 















































console.log(window.event .srcElement === this); // true 
}; 
btn.attachEvent ("onclick", function(event) { 
console.log(event.srcElement === this); // false 
}); 











在 第 一 个 以 DOM0 方式 指定 的 事件 处 理 程序 中 ，srcElement 属性 等 于 this， 而 在 第 二 个 事件 处 
理 程序 中 (运行 在 全 局 作用 域 下 )， 两 个 值 就 不 相等 了 。 

returnValue 属性 等 价 于 DOM 的 preventDefault () 方 法 , 都 是 用 于 取消 给 定 事件 默认 的 行为 。 
只 不 过 在 这 里 要 把 returnvValue 设置 为 false 才 是 阻止 默认 动作 。 下 面 是 一 个 设置 该 属性 的 例子 : 


Var link = document .getElementById("myLink"); 
link.onclick = function() { 
window.event.returnValue = false; 


}3 

在 这 个 例子 中 , returnvalue 在 onclick 事件 处 理 程序 中 被 设置 为 false, 阻止 了 链接 的 默认 行 
为 。 与 DOM 不同 ， 没 有 办 法 通过 JavaScript 确定 事件 是 否 可 以 被 取消 。 

cancelBubble 属性 与 DOMstopPropagation() 方 法 用 途 一 样 ， 都 可 以 阻止 事件 冒 泡 。 因 为 IE8 
及 更 早 版 本 不 支持 捕获 阶段 ， 所 以 只 会 取消 冒 泡 。stopPropagation() 则 既 取 消 捕 获 也 取消 冒 泡 。 下 
面 是 一 个 取消 冒 泡 的 例子 : 


var btn = document .getElementById("myBtn" ) ， 
btn.onclick = function() { 
console.log("Clicked"); 
window.event .cancelBubble = true; 
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document .body.onclick = function() { 
console.log("Body clicked"); 
}; 


通过 在 按钮 的 onclick 事件 处 理 程序 中 将 cancelBubble 设置 为 true， 可 以 阻止 事件 骨 泡 到 
document .body， 也 就 阻止 了 调用 注册 在 它 上 面 的 事件 处 理 程序 。 于 是 ， 点 击 按钮 只 会 输出 一 条 消息 。 


17.3.3” 跨 浏览 器 事件 对 象 
虽然 DOM 和 下 的 事件 对 象 并 不 相同 ， 但 它们 有 足够 的 相似 性 可 以 实现 跨 浏览 器 方案 。DOM 习 
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对 象 中 包含 IE 事件 对 象 的 所 有 信息 和 能 力 ， 只 是 形式 不 同 。 这 些 共性 可 让 两 种 
为 可 能 。 本 章 前 面 的 EventUtil 对 象 可 以 像 下 面 这 样 再 添加 一 些 方 法 : 


Var EventUtil = { 
addHandler: function(element, type, handler) { 
// 为 节省 版 面 ， 删 除了 之 前 的 代码 








袁 
由 


F 模 型 之 间 的 映射 成 














}, 


getEvent: function(event) { 
return event ? event : window.event; 
}, 


getTarget: function(event) { 
return event.target || event.srcElement; 


}, 


preventDefault: function(event) { 
if (event.preventDefault) { 
event .preventDefault(); 
} else { 
event.returnValue = false; 
} 
}, 


removeHandler: function(element, type, handler) { 
// 为 节省 版 面 ， 删 除了 之 前 的 代码 
J 


stopPropagation: function(event) { 
if (event.stopPropagation) { 
event .stopPropagation(); 
} else { 
event .cancelBubble = true; 
} 
} 


二 

这 里 一 共 给 EventUtil 增加 了 4 个 新 方法 。 首 先是 getEvent () ， 其 返回 对 event 对 象 的 引用 。 
IE 中 事件 对 象 的 位 置 不 同 ， 而 使 用 这 个 方法 可 以 不 用 管事 Os 都 可 以 获取 到 
event 对 象 。 使 用 这 个 方法 的 前 提 是 ， 事 件 处 理 程序 必须 接收 event 对 象 ， 并 把 它 传 给 这 个 方法 。 下 
面 是 使 用 BventUtil 中 这 个 方法 统一 获取 event 对 象 的 一 个 例子 : 


btn.onclick = function(event) { 
event = EventUtil.getEvent (event); 
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在 DOM 合 规 的 浏览 器 中 ，event 对 象 会 直接 传人 并 返回 。 Ws IE 中 ，event 对 象 可 能 并 没有 被 
定义 (因为 使 用 了 attachEvent () ), 因此 返回 wingow.event。 这样 就 可 以 确保 无 论 使 用 什么 浏览 
都 可 以 获取 到 事件 对 象 。 

第 二 个 方法 是 getTarget () ， 其 返回 事件 目标 。 在 这 个 方法 中 ， 首 先 检测 event 对 象 是 否 存在 
target 属性 。 如 果 存 在 就 返回 这 个 值 ; 否则 ， 就 返回 event .srcElement 属性 。 下 面 是 使 用 这 个 方 
法 的 示例 : 
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btn.onclick = function(event) { 
event = EventUtil.getEvent (event); 
let target = EventUtil.getTarget (event ) ， 





Ne 











第 三 个 方法 是 preventDefault ()， 其 用 于 阻止 事件 的 默认 行为 。 在 传人 的 event 对 象 上 ， 如 果 
有 preventDefault () 方 法 ， 就 调用 这 个 方法 ; 否则 ， 就 将 event .returnVvalue 设置 为 false。 下 
面 是 使 用 这 个 方法 的 例子 : 


let link = document .getElementById("myLink"); 
link.onclick = function(event) { 









































event = EventUtil.getEvent (event); 
EventUtil.preventDefault (event); 
}; 


以 上 代码 能 在 所 有 主流 浏览 器 中 阻止 单 击 链 接 后 跳 转 到 其 他 页 面 。 这 里 首先 通过 EventUtil. 
getEvent () 获取 事件 对 象 ， 然 后 又 把 它 传 给 了 EventUtil.preventDefault () 以 阻止 默认 行为 。 
第 四 个 方法 stopPropagation () 以 类 似 的 方式 运行 。 同 样 先 检测 用 于 停止 事件 流 的 DOM 方法 ， 
如 果 没 有 再 使 用 cancelBubple 属性 。 下 面 是 使 用 这 个 通用 stopPropagation () 方 法 的 示例 : 


let btn = document .getElementById("myBtn"); 
btn.onclick = function(event) { 
console.log("Clicked"); 
event = EventUtil.getEvent (event); 
EventUtil.stopPropagation(event); 


人 






















































































document .body.onclick = function(event) { 
console.log("Body clicked"); 
es 


同样 ， 先 通过 EventUtil.getEvent () 获取 事件 对 象 ， 然 后 又 把 它 传 给 了 EventUtil.stop 
Propagation()。 不 过 ， 这 个 方法 在 浏览 器 上 可 能 会 停止 事件 冒 泡 ， 也 可 能 会 既 停 止 事件 冒 泡 也 停止 
EE 件 捕获 。 


17.4 事件 类 型 


Web 浏览 器 中 可 以 发 生 很 多 种 事件 。 如 前 所 述 , 所 发 生 事件 的 类 型 决定 了 事件 对 象 中 会 保存 什么 信 
息 。DOM3 Events 定义 了 如 下 事件 类 型 。 
口 用 户 界面 事件 (UIEvent ): 涉及 与 BOM 交互 的 通用 浏览 器 事件 。 
口 焦点 事件 ( FocusEvent ): 在 元 素 获得 和 失去 焦点 时 触发 。 
口 鼠标 事件 ( MouseEvent ): 使 用 鼠标 在 页 面 上 执行 某 些 操作 时 触发 。 
口 滚轮 事件 (wheelEvent ): 使 用 鼠标 滚轮 (或 类 似 设备 ) 时 触发 。 
口 输入 事件 ( InputEvent ): 向 文档 中 输入 文本 时 触发 。 
口 键盘 事件 ( KeyboardEvent ): 使 用 键盘 在 页 面 上 执行 某 些 操作 时 触发 。 
口 合成 事件 (CompositionEvent ): 在 使 用 某 种 IME ( Input Method Editor, 输入 法 编辑 器 ) 输入 
字符 时 触发 。 
除了 这 些 事 件 类 型 之 外 , HTMLS5 还 定义 了 另 一 组 事件 ,而 浏览 带 通 常 在 DOM 和 BOM 上 实现 专 有 事 
件 。 这 些 专 有 事件 基本 上 都 是 根据 开发 者 需求 而 不 是 按照 规范 增加 的 ， 因 此 不 同 浏览 器 的 实现 可 能 不 同 。 
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DOM3 Events 在 DOM2 Events 基础 上 重新 定义 了 事件 ， 并 增加 了 新 的 事件 类 型 。 所 有 主流 浏览 器 
都 支持 DOM2 Events 和 DOM3 Events。 


17.4.1 用 户 界面 事件 


用 户 界面 事件 或 UI 事件 不 一 定 跟 用 户 操 作 有 关 。 这 类 事件 在 DOM 规范 出 现 之 前 就 已 经 以 某 种 形 

式 存 在 了 ,保留 它们 是 为 了 向 后 兼容 。UI 事件 主要 有 以 下 几 种 。 

口 DoMActivate: 元 素 被 用 户 通过 鼠标 或 键盘 操作 激活 时 触发 ( 比 click 或 keydown 更 通用 )。 

这 个 事件 在 DOM3 Events 中 已 经 废弃 。 因 为 浏览 器 实现 之 间 存 在 差异 ， 所 以 不 要 使 用 它 。 

口 1oad: 在 window 上 当 页 面 加 载 完 成 后 触发 , 在 窗 套 ( <frameset> ) 上 当 所 有 窗 格 ( <frame> ) 
都 加 载 完 成 后 触发 ， 在 <img> 元 素 上 当 图 片 加 载 完 成 后 触发 ， 在 <object> 元 素 上 当 相应 对 象 加 
载 完成 后 触发 。 

口 unload: 在 window 上 当 页 面 完全 件 载 后 触发 ， 在 窗 套 上 当 所 有 窗 格 都 伸 载 完成 后 触发 ， 在 

<object> 元 素 上 当 相 应 对 象 伸 载 完成 后 触发 。 

口 abort: 在 <object> 元 素 上 当 相 应 对 象 加 载 完 成 前 被 用 户 提前 终止 下 载 时 触发 。 

D error: 在 window 上 当 JavaScript 报错 时 触发 ， 在 <img> 元 素 上 当 无 法 加 载 指定 图 片 时 触发 ， 
在 <opbject> 元 素 上 当 无 法 加 载 相 应 对 象 时 触发 ， 在 窗 套 上 当 一 个 或 多 个 窗 格 无 法 完成 加 载 时 
触发 。 

口 select: 在 文本 框 ( <input> 或 textarea ) 上 当 用 户 选 择 了 一 个 或 多 个 字符 时 触发 。 

口 resize: 在 window 或 窗 格 上 当 窗 口 或 窗 格 被 缩放 时 触发 。 

口 scrol1: 当 用 户 滚动 包含 滚动 条 的 元 素 时 在 元 素 上 触发 。<podqy> 元 素 包 含 已 加 载 页 面 的 滚动 条 。 

大 多 数 HTML 事件 与 window 对 象 和 表单 控件 有 关 。 

除了 DoMActivate, 这 些 事件 在 DOM2 Events 中 都 被 归 为 HTML Events( DOMActivate 在 DOM2 

中 仍旧 是 UI 事 件 )。 


1. 1oad 事件 

load 事件 可 能 是 JavaScript 中 最 常用 的 事件 。 在 window 对 象 上 ，1load 事件 会 在 整个 页 面 (包括 
所 有 外 部 资源 如 图 片 、JavaScript 文件 和 CSS 文件 ) 加 载 完 成 后 触发 。 可 以 通过 两 种 方式 指定 load 事 
件 处 理 程序 。 第 一 种 是 JavaScript 方式 ， 如 下 所 示 : 

window.addEventListener("load", (event) => { 

console.log("Loaded!"); 
让 
这 是 使 用 addEventListener () 方 法 来 指定 事件 处 理 程序 。 与 其 他 事件 一 样 ， 事 件 处 理 程序 会 接 


收 到 一 个 event 对 象 。 这 个 event 对 象 并 没有 提供 关于 这 种 类 型 事件 的 额外 信息 ,虽然 在 DOM 合 规 
的 浏览 器 中 ，event .target 会 被 设置 为 dgocument ， 但 在 IE8 之 前 的 版 本 中 ， 不 会 设置 这 个 对 象 的 
srcElement 属性 。 

第 二 种 指定 1oad 事件 处 理 程序 的 方式 是 向 <pody> 元 素 添加 onloag 属性 ， 如 下 所 示 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>Load Event Example</title> 
</head> 
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<body onload="console.log('Loaded!')"> 


</body> 
</html> 


一 般 来 说 ， 任 何在 window 上 发 生 的 事件 ， 都 可 以 通过 给 <body> 元 素 上 对 应 的 属性 赋值 来 指定 ， 
是 因为 HTML 中 没有 window 元 素 。 这 实际 上 是 为 了 保证 向 后 兼容 的 一 个 策略 , 但 在 所 有 浏览 器 中 都 
得 到 很 好 的 支持 。 实 际 开发 中 要 尽量 使 用 JavaScript 方 式 。 









































起 这 


注意 根据 DOM2 Events，1load 事件 应 该 在 document 而 非 winaqow 上 触发 。 可 是 为 了 


向 后 兼容 ， 所 有 浏览 器 都 在 window 上 实现 了 load 事件 。 











图 片上 也 会 触发 1oad 事 件 ,包括 DOM 中 的 图 片 和 非 DOM 中 的 图 片 。 可 以 在 HIML 中 直接 给 <img> 
元 素 的 onload 属性 指定 事件 处 理 程序 ， 比 如 : 

<img src="smile.gif" onload="console.log('Image loaded.')"> 

这 个 例子 会 在 图 片 加 载 完 成 后 输出 一 条 消息 ,同样 ,使 用 JavaScript 也 可 以 为 图 片 指定 事件 处 理 程序 : 


let image = document .getElementById("myImage"); 
image.addEventListener("load", (event) => { 
console.1og(event .target .src); 


有 大。 
这 里 使 用 JavaScript 为 图 片 指 定 了 1oad 事件 处 理 程序 。 处 理 程序 会 接收 到 event 对 象 ， 虽 然 这 个 
对 象 上 没有 多 少 有 用 的 信息 。 这 个 事件 的 目标 是 <img> 元 素 ， 因 此 可 以 直接 从 event .target .src 属 
性 中 取得 图 片 地 址 并 打印 出 来 。 

在 通过 JavaScript 创建 新 <img> 元 素 时 ， 也 可 以 给 这 个 元 素 指定 一 个 在 加 载 完 成 后 执行 的 事件 处 理 
程序 。 在 这 里 ， 关 键 是 要 在 赋值 src 属性 前 指定 事件 处 理 程序 ， 如 下 所 示 : 






















































































window.addEventListener("load", () => { 
let image = document.createElement ("img"); 
image.addEventListener("load", (event) => { 


console.1og(event .target .src); 
} 
document .body .appendChild (image); 
image.src = "smile.gif",; 


才子 
这 个 例子 首先 为 wingow 指定 了 一 个 1oag 事件 处 理 程序 。 因 为 示例 涉及 向 DOM 中 添加 新 元 素 ， 
所 以 必须 确保 页 面 已 经 加 载 完成 。 如 果 在 页 面 加 载 完 成 之 前 操作 aocument .body， 则 会 导致 错误 。 然 
后 ， 代 码 创建 了 一 个 新 的 <img> 元 素 ， 并 为 这 个 元 素 设置 了 1oad 事件 处 理 程序 。 最 后 ， 才 把 这 个 元 素 
添加 到 文档 中 并 指定 了 其 src 属性 。 注意， 下载 图 片 并 不 一 定 要 把 <img> 元 素 添加 到 文档 ,只 要 给 它 设 
置 了 src 属性 就 会 立即 开始 下 载 。 

同样 的 技术 也 适用 于 DOM0 的 Image 对 象 。 在 DOM 出 现 之 前 ， 客 户 端 都 使 用 Image 对 象 预先 加 
载 图 片 。 可 以 像 使 用 前 面 (通过 createElement () 方 法 创建 ) 的 <img> 元 素 一 样 使 用 Image 对 象 ， 只 
是 不 能 把 后 者 添加 到 DOM 树 。 下 面 的 例子 使 用 新 Image 对 象 实现 了 图 片 预 加载 : 





















































window.addEventListener("load", () => { 
let image = new Image(); 
image.addEventListener("load", (event) => { 


console.log("Image loaded!"); 
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image.src = "Smile.gif" 


站 
这 里 调用 Image 构造 函数 创建 了 一 个 新 图 片 , 并 给 它 设 置 了 事件 处 理 程序 。 有 些 浏览 器 会 把 Image 
对 象 实现 为 <img> 元 素 ， 但 并 非 所 有 浏览 器 都 如 此 。 所 以 最 好 把 它们 看 成 是 两 个 东西 。 














注意 在 IE8 及 早期 版 本 中 ， 如 果 图 片 没有 添加 到 DOM 文档 中 ， 则 loaqd 事件 发 生 时 不 
会 生成 event 对 象 。 对 未 被 添加 到 文档 中 的 <img> 元 素 以 及 Image 对 象 来 说 都 是 这 样 。 


IE9 修复 了 这 个 问题 。 











还 有 一 些 元 素 也 以 非 标准 的 方式 支持 10ad 事件 。<script> 元 素 会 在 JavaScript 文件 加 载 完成 后 触 
发 1oad 事件 ， 从 而 可 以 动态 检测 。 与 图 片 不 同 ， 要 下 载 JavaScript 文件 必须 同时 指定 src 属性 并 把 
<script> 元 素 添加 到 文档 中 。 因 此 指定 事件 处 理 程序 和 指定 src 属性 的 顺序 在 这 里 并 不 重要 。 下 面 的 
代码 展示 了 如 何 给 动态 创建 的 <script> 元 素 指 定 事件 处 理 程序 : 


window.addEventListener("load", () => { 

let Script = document .createElement ("script"); 

script.addEventListener("load", (event) => { 
console.log("Loaded"); 

}); 

script.src = "example.js"; 

document .body.appendChild(script); 









































ss 
这 里 event 对 象 的 target 属性 在 大 多 数 浏 览 器 中 是 <script> 节 点 。IE8 及 更 早 版 本 不 支持 <script> 
元 素 触发 1oad 事件 。 

IE 和 Opera 支持 <1ink> 元 素 触发 1oad 事件 , 因而 支持 动态 检测 样式 表 是 否 加 载 完 成 。 下面 的 代码 
展示 了 如 何 设置 这 样 的 事件 处 理 程序 : 






































window.addEventListener("load", () => { 
let link = document .createElement ("link"); 
link.type = "text/css"; 


link.rel= "stylesheet"; 
link.addEventListener("load", (event) => { 
console.log("css loaded"); 
}); 
link.href = "example.css"; 
document .getElementsByTagName ("head") [0] .appendChild(link); 
天 大人 


与 <script> 节 点 一 样 ， 在 指定 href 属性 并 把 <1ink> 节 点 添加 到 文档 之 前 不 会 下 载 样式 表 。 

2. unload 事件 

与 10ad 事件 相对 的 是 unloag 事件 , unload 事件 会 在 文档 卸载 完成 后 触发 。unload 事件 一 般 是 
在 从 一 个 页 面 导 航 到 另 一 个 页 面 时 触发 ， 最 常用 于 清理 引用 ， 以 避免 内 存 泄 漏 。 与 loaa 事件 类 似 ， 
unload 事件 处 理 程 序 也 有 两 种 指定 方式 。 第 一 种 是 JavaScript 方 式 ， 如 下 所 示 : 


window.addEventListener("unload", (event) => { 
console.log("Unloaded!"); 























Fs 
这 个 事件 生成 的 event 对 象 在 DOM 合 规 的 浏览 器 中 只 有 target 属性 ( 值 为 aocument )。IE8 及 
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更 早 版 本 在 这 个 事件 上 不 提供 srcElement 属性 。 
第 二 种 方式 与 1oad 事件 类 似 ， 就 是 给 <body> 元 素 添加 onunload 属性 : 
<!DOCTYPE html> 
<html> 
<head> 
<title>Unload Event Example</title> 
</head> 
<body onunload="console.log('Unloaded!')"> 

















</body> 
</html> 


无 论 使 用 何 种 方式 ， 都 要 注意 事件 处 理 程序 中 的 代码 。 因 为 unload 事件 是 在 页 面 印 载 完 成 后 触发 
的 ， 所 以 不 能 使 用 页 面 加载 后 才 有 的 对 象 。 此 时 要 访问 DOM 或 修改 页 面 外 观 都 会 导致 错误 。 


























注意 根据 DOM2 Events, unload 事件 应 该 在 <body> 而 非 window 上 和 触发 。 可 是 为 了 向 


后 兼容 ， 所 有 浏览 器 都 在 window 上 实现 了 unload 事件 。 





3. resize 事件 

当 浏 览 器 窗口 被 缩放 到 新 高 度 或 宽度 时 ,会 触发 resize 事件 。 这 个 事件 在 wingow 上 触发 ， 因 此 
可 以 通过 JavaScript 在 window 上 或 者 为 <body> 元 素 添 加 onresize 属性 来 指定 事件 处 理 程序 ,优先 使 
用 JavaScript 方式 : 


window.addEventListener("resize", (event) => { 
console.log("Resized"); 


oe 

类 似 于 其 他 在 window 上 发 生 的 事件 ,此 时 会 生成 event 对 象 , 且 这 个 对 象 的 target 属性 在 DOM 
合 规 的 浏览 器 中 是 Gocument。 而 IE8 及 更 早 版 本 中 并 没有 提供 可 用 的 属性 。 

不 同 浏览 器 在 决定 何 时 触发 resize 事件 上 存在 重要 差异 。IE、Safari、Chrome 和 Opera 会 在 窗口 
缩放 超过 1 像素 时 触发 resize 事件 , 然后 随 着 用 户 缩放 浏览 器 窗口 不 断 触发 。Firefox 早期 版 本 则 只 在 
用 户 停止 缩放 浏览 器 窗口 时 触发 resize 事件 。 无论 如 何 , 都 应 该 避免 在 这 个 事件 处 理 程序 中 执行 过 多 
计算 。 否 则 可 能 由 于 执行 过 于 频繁 而 导致 浏览 器 响应 明确 变 慢 。 






















































































注意 浏览 器 窗口 在 最 大 化 和 最 小 化 时 也 会 触发 resize 事件 。 





4. scroll 事件 

虽然 scrol1l 事件 发 生 在 window 上 ,但 实际 上 反映 的 是 页 面 中 相应 元 素 的 变化 。 在 混杂 模式 下 ， 
可 以 通过 <body> 元 素 检 测 scrollLeft 和 scrollTop 属性 的 变化 。 而 在 标准 模式 下 ， 这 些 变 化 在 除 
早期 版 的 Safari 之 外 的 所 有 浏览 器 中 都 发 生 在 <html> 元 素 上 (早期 版 的 Safari 在 <boqy> 上 跟踪 滚动 位 
置 )。 下 面 的 代码 演示 了 如 何 处 理 这 些 差 异 : 
































window.addEventListener("scroll", (event) => { 
if (document.compatMode == "CSSlCompat") { 
console.log(document .documentElement .scrollTop); 
} else 1{ 


console.log(document .body.scrollTop); 
} 
下 学 
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以 上 事件 处 理 程序 会 在 页 面 滚动 时 输出 垂直 方向 上 滚动 的 距离 ， 而 且 适 用 于 不 同 泻 染 模式 。 因 为 
Safari 3.1 之 前 不 支持 document .compatMode， 所 以 早期 版 本 会 走 第 二 个 分 支 。 

类 似 于 resize，scroll 事件 也 会 随 着 文档 滚动 而 重复 触发 ， 因 此 最 好 保持 事件 处 理 程序 的 代码 
尽 可 能 简单 。 


17.4.2 ”焦点 事件 


焦点 事件 在 页 面 元 素 获 得 或 失去 焦点 时 触发 。 这 些 事件 可 以 与 document .hasFocus () 和 
document .activeElement 一 起 为 开发 者 提供 用 户 在 页 面 中 导航 的 信息 。 焦 点 事件 有 以 下 6 种 。 
口 blur: 当 元 素 失 去 焦点 时 触发 。 这 个 事件 不 冒 泡 ， 所 有 浏览 器 都 支持 。 
口 DOMFocusIn: 当 元 素 获 得 焦点 时 触发 。 这 个 事件 是 focus 的 冒 泡 版 。Opera 是 唯一 支持 这 个 
件 的 主流 浏览 器 。DOM3 Events 废弃 了 DoMFocusIn， 推 荐 focusin。 
口 DOMFocusOut: 当 元 素 失去 焦点 时 触发 。 这 个 事件 是 blur 的 通用 版 。Opera 是 唯一 支持 这 个 事 
件 的 主流 浏览 器 。DOM3 Events 废弃 了 DoMFocusout ， 推 荐 focusout。 
口 focus: 当 元 素 获得 焦点 时 触发 。 这 个 事件 不 冒 泡 ， 所 有 浏览 器 都 支持 。 
口 focusin: 当 元 素 获得 焦点 时 触发 。 这 个 事件 是 focus 的 冒 泡 版 。 
口 focusout : 当 元 素 失 去 焦点 时 触发 。 这 个 事件 是 plur 的 通用 版 。 

焦点 事件 中 的 两 个 主要 事件 是 focus 和 blur, 这 两 个 事件 在 JavaScript 早 期 就 得 到 了 浏览 器 支持 。 
它们 最 大 的 问题 是 不 骨 泡 。 这 导致 了 正 后 来 又 增加 了 focusin 和 focusout ,Opera 又 增加 了 DoMFocusIn 
和 DOMFocusout。 了 E 新 增 的 这 两 个 事件 已 经 被 DOM3 Events 标准 化 。 
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当 焦 点 从 页 面 中 的 一 个 元 素 移 到 另 一 个 元 素 上 时 ， 会 依次 发 生 如 下 事件 。 
(1) focuscout 在 失去 焦点 的 元 素 上 触发 。 





(2) focusin 在 获得 焦点 的 元 素 上 触发 。 

(3) blur 在 失去 焦点 的 元 素 上 触发 。 

(4) DoMFocusout 在 失去 焦点 的 元 素 上 触发 。 

(5) focus 在 获得 焦点 的 元 素 上 触发 。 

(6) DOMFocusIn 在 获得 焦点 的 元 素 上 触发 。 

其 中 , blur、DOMFocusout 和 focusout 的 事件 目标 是 失去 焦点 的 元 素 , 而 focus、DOMFocusIn 
和 focusin 的 事件 目标 是 获得 焦点 的 元 素 。 


17.4.3 ”鼠标 和 滚轮 事件 


鼠标 事件 是 Web 开发 中 最 常用 的 一 组 事件 ， 这 是 因为 鼠标 是 用 户 的 主要 定位 设备 。DOM3 Events 
定义 了 9 种 鼠标 事件 。 
D click: 在 用 户 单 击 鼠 标 主键 (通常 是 左 键 ) 或 按键 盘 回 车 键 时 触发 。 这 主要 是 基于 无 障碍 的 考 
虑 ， 让 键盘 和 鼠标 都 可 以 触发 onclick 事件 处 理 程序 。 
D ablclick: 在 用 户 双击 鼠标 主键 (通常 是 左 键 ) 时 触发 。 这 个 事件 不 是 在 DOM2 Events 中 定义 
的 ， 但 得 到 了 很 好 的 支持 ，DOM3 Events 将 其 进行 了 标准 化 。 
D mousedown: 在 用 户 按 下 任意 鼠标 键 时 触发 。 这 个 事件 不 能 通过 键盘 触发 。 
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口 mouseenter: 在 用 户 把 鼠标 光标 从 元 素 外 部 移 到 元 素 内 部 时 触发 。 这 个 事件 不 冒 泡 ， 也 不 会 在 
光标 经 过 后 代 元 素 时 触发 .mouseenter 事件 不 是 在 DOM2 Events 中 定义 的 , 而 是 DOM3 Events 
中 新 增 的 事件 。 

口 mouseleave: 在 用 户 把 鼠标 光标 从 元 素 内 部 移 到 元 素 外 部 时 触发 。 这 个 事件 不 冒 泡 ， 也 不 会 在 
光标 经 过 后 代 元 素 时 触发 .mouseleave 事件 不 是 在 DOM2 Events 中 定义 的 , 而 是 DOM3 Events 
中 新 增 的 事件 。 

口 mousemove: 在 鼠标 光标 在 元 素 上 移动 时 反复 触发 。 这 个 事件 不 能 通过 键盘 触发 。 

口 mouseout : 在 用 户 把 鼠标 光标 从 一 个 元 素 移 到 另 一 个 元 素 上 时 触发 。 移 到 的 元 素 可 以 是 原始 元 

素 的 外 部 元 素 ， 也 可 以 是 原始 元 素 的 子 元 素 。 这 个 事件 不 能 通过 键盘 触发 。 

口 mouseover: 在 用 户 把 鼠标 光标 从 元 素 外 部 移 到 元 素 内 部 时 触发 。 这 个 事件 不 能 通过 键盘 触发 。 

口 mouseup: 在 用 户 释放 鼠标 键 时 触发 。 这 个 事件 不 能 通过 键盘 触发 。 

页 面 中 的 所 有 元 素 都 支持 鼠标 事件 。 除 了 mouseenter 和 mouseleave， 所 有 上 鼠标 事件 都 会 骨 泡 ， 

都 可 以 被 取消 ， 而 这 会 影响 浏览 器 的 默认 行为 。 

由 于 事件 之 间 存 在 关系 ， 因 此 取消 鼠标 事件 的 默认 行为 也 会 影响 其 他 事件 。 
比如 ,click 事件 触发 的 前 提 是 mousedown 事件 触发 后 , 紧 接着 又 在 同一 个 元 素 上 触发 了 mouseup 
事件 。 如 果 mousedown 和 mouseup 中 的 任意 一 个 事件 被 取消 , 那么 click 事件 就 不 会 触发 。 类 似 地 ， 

两 次 连续 的 cl ick 事件 会 导致 dplclick 事件 触发 ,只 要 有 任何 逻辑 阻止 了 这 两 个 click 事件 发 生 ( 比 

如 取消 其 中 一 个 click 事件 或 者 取消 mousedown 或 mouseup 事件 中 的 任 一 个 )，ablclick 事件 就 不 

会 发 生 。 这 4 个 事件 永远 会 按照 如 下 顺序 触发 : 


(1) mousedown 


































































































(2) mouseup 

(3) click 

(4) mousedown 

($5) mouseup 

(6) click 

(7) ablclick 

click 和 dblclick 在 触发 前 都 依赖 其 他 事件 触发 ,mousedown 和 mouseup 则 不 会 受 其 他 事件 影响 。 

IE8 及 更 早 版 本 的 实现 中 有 个 问题 ， 这 会 导致 双击 事件 跳 过 第 二 次 mousedown 和 click 事件 。 相 
应 的 顺序 变 成 了 : 


(1) mousedown 














(2) mouseup 

(3) click 

(4) mouseup 

(5) dblclick 

鼠标 事件 在 DOM3 Events 中 对 应 的 类 型 是 "MouseEvent"， 而 不 是 "MouseEvents"。 

鼠标 事件 还 有 一 个 名 为 滚轮 事件 的 子 类 别 。 滚轮 事件 只 有 一 个 事件 mousewheel, 反映 的 是 鼠标 滚 
轮 或 带 滚轮 的 类 似 设备 上 滚轮 的 交互 。 

1. 客户 端 坐标 

鼠标 事件 都 是 在 浏览 器 视 口 中 的 某 个 位 置 上 发 生 的 。 这 些 信息 被 保存 在 event 对 象 的 clientx 和 
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clientY 属性 中 。 这 两 个 属 履 








展示 了 视 口中 的 客户 端 坐标 。 


表示 事件 发 生 时 鼠标 光标 在 视 口 中 的 坐标 ， 所 有 浏览 器 都 支持 。 图 








17-4 


客户 端 视 口 
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图 17-4 


可 以 通过 下 面 的 方式 获取 鼠标 事件 的 客户 端 坐标 : 


let div = document .getElementById("myDiIv" ) ， 


div.addEventListener("click", 
console.log( “Client coordinates: S${event.clientx}, S${event.clientY}.); 


}); 





(event) => { 





这 个 例子 为 <aiv> 元 素 指 定 了 一 个 onclick 事件 处 理 程序 。 当 元 素 被 点 击 时 ,会 显示 事件 发 生 时 


鼠标 光标 在 客户 端 视 
上 的 位 置 。 
2. 页 面 坐标 








口中 的 坐标 。 注 


2 
忆 








客户 端 坐标 不 考虑 页 面 滚动 , 因此 这 两 个 值 并 不 代表 鼠标 在 页 面 


客户 端 坐标 是 事件 发 生 时 鼠标 光标 在 客户 端 视 口中 的 坐标 , 而 页 面 坐标 是 事件 发 生 时 鼠标 光标 在 页 


面 上 的 坐标 , 通过 











口 左边 与 上 边 的 距离 。 


可 以 像 下 面 这 样 取得 鼠标 事件 的 页 面 坐 标 : 


let div = document .getElementById ("myDiv"); 


div.addEventListener("click", 
console.log( .Page coordinates: 
让 


(event) 


总 
$s{event .pagex}, 





event 对 象 的 pagex 和 pageY 可 以 获取 ,这 两 个 属性 表示 鼠标 光标 在 页 面 上 的 位 置 ， 
因此 反映 的 是 光标 到 页 面 而 非 视 





$s{event .pageY}.); 
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在 页 面 没 有 滚动 时 ，pageXx 和 pageY 与 clientX 和 clientY 的 值 相 同 。 

IE8 及 更 早 版 本 没有 在 event 对 象 上 暴露 页 面 坐标 。 不 过 , 可 以 通过 客户 端 坐 标 和 滚动 信息 计算 出 
来 。 滚 动 信息 可 以 从 document .body (混杂 模式 ) 或 document .documentElement (标准 模式 ) 的 
scrollLeft 和 scrollTop 属性 获取 。 计 算 过 程 如 下 所 示 : 





let div = document .getElementById("myDiv"); 
div.addEventListener("click", (event) => { 
let pageX = event .pagexX, 
pageY = event .pageY; 
if (PageX === undefined) { 
pageX = event.clientX + (document.body.scrollLeft || 
document .documentElement .scrollLeft); 





J 
if (pageY === undefined) { 
pageY = event.clientY + (document.body.scrollTop || 
document .documentElement .scrollTop); 
} 
console.log(‘Page coordinates: S${pageXx}, S${pageY}.); 
小 总 


3. 屏幕 坐标 
鼠标 事件 不 仅 是 在 浏览 器 窗口 中 发 生 的 ， 也 是 在 整个 屏幕 上 发 生 的 。 可 以 通过 event 对 象 的 
screenX 和 screeny 属性 获取 鼠标 光标 在 屏幕 上 的 坐标 ,图 17-5 展示 了 浏览 器 中 触发 鼠标 事件 的 光标 
的 屏幕 坐标 。 
台 独 
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图 17-5 
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可 以 像 下 面 这 样 获 取 鼠 标 事件 的 屏幕 坐标 : 

















let div = document .getElementById("myDiv"); 
div.addEventListener("click", (event) => { 
console.log( Screen coordinates: S${event.screenx}, 


3 
与 前 国 

会 通过 控制 台 打 印 出 事件 的 屏幕 坐标 。 
4. 修饰 键 
































${event.screenY}. ) ， 





j 的 例子 类 似 ， 这 段 代码 也 为 <daiv> 元 素 指定 了 onclick 事件 处 理 程序 。 当 元 素 被 点 击 时 ， 








虽然 鼠标 事件 主要 是 通过 鼠标 触发 的 , 但 有 时 候 要 确定 用 户 想 实现 的 操作 ,还 要 考虑 键盘 按键 的 状 


态 。 键盘 上 的 修饰 键 Shift、Ctrl、Alt 和 Meta 经 常用 于 修改 鼠标 事件 的 行为 。DOM 规定 了 4 个 











示 这 几 个 修饰 键 的 状态 : shiftKey、ctrlKev、altKev 和 metaKev。 这 几 属 性 会 在 各 自 对 应 
键 被 按 下 时 包含 布尔 值 true， 没 有 被 按 下 时 包含 false。 在 鼠标 事件 发 生 的 ， 可 以 通过 这 几 个 
检测 修饰 键 是 否 被 按 下 。 来 看 下 面 的 例子 ， 其 中 在 cli ck 事件 发 生 时 检测 了 每 个 修饰 键 的 状态 : 











let div = document .getElementById("myDiv"); 
div.addEventListener("click", (event) => { 
let keys = new Array(); 
二 下 t.shiftRKey) { 
h("shift"); 


(even 
keys .pus 


t.ctrlKkey) { 
FE 


(even 
keys .pus 


(event.altKey) { 
keys .Push("alt") 











(event .metaKey) { 
keys .push ("meta"); 
} 

console.log("Keys: " + keys.join(",")); 


})3 











属性 来 表 





的 修饰 








在 这 个 例子 中 ，onclick 事件 处 理 程序 检查 了 不 同 修饰 键 的 状态 。keys 数组 中 包含 了 在 事件 发 生 








时 被 按 下 的 修饰 键 的 名 称 。 
理 程 序 会 输出 所 有 键 的 名 称 。 








:土生 
壮 尽 


现代 浏览 器 支持 所 有 这 4 个 修饰 键 。IE8 及 更 早 版 本 不 支持 metaKey 属性 。 


每 个 对 应 属性 为 true 的 修饰 键 的 名 称 都 会 添加 到 keys 中 。 最 后 ， 事 件 处 





5. 相关 元 素 


对 mouseover 和 mouseout 事件 而 言 ， 还 存在 与 事件 相关 的 其 他 元 素 。 这 两 个 事 从 











都 涉及 从 一 个 


元 素 的 边界 之 内 把 光标 移 到 另 一 个 元 素 的 边界 之 内 。 对 mouseover 事件 来 说 ， 事 件 的 主要 目标 是 获得 





光标 的 元 素 ， 相 关 元 素 是 失去 光标 的 元 素 。 类 似 地 ， 对 mouseout 
标的 元 素 ， 而 相关 元 素 是 获得 光标 的 元 素 。 来 看 下 面 的 例子 : 














事件 来 说 , 事件 的 主要 








目标 是 失去 光 
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<1DOCTYPE html> 
<html> 
<head> 
<title>Related Elements Example</title> 
</head> 
<body> 
<div id="myDiv" 
style="background-color:red;height:100px;width:100px;"></div> 
</body> 
</html> 
这 个 页 面 中 上 只 包含 一 个 <div> 元 素 。 如 果 光 标 开 始 在 <div> 元 素 上 ， 然 后 从 它 上 面 移出 ， 则 <aiv> 
元 素 上 会 触发 mouseout 事件 , 相关 元 素 为 <body> 元 素 。 与 此 同时 ，<lbody> 元 素 上 会 触发 mouseover 
事件 ， 相 关 元 素 是 <aiv> 元 素 。 
DOM 通过 event 对 象 的 relatedTarget 属性 提供 了 相关 元 素 的 信息 。 这 个 属性 只 有 在 mouseover 
和 mouseout 事件 发 生 时 才 包 含 值 ， 其 他 所 有 事件 的 这 个 属性 的 值 都 是 nul1。IE8 及 更 早 版 本 不 支持 
relatedTarget 属性 , 但 提供 了 其 他 的 可 以 访问 到 相关 元 素 的 属性 。 在 mouseover 事件 触发 时 ， 匡 
会 提供 fromElement 属性 ， 其 中 包含 相关 元 素 。 而 在 mouseout 事件 触发 时 ，IE 会 提供 toElement 
属性 ， 其 中 包含 相关 元 素 。( IE9 支持 所 有 这 些 属性 。) 因此 ， 可 以 在 EventUtil 中 增加 一 个 通用 的 获 
取 相 关 属 性 的 方法 : 


var EventUtil = { 












































山中 
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// 其 他 代码 


getRelatedTarget: function(event) { 
if (event.relatedTarget) { 
return event.relatedTarget; 
} else if (event.toElement) { 
return event.toElement; 
} else if (event.fromElement) { 
return event.fromElement; 
} else { 
return null; 
} 
}, 


// 其 他 代码 


}; 
与 前 面 介 绍 的 其 他 跨 浏览 器 方法 一 样 ， 这 个 方法 同样 使 用 特性 检测 来 确定 要 返回 哪个 值 。 可 以 像 下 
面 这 样 使 用 EventUtil.getRelatedTarget () 方 法 : 
let div = document .getElementById ("myDiv"); 
div.addEventListener("mouseout", (event) => { 
let target = event.target; 
let relatedTarget = EventUtil.getRelatedTarget (event); 
console.logl( 
‘Moused out of S${target.tagName} to S${relatedTarget .tagName}. ); 
有 
这 个 例子 在 <aiv> 元 素 上 注册 了 mouseout 事件 处 理 程序 。 当 事件 触发 时 ， 就 会 打印 出 一 条 消息 说 
明 鼠 标 从 哪个 元 素 移出 ， 移 到 了 哪个 元 素 上 。 
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6. 鼠标 按键 


只 有 在 元 素 上 单 击 鼠标 主键 ( 或 按 下 键盘 上 的 回 车 键 ) 时 click 事件 才 会 触发 ， 因 此 按键 信息 并 
不 是 必需 的 。 对 mousedown 和 mouseup 事件 来 说 ，event 对 象 上 会 有 一 个 button 属性 , 表示 按 下 或 
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释放 的 是 哪个 按键 。DOM 为 这 个 putton 属性 定义 了 3 个 值 : 0 表示 鼠标 主键 、!1 表示 鼠标 中 键 (通常 
也 是 滚轮 键 )、2 表示 鼠标 副 键 。 按 照 惯例 ， 鼠 标 主键 通常 是 左边 的 按键 ， 副 键 通常 是 右边 的 按键 。 
IE8 及 更 早 版 本 也 提供 了 button 属性 ， 但 这 个 属性 的 值 与 前 面 说 的 完全 不 同 : 

























































































口 0， 表 示 没 有 按 下 任何 键 ; 
口 1， 表 示 按 下 鼠标 主键 ; 
口 2， 表 示 按 下 鼠标 副 键 ; 








口 3， 表 示 同 时 按 下 鼠标 主键 、 副 键 ; 
口 4， 表 示 按 下 鼠标 中 键 ; 





口 5， 表 示 同 时 按 下 鼠标 主键 和 中 键 ; 
































口 6， 表 示 同 时 按 下 鼠标 副 键 和 中 键 ; 
口 7， 表 示 同 时 按 下 3 个 键 。 
很 显然 , DOM 定义 的 putton 属性 比 下 这 一 套 更 简单 也 更 有 用 ， 毕 竟 同 时 按 多 个 鼠标 键 的 情况 很 























少见 。 为 此 ， 实 践 中 基本 上 都 以 DOM 的 putton 属性 为 准 ， 这 是 因为 除 IE8 及 更 早 版 本 外 的 所 有 主流 














浏览 器 都 原生 支持 。 主 、 








、 副 键 的 定义 非常 明确 ,而 IE 定义 的 其 他 情形 都 可 以 翻译 为 按 下 其 中 某 个 





键 ， 而 且 优 先 翻译 为 主键 。 比 如 ,下 返回 5 或 7 时 ， 台 会 对 应 到 DOM 的 0。 








7. 额外 事件 信息 














DOM2 Events 规范 在 sevent 对 象 上 提供 了 aetail 属性 ， 以 给 出 关于 事件 的 更 多 信息 。 对 鼠标 事 
件 来 说 ，detail 包含 一 个 数值 ， 表 示 在 给 定位 置 上 发 生 了 多 少 次 单 击 。 单 击 相当 于 在 同一 个 像素 上 发 
生 一 次 mousedown 紧 跟 一 次 mouseupo。detail 的 值 从 1 开始 ,每 次 单 击 会 加 1。 如 果 鼠 标 在 mousedown 
和 mouseup 之 间 移 动 了 ， 则 qetail 会 重 置 为 0。 













































































IE 还 为 每 个 鼠标 事件 提供 了 以 下 额外 信息 : 


true); 








也 是 true )。 


口 offsetx， 光 标 相对 于 目标 元 素 边界 的 x 坐标 ; 
口 offsetY， 光 标 相对 于 目标 元 素 边 界 的 y 坐标 ; 
口 shiftLeft, 布尔 值 ， 表 示 是 否 按 下 了 左 Shift 键 (如 果 shiftLeft 是 true， 那么 shiftKey 























口 altLeft ,布尔 值 ,表示 是 否 按 下 了 左 Alt 键 ( 如果 altLeft 是 true, 那 么 altKey 也 是 true ); 
口 ctrliLeft，, 布尔 值 ， 表 示 是 否 按 下 了 左 Ctrl 键 ( 如果 ctrlLeft 是 true,， 那么 ctrliKey 也 是 
















































































这 些 属性 的 作用 有 限 ， 这 是 因为 只 有 正 支持。 而 且 ， 它 们 提供 的 信息 要 么 没 必要 ， 要 么 可 以 通过 




















其 他 方式 计算 。 


8. mousewheel 事件 




















IE6 首先 实现 了 mousewheel 事件 。 之 后 ，Opera 、Chrome 和 Safari 也 跟着 实现 了 。mousewheel 
事件 会 在 用 户 使 用 鼠标 滚轮 时 触发 , 包括 在 垂直 方向 上 任意 滚动 。 这 个 事件 会 在 任何 元 素 上 触发 , 并 (在 
IE8 中 ) 冒 泡 到 aocument 和 (在 所 有 现代 浏览 器 中 ) window。mousewheel 事件 的 event 对 象 包含 




















鼠标 事件 的 所 有 标准 信息 ， 
































此 外 还 有 一 个 名 为 wheelDelta 的 新 属性 。 当 鼠标 滚轮 向 前 滚动 时 ， 


wheelDelta 每 次 都 是 +120; 而 当 鼠 标 滚 轮 向 后 滚动 时 ，wheelDelta 每 次 都 是 -120 ( 见 图 17-6 )。 
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一 120 十 120 
一 
图 17-6 
可 以 为 页 面 上 的 任何 元 素 或 文档 添加 onmousewheel 事件 处 理 程序 ， 以 处 理 所 有 鼠标 滚轮 交互 ， 
比如 : 
document .addEventListener("mousewheel", (event) => { 


console.log(event .wheelDelta); 


2 
这 个 例子 简单 地 显示 了 鼠标 滚轮 事件 触发 时 wheelDelta 的 值 。 多 数 情况 下 只 需 知道 滚轮 滚动 的 方 
向 ， 而 这 通过 wheelDelta 值 的 符号 就 可 以 知道 。 





注意 HTML5 也 增加 了 mousewheel 事件 ， 以 反映 大 多 数 浏览 器 对 它 的 支持 。 





9. 触摸 屏 设备 
iOS 和 Android 等 触摸 屏 设备 的 实现 大 相 径 庭 ， 因 为 触摸 屏 通常 不 支持 鼠标 操作 。 在 为 触摸 屏 设 备 
开发 时 ， 要 记 住 以 下 事项 。 

口 不 支持 ablclick 事件 。 双 击 浏 览 器 窗口 可 以 放大 ， 但 没有 办 法 覆盖 这 个 行为 。 

口 单 指 点 触 屏幕 上 的 可 点 击 元 素 会 触发 mousemove 事件 。 如 果 操 作 会 导致 内 容 变 化 ， 则 不 会 再 触 
发 其 他 事件 。 如 果 屏 幕 上 没有 变化 ， 则 会 相继 触发 mousedown、mouseup 和 click 事件 。 点 
触 不 可 点 击 的 元 素 不 会 触发 事件 。 可 点 击 元 素 是 指点 击 时 有 默认 动作 的 元 素 ( 如 链接 ) 或 指定 
了 onclick 事件 处 理 程序 的 元 素 。 

口 mousemove 事件 也 会 触发 mouseover 和 mouseout 事件 。 

口 双 指 点 触 屏 幕 并 滑动 导致 页 面 滚动 时 会 触发 mousewheel 和 scroll 事件 。 

10. 无 障碍 问题 
如 果 Web 应 用 或 网 站 必须 考虑 残障 人 士 ， 特 别 是 使 用 屏幕 阅读 器 的 用 户 ， 那 么 必须 小 心 使 用 鼠标 

有 件 。 如 前 所 述 ， 按 回 车 键 可 以 触发 click 事件 ,但 其 他 鼠标 事件 不 能 通过 键盘 触发 。 因 此 ， 建 议 不 

要 使 用 click 事件 之 外 的 其 他 鼠标 事件 向 用 户 提示 功能 或 触发 代码 执行 ， 这 是 因为 其 他 鼠标 事件 会 严 

格 妨碍 盲人 或 视 障 用 户 使 用 。 以 下 是 几 条 使 用 鼠标 事件 时 应 该 遵循 的 无 障碍 建议 。 

口 使 用 click 事件 执行 代码 。 有 人 认为 ， 当 使 用 onmousedown 执行 代码 时 ， 应 用 程序 会 运行 
更 快 。 对 视力 正常 用 户 来 说 确实 如 此 。 但 在 屏幕 阅读 器 上 ， 这 样 会 导致 代码 无 法 执行 ， 这 是 因 
为 屏幕 阅读 器 无 法 触发 mousedown 事件 。 
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口 不 要 使 用 mouseover 向 用 户 显示 新 选项 。 同样 , 原因 是 屏幕 阅读 器 无 法 触发 mousedown 事件 。 
如 果 必 须要 通过 这 种 方式 显示 新 选项 ， 那 么 可 以 考虑 显示 相同 信息 的 键盘 快捷 键 。 

口 不 要 使 用 dblclick 执行 重要 的 操作 ， 这 是 因为 键盘 不 能 触发 这 个 事件 。 

遵循 这 些 简单 的 建议 可 以 极 大 提升 Web 应 用 或 网 站 对 残障 人 士 的 无 障碍 性 。 
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注意 要 了 解 更 多 关于 网 站 无 障碍 的 信息 ， 可 以 参考 WebAIM 网 站 。 





17.4.4 键盘 与 输入 事件 


键盘 事件 是 用 户 操作 键盘 时 触发 的 。DOM2 Events 最 初 定义 了 键盘 事件 ,但 该 规范 在 最 终 发 布 前 删 
除了 相应 内 容 。 因 此 ， 键 盘 事 件 很 大 程度 上 是 基于 原始 的 DOM0 实现 的 。 

DOM3 Events 为 键盘 事件 提供 了 一 个 首先 在 正 9 中 完全 实现 的 规范 .其 他 浏览 器 也 开始 实现 该 规范 ， 
但 仍然 存在 很 多 遗留 的 实现 。 

键盘 事件 包含 3 个 事件 : 
口 keydown ， 用 户 按 下 键盘 上 某 个 键 时 触发 ， 而 且 持续 按 住 会 重复 触发 。 
口 keypress， 用 户 按 下 键盘 上 某 个 键 并 产生 字符 时 触发 ， 而 且 持续 按 住 会 重复 触发 。Esc 键 也 会 
触发 这 个 事件 。DOM3 Events 废弃 了 keypress 事件 ， 而 推荐 textInput 事件 。 
口 keyup， 用 户 释 放 键 盘 上 某 个 键 时 触发 。 

虽然 所 有 元 素 都 支持 这 些 事件 ， 但 当 用 户 在 文本 框 中 输入 内 容 时 最 容易 看 到 。 

输入 事件 只 有 一 个 ， 即 text Input。 这 个 事件 是 对 keypress 事件 的 扩展 ， 用 于 在 文本 显示 给 用 
户 之 前 更 方便 地 截获 文本 输入 。textInput 会 在 文本 被 插入 到 文本 框 之 前 触发 。 

当 用 户 按 下 键盘 上 的 某 个 字符 键 时 ， 首 先 会 触发 keydown 事件 ， 然 后 触发 keypress 事件 ， 最 后 
触发 keyup 事件 。 注 意 ， 这 里 keydown 和 keypress 事件 会 在 文本 框 出 现 变 化 之 前 触发 ， 而 keyup 
事件 会 在 文本 框 出 现 变化 之 后 触发 。 如 果 一 个 字符 键 被 按 住 不 放 ，keydown 和 keypress 就 会 重复 触 
发 ， 直 到 这 个 键 被 释放 。 

对 于 非 字 符 键 ， 在 键盘 上 按 一 下 这 个 键 ， 会 先 触 发 keydqown 事件 ， 然 后 触发 keyup 事件 。 如 果 按 
住 某 个 非 字符 键 不 放 ， 则 会 重复 触发 xeyaown 事件 ， 直 到 这 个 刍 被 释放， 此 时 会 触发 xeyup 事件 。 
















































































































































































注意 ”键盘 事件 支持 与 鼠标 事件 相同 的 修饰 键 shiftKey、\ctrlIKey、\altKey 和 metaKey 





属性 在 键盘 事件 中 都 是 可 用 的 。IE8 及 更 时 版 本 不 支持 metaKey 属性 。 





1. 键 码 

对 于 keydown 和 keyup 事件 ，event 对 象 的 keycode 属性 中 会 保存 一 个 键 码 ， 对 应 键盘 上 特定 
的 一 个 键 。 对 于 字母 和 数字 键 ，keycode 的 值 与 小 写字 母 和 数字 的 ASCII 编码 一 致 。 比 如 数字 7 键 的 
keyCode 为 $$， 而 字母 A 键 的 keycode 为 65, 而 且 跟 是 否 按 了 Shift 键 无 关 。DOM 和 正 的 event 对 
象 都 支持 keycode 属性 。 下 面 这 个 例子 展示 了 如 何 使 用 keycode 属性 : 


let textbox = document .getElementById ("myText" ) : 
textbox.addEventListener("keyup", (event) => { 
console.log(event.keyCode); 


用 
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这 个 例子 在 keyup 事件 触发 时 直接 显示 出 event 对 象 的 keycode 属性 值 。 下 表 给 出 了 键盘 上 所 
有 非 字 符 键 的 键 码 。 


























键 键 码 键 键 码 
Backspace 8 数字 键盘 8 104 
Tab 9 数字 键盘 9 105 
Enter 13 数字 键盘 + 107 
Shift 16 减 号 (包含 数字 和 非 数 字 键 盘 ) 109 
Ctrl 17 数字 键盘 . 110 
Alt 18 数字 键盘 / 111 
Pause/Break 19 Fl 112 
Caps Lock 20 F2 113 
Esc 27 F3 114 
Page Up 33 F4 115 
Page Down 34 FS 116 
End 35 F6 117 
Home 36 F7 118 
左 箭头 Eg F8 119 
上 箭头 38 F9 120 
右 箭头 39 F10 121 
下 箭头 40 Fl11 122 
Ins 45 F12 123 
Del 46 Num Lock 144 
左 Windows 91 Scroll Lock 145 
右 Windows 92 分 号 (IE/Safari/Chrome ) 186 
Context Menu 93 分 号 ( Opera/FF ) 59 
数字 键盘 0 96 小 于 号 188 
数字 键盘 1 97 大 于 号 190 
数字 键盘 2 98 反 斜 村 191 
数字 键盘 3 99 重音 符 (.) 192 
数字 键盘 4 100 等 于 号 61 
数字 键盘 5 101 左 中 括号 219 
数字 键盘 6 102 反 斜 杠 (\) 220 
数字 键盘 7 103 右 中 括号 221 
单 引号 222 








2. 字符 编码 

在 keypress 事件 发 生 时 , 意味 着 按键 会 影响 屏幕 上 显示 的 文本 。 对 插入 或 移 除 字符 的 键 ， 所 有 浏 
览 器 都 会 触发 keypress 事件 ， 其 他 键 则 取决 于 浏览 器 。 因 为 DOM3 Events 规范 才刚 刚 开 始 实现 ， 所 
以 不 同 浏览 器 之 间 的 实现 存在 显著 差异 。 

浏览 器 在 event 对 象 上 支持 charcode 属性 , 只 有 发 生 keypress 事件 时 这 个 属性 才 会 被 设置 值 ， 
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包含 的 是 按键 字符 对 应 的 ASCII 编码 。 通 常 ，charcoge 属性 的 值 是 0， 在 keypress 事件 发 生 时 则 是 
对 应 按键 的 键 码 。IE8 及 更 早 版 本 和 Opera 使 用 keyCode 传达 字符 的 ASCII 编码 。 要 以 跨 浏览 器 方式 获 
取 字 符 编码 ， 首 先 要 检查 charcode 属性 是 否 有 值 ， 如 果 没 有 再 使 用 keycode， 如 下 所 示 : 






























































Var EventUtil = { 
// 其 他 代码 
getCharCode: function(event) { 
if (typeof event.charCode == "number") { 
return event.charCode; 
} else { 


return event.keyCode; 
} 
}, 


// 其 他 代码 
这 个 方法 检测 charcode 属性 是 否 为 数值 ( 在 不 支持 的 浏览 器 中 是 undefined )。 如 果 是 数值 ， 则 
回 。 和 否则 ， 返 回 keycoge 值 。 可 以 像 下 面 这 样 使 用 : 


let textbox = document .getElementById("myText"); 
textbox.addEventListener("keypress", (event) => { 
console.log(EventUtil.getCharCode (event ) ) ， 

人 


一 旦 有 了 字母 编码 ， 就 可 以 使 用 string.fromCharCode() 方法 将 其 转换 为 实际 的 字符 了 。 

3. DOM3 的 变化 

尽管 所 有 浏览 器 都 实现 了 某 种 形式 的 键盘 事件 ，DOM3 Events 还 是 做 了 一 些 修 改 。 比 如 ，DOM3 
Events 规范 并 未 规定 cnarcode 属性 ， 而 是 定义 了 key 和 char 两 个 新 属性 。 

其 中 ，key 属性 用 于 替代 keycode， 且 包含 字符 串 。 在 按 下 字符 键 时 ，key 的 值 等 于 文本 字符 ( 如 
“k” 或 “M”); 在 按 下 非 字符 键 时 ，key 的 值 是 键 名 (如 “Shift” 或 “ArrowDown”)。chaz 属性 在 按 
下 字符 键 时 与 key 类 似 ， 在 按 下 非 字 符 键 时 为 nul1l。 

IE 支持 key 属性 但 不 支持 char 属性 。Safari 和 Chrome 支持 keyIdentifier 属性 ， 在 按 下 非 字 
符 键 时 返回 与 key 一 样 的 值 (如 “Shift”)。 对 于 字符 键 ，keyIdentifier 返回 以 “U+0000” 形 式 表 示 
Unicode 值 的 字符 串 形式 的 字符 编码 。 


let textbox = document .getElementById("myText");} 
textbox.addEventListener("keypress", (event) => { 
let identifier = event.key || event.keyIdentifier; 
if (identifier) { 
console.log(identifier); 
} 
Ps 


由 于 缺乏 跨 浏览 器 支持 ， 因 此 不 建议 使 用 key、keyIdentifier、 和 char。 

DOM3 Events 也 支持 一 个 名 为 location 的 属性 , 该 属性 是 一 个 数值 ， 表 示 是 在 哪里 按 的 键 。 可 能 
的 值 为 : 0 是 默认 键 ，1 是 左边 ( 如 左边 的 Alt 键 )，2 是 右边 ( 如 右边 的 Shift 键 )，3 是 数字 键盘 ，4 是 
移动 设备 ( 即 虚拟 键盘 )，5 是 游戏 手柄 ( 如 任天堂 Wii 控制 器 )。IE9 支持 这 些 属性 。Safari 和 Chrome 
支持 一 个 等 价 的 keyLocation 属性 ， 但 由 于 实现 有 问题 ， 这 个 属性 值 始终 为 0， 除 非 是 数字 键盘 (此 
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时 值 为 3 )， 值 永远 不 会 是 1、2、4、5。 


let textbox = document .getElementById("myText"); 


textbox.addEventListener("keypress", (event) => { 
let loc = event.location || event.keyLocation; 
if (loc) { 


console.log(loc); 
} 
es 


与 key 属性 类 似 ，1ocation 属性 也 没有 得 到 广泛 支持 ， 因 此 不 建议 在 跨 浏览 器 开发 时 使 用 。 
最 后 一 个 变化 是 给 event 对 象 增 加 了 getModifierstate() 方 法 。 这 个 方法 接收 一 个 参数 ,一 个 
等 于 shift、Control、Alt、AltGraph 或 Meta 的 字符 串 ， 表 示 要 检测 的 修饰 键 。 如 果 给 定 的 修饰 
键 处 于 激活 状态 〈 键 被 按 住 )， 则 方法 返回 true， 否 则 返回 false: 
let textbox = document .getElementById("myText"); 
textbox.addEventListener("keypress", (event) => { 
if (event .getModifierState) { 
console.log(event .getModifierstate("Shift")); 


} 
ee 






































当然 ，event 对 象 已 经 通过 shiftKkey、altKey、ctrlKey 和 metaKey 属性 暴露 了 这 些 信息 。 








4. textInput 事件 
DOM3 Events 规范 增加 了 一 个 名 为 textInput 的 事件 ， 其 在 字符 被 输入 到 可 编辑 区 域 时 触发 。 作 
为 对 keypress 的 替代 ，textInput 事件 的 行为 有 些 不 一 样 。 一 个 区 别 是 keypress 会 在 任何 可 以 获 



































得 焦点 的 元 素 上 触发 ， 而 textInput 只 在 可 编辑 区 域 上 触发 。 另 一 个 区 别 是 textInput 只 在 有 新 字 
符 被 插入 时 才 会 触发 ， 而 keypress 对 任何 可 能 影响 文本 的 键 都 会 触发 (包括 退 格 键 )。 

















因为 textInput 事件 主要 关注 字符 ， 所 以 在 event 对 象 上 提供 了 一 个 aata 属性 ,包含 要 插入 的 
字符 ( 不 是 字符 编码 )。 aata 的 值 始终 是 要 被 插入 的 字符 ， 因 此 如 果 在 按 S 键 时 没有 按 Shift 键 ，gdata 
的 值 就 是 "s"， 但 在 按 S 键 时 同时 按 Shift 键 ，aata 的 值 则 是 "s"。 

textInput 事件 可 以 这 样 来 用 : 


let textbox = document .getElementById("myText"); 

textbox.addEventListener("textInput", (event) => { 
console.log(event .data); 

}); 


这 个 例子 会 实时 把 输入 文本 框 的 文本 通过 日 志 打 印 出 来 。 
event 对 象 上 还 有 一 个 名 为 inputMethoad 的 属性 , 该 属性 表示 向 控件 中 输入 文本 的 手段 。 可 能 的 

值 如 下 : 

口 0， 表 示 浏 览 器 不 能 确定 是 什么 输入 手段 ; 

口 1 ， 表 示 键 盘 ; 

口 2， 表 示 粘 贴 ; 

口 3， 表 示 拖 放 操 作 ; 

口 4， 表 示 IME; 

口 5， 表 示 表 单 选项 ; 

口 6， 表 示 手 写 ( 如 使 用 手写 笔 ); 

口 7， 表 示 语 音 ; 
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口 8 ， 表 示 组 合 方式 ; 
口 9， 表 示 脚 本 。 
使 用 这 些 属性 ， 可 以 确定 用 户 是 如 何 将 文本 输入 到 控件 


5. 设备 上 的 键盘 事件 




















! 的 ， 从 而 可 以 辅助 验证 。 
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任天堂 Wi 会 在 用 户 按 下 Wi 遥控 絮 上 的 键 时 触发 键盘 事件 ,虽然 不 能 访问 Wi 遥控 器 上 所 有 的 键 ， 
但 其 中 一 些 键 可 以 触发 键盘 事件 。 图 17-7 中 标识 出 了 某 些 键 的 键 码 。 


























(不 可 用 ) 
































如 图 所 示 ， 按 下 十 字 键 (175~178 )、 减 号 键 (170 )、 加 号 键 (174 )、1 ( 172 ) 或 2 (173 ) 按钮 会 
触发 键盘 事件 。 无 法 判断 电源 键 、A、B 或 Home 键 是 否 已 按 下 。 


17.4.5 ”合成 事件 


合成 事件 是 DOM3 Events 中 新 增 的 ， 用 于 处 理 通 常 使 用 IME 输入 时 的 复杂 输入 序列 。IME 可 以 让 
用 户 输入 物理 键盘 上 没有 的 字符 。 例 如 ， 使 用 拉丁 字母 键盘 的 用 户 还 可 以 使 用 IME 输入 日 文 。IME 通 
常 需要 同时 按 下 多 个 键 才能 输入 一 个 字符 。 合 成 事件 用 于 检测 和 控制 这 种 输入 。 合 成 事件 有 以 下 3 种 : 
口 compositionstart， 在 IME 的 文本 合成 系统 打开 时 触发 ， 表 示 输 入 即将 开始 ; 
口 compositionupdate， 在 新 字符 插入 输入 字段 时 触发 ; 
口 compositionend， 在 IME 的 文本 合成 系统 关闭 时 触发 ， 表 示 恢 复 正 常 键盘 输入 。 

合成 事件 在 很 多 方面 与 输入 事件 很 类 似 。 在 合成 事件 触发 时 ， 事 件 目标 是 接收 文本 的 输入 字段 。 唯 
一 增加 的 事件 属性 是 saata， 其 中 包含 的 值 视 情况 而 异 : 
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口 在 compositionstart 事件 中 ,包含 正在 编辑 的 文本 (例如 ,已 经 选择 了 文本 但 还 没 替换 ); 
口 在 compositionupdate 事件 中 ,包含 要 插入 的 新 字符 ; 

口 在 compositionend 事件 中 ,包含 本 次 合成 过 程 中 输入 的 全 部 内 容 。 

与 文本 事件 类 似 ， 合 成 事件 可 以 用 来 在 必要 时 过 滤 输 入 内 容 。 可 以 像 下 面 这 样 使 用 合成 事件 : 


let textbox = document .getElementById("myText"); 

textbox.addEventListener("compositionstart", (event) => { 
console.log(event .data); 

}); 

textbox.addEventListener("compositionupdate", (event) => { 
console.log(event .data); 

}); 

textbox.addEventListener("compositionend", (event) => { 
console.log(event .data); 

}); 












































17.4.6 ”变化 事件 


DOM2 的 变化 事件 ( Mutation Events ) 是 为 了 在 DOM 发 生变 化 时 提供 通知 。 

















注意 ”这些 事 件 已 经 被 废弃 ， 浏 览 器 已 经 在 有 计划 地 停止 对 它们 的 支持 。 变 化 事件 已 经 被 


Mutation Observers 所 取代 ， 可 以 参考 第 14 章 中 的 介绍 。 





17.4.7 HTML5 事件 


DOM 规范 并 未 涵盖 浏览 器 都 支持 的 所 有 事件 。 很 多 浏览 器 根据 特定 的 用 户 需 求 或 使 用 场景 实现 了 
自 定义 事件 。HTML5 详尽 地 列 出 了 浏览 器 支持 的 所 有 事件 。 本 节 讨 论 HTML5 中 得 到 浏览 器 较 好 支持 
的 一 些 事件 。 注 意 这 些 并 不 是 浏览 器 支持 的 所 有 事件 。( 本 书后 面 也 会 涉及 一 些 其 他 事件 。) 

1. contextmenu 事件 

Windows 95 通过 单 击 鼠标 右键 为 PC 用 户 增加 了 上 下 文 菜单 的 概念 。 不 久 , 这 个 概念 也 在 Web 上 得 
以 实现 。 开 发 者 面临 的 问题 是 如 何 确 定 何 时 该 显示 上 下 文 菜 单 (在 Windows 上 是 右 击 鼠标 ， 在 Mac 上 
是 Ctrl+ 单 击 )， 以 及 如 何 避 免 默 认 的 上 下 文 菜单 起 作用 。 结 果 就 出 现 了 contextmenu 事件 ， 以 专门 用 
于 表示 何 时 该 显示 上 下 文 菜单 ， 从 而 允许 开发 者 取消 默认 的 上 下 文 菜 单 并 提供 自 定义 菜单 。 

contextmenu 事件 冒 泡 ， 因 此 只 要 给 document 指定 一 个 事件 处 理 程序 就 可 以 处 理 页 面 上 的 所 有 
同类 事件 。 事 件 目 标 是 触发 操作 的 元 素 。 这 个 事件 在 所 有 浏览 咒 中 都 可 以 取消 ， 在 DOM 合 规 的 浏览 
中 使 用 event .preventDefault () ， 在 IE8 及 更 早 版 本 中 将 event .returnValue 设置 为 false。 
contextmenu 事件 应 该 算 一 种 鼠标 事件 ， 因 此 event 对 象 上 的 很 多 属性 都 与 光标 位 置 有 关 。 通 常 ， 自 
定义 的 上 下 文 菜单 都 是 通过 oncontextmenu 事件 处 理 程序 触发 显示 ， 并 通过 onclick 事件 处 理 程序 
触发 隐藏 的 。 来 看 下 面 的 例子 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>ContextMenu Event Example</title> 
</head> 
<body> 
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<div id="myDiv">Right click or Ctrl+click me to get a custom context menu. 
Click anywhere else to get the default context menu.</div> 
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color: 
silver"> 
<li><a href="http://www.somewhere.com"> somewhere</a></1i> 
<li><a href="http://ww.wrox.com">Wrox site</a></1i> 
<l1i><a href="http://www.somewhere-else.com">somewhere-else</a></1i> 
</ul> 
</body> 
</html> 


这 个 例子 中 的 <aiv> 元 素 有 一 个 上 下 文 菜单 <ul>。 作 为 上 下 文 菜单 ，<ul> 元 素 初 始 时 是 隐藏 的 。 
以 下 是 实现 上 下 文 菜单 功能 的 JavaScript 代码 : 


window.addEventListener("load", (event) => { 
let div = document .getElementById ("myDiv"); 








div.addEventListener("contextmenu", (event) => { 
event .preventDefault (); 


let menu = document .getElementById ("myMenu"); 
menu.style.left = event.clientXx + "px"; 
menu.style.top = event.clientyY + "px"; 


menu.style.visibility = "visible"; 
} 
document .addEventListener("click", (event) => { 


document .getElementById("myMenu") .style.visibility = "hidden"; 
> 
用。 


这 里 在 <div> 元 素 上 指定 了 一 个 oncontextmenu 事件 处 理 程序 。 这 个 事件 处 理 程序 首先 取消 默认 
行 ,确保 不 会 显示 浏览 器 默认 的 上 下 文 菜单 。 接 着 基于 event 对 象 的 clientX 和 clienty 属性 把 <ul> 
元 素 放 到 适当 位 置 。 最 后 一 步 通过 将 visibility 属性 设置 为 "visible" 让 自 定义 上 下 文 菜单 显示 出 
来 。 另外， 又 给 aocument 添加 了 一 个 onclick 事件 处 理 程序 ， 以 便 在 单 击 事件 发 生 时 隐藏 上 下 文 菜 
单 (系统 上 下 文 菜 单 就 是 这 样 隐 藏 的 )。 






























































虽然 这 个 例子 很 简单 ,但 它 是 网 页 中 所 有 自 定 义 上 下 文 菜单 的 基础 。 在 这 个 简单 例子 的 基础 上 ,再 
添加 一 些 CSS， 上 下 文 莱 单 就 会 更 漂亮 。 

2. beforeunload 事件 

beforeunload 事件 会 在 window 上 触发 ,用 意 是 给 开发 者 提供 阻止 页 面 被 抒 载 的 机 会 。 这 个 事件 
会 在 页 面 即将 从 浏览 器 中 缉 载 时 触发 ， 如 果 页 面 需 要 继续 使 用 ， 则 可 以 不 被 抒 载 。 这 个 事件 不 能 取消 ， 
否则 就 意味 着 可 以 把 用 户 永久 阻拦 在 一 个 页 面 上 。 相 反 ， 这 个 事件 会 向 用 户 显 示 一 个 确认 框 ， 其 中 的 消 
息 表 明 浏 览 右 即将 伸 载 页 面 ， 并 请 用 户 确认 是 希望 关闭 页 面 ， 还 是 继续 留 在 页 面 上 ( 见 图 17-8 )。 




































































Confirm 


9 ) Are you sure you want to navigate away from this page? 
站 


Tm really going to miss you if you go， 


Press OK to continue, or Cancel to stay on the current page， 





图 17-8 
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为 了 显示 类 似 图 17-8 的 确认 框 ， 需 要 将 event .returnvalue 设置 为 要 在 确认 框 中 显示 的 字符 串 
(对 于 IE 和 Firefox 来 说 )， 并 将 其 作为 函数 值 返 回 (对 于 Safari 和 Chrome 来 说 )， 如 下 所 示 : 


window.addEventListener("beforeunload", (event) => { 
let message = "I'm really going to miss you if you go."; 
event .returnValue = message; 
return message; 


es 


























3. DOMContentLoaded 事件 

window 的 1oad 事件 会 在 页 面 完 全 加 载 后 触发 ， 因 为 要 等 待 很 多 外 部 资源 加 载 完成 ， 所 以 会 花费 
较 长 时 间 。 而 DoMcontentLoadead 事件 会 在 DOM 树 构建 完成 后 立即 触发 , 而 不 用 等 待 图 片 、JavaScript 
文件 、CSS 文件 或 其 他 资源 加 载 完成 。 相 对 于 1oad 事件 ,poMcontentLoaded 可 以 让 开发 者 在 外 部 资 
源 下 载 的 同时 就 能 指定 事件 处 理 程序 ， 从 而 让 用 户 能 够 更 快 地 与 页 面 交互 。 

要 处 理 DoMContentLoaded 事件 ， 需 要 给 document 或 window 添加 事件 处 理 程序 (实际 的 事件 
目标 是 aocument ， 但 会 冒 泡 到 window )。 下 面 是 一 个 在 aocument 上 监听 DOMContentLoaded 事件 
的 例子 : 


document .addqEventListener("DOMContentLoadedq"， (event) => { 
console.log("Content loaded"); 


让 

DOMContentLoaded 事件 的 event 对 象 中 不 包含 任何 额外 信息 (除了 target 等 于 document )。 

DOMContentLoagded 事 件 通 常用 于 添加 事件 处 理 程序 或 执行 其 他 DOM 操作 。 这 个 事件 始终 在 10ag 
事件 之 前 触发 。 

对 于 不 支持 DOMContentLoaded 事件 的 浏览 器 ， 可 以 使 用 超时 为 0 的 setTimeout () 函数 ,通过 
其 回调 来 设置 事件 处 理 程序 ， 比 如 : 

























































































SetTimeout (() => { 
// 在 这 里 添加 事件 处 理 程序 
中 





以 上 代码 本 质 上 意味 着 在 当前 JavaScript 进程 执行 完毕 后 立即 执行 这 个 回调 。 页 面 加 载 和 构建 期 间 
只 有 一 个 JavaScript 进程 运行 。 所 以 可 以 在 这 个 进程 空闲 后 立即 执行 回调 ， 至 于 是 否 与 同一 个 浏览 器 或 
同一 页 面 上 不 同 脚本 的 DOMContentLoaded 触发 时 机 一 致 并 无 绝对 把 握 。 为 了 尽 可 能 早 一 些 执 行 ， 以 
上 代码 最 好 是 页 面 上 的 第 一 个 超时 代码 。 即 使 如 此 ， 考 虑 到 各 种 影响 因素 ， 也 不 一 定 保 证 能 在 1oad 事 
件 之 前 执行 超时 回调 。 

4. readystatechange 事件 

IE 首先 在 DOM 文档 的 一 些 地 方 定义 了 一 个 名 为 readystatechange 事件 。 这 个 有 点 神秘 的 事件 
旨 在 提供 文档 或 元 素 加 载 状态 的 信息 ， 但 行为 有 时 候 并 不 稳定 。 支 持 readystatechange 事件 的 每 个 
对 象 都 有 一 个 readystate 属性 ,该 属性 具有 一 个 以 下 列 出 的 可 能 的 字符 串 值 。 

口 uninitialized: 对 象 存在 并 尚未 初始 化 。 

口 10ading: 对 象 正在 加 载 数据 。 

口 1oadqed: 对 象 已 经 加 载 完 数据 。 

口 interactive: 对 象 可 以 交互 ， 但 尚未 加 载 完 成 。 
口 complete: 对 象 加 载 完 成 。 
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看 起 来 很 简单 , 其 实 并 非 所 有 对 象 都 会 经 历 所 有 readystate 阶段 。 文档 中 说 有 些 对 象 会 完全 跳 过 
某 个 阶段 ， 但 并 未 说 明 哪些 阶段 适用 于 哪些 对 象 。 这 意味 着 readystatechange 事件 经 常会 触发 不 到 
4 次 ， 而 readyState 未 必 会 依次 呈现 上 述 值 。 

在 aocument 上 使 用 时 ， 值 为 "interactive" 的 readyState 首先 会 触发 readystatechange 
事件 ， 时 机 类 似 于 DoMContentLoadegd。 进 入 交互 阶段 , 意味 着 DOM 树 已 加 载 完成 ， 因 而 可 以 安全 地 
交互 了 。 此 时 图 片 和 其 他 外 部 资源 不 一 定 都 加 载 完了 。 可 以 像 下 面 这 样 使 用 readystatechange 事件 : 


document .addEventListener("readystatechange", (event) => { 
if (document .readyState == "interactive") { 
console.log("Content loaded"); 
} 
Fs 


这 个 事件 的 event 对 象 中 没有 任何 额外 的 信息 ， 连 事件 目标 都 不 会 设置 。 

在 与 10ad 事件 共同 使 用 时 ， 这 个 事件 的 触发 顺序 不 能 保证 。 在 包含 特别 多 或 较 大 外 部 资源 的 页 面 
中 ， 交 互 阶 段 会 在 loaqd 事件 触发 前 先 触 发 。 而 在 包含 较 少 且 较 小 外 部 资源 的 页 面 中 ， 这 个 
readystatechange 事件 有 可 能 在 1oad 事件 触发 后 才 触 发 。 

让 问题 变 得 更 加 复杂 的 是 ， 交 互 阶 段 与 完成 阶段 的 顺序 也 不 是 固定 的 。 在 外 部 资源 较 多 的 页 面 中 ， 
很 可 能 交互 阶段 会 早 于 完成 阶段 , 而 在 外 部 资源 较 少 的 页 面 中 , 很 可 能 完成 阶段 会 早 于 交互 阶段 。 因 此 ， 
实践 中 为 了 抢 到 较 早 的 时 机 ， 需 要 同时 检测 交互 阶段 和 完成 阶段 。 比 如 ; 


































































































document .addEventListener("readystatechange", (event) => { 
if (document .readyState == "interactive" || 
document .readyState == "complete") { 


document .removeEventListener("readystatechange", arguments.callee); 
console.log("Content loaded"); 
} 
局 


当 readystatechange 事件 触发 时 ， 这 段 代码 会 检测 document .readySstate 属性 ， 以 确定 当前 
是 不 是 交互 或 完成 状态 。 如 果 是 ， 则 移 除 事件 处 理 程 序 ， 以 保证 其 他 阶段 不 再 执行 。 注 意 ， 因 为 这 里 的 
事件 处 理 程序 是 匿名 函数 ， 所 以 使 用 了 arguments .callee 作为 函数 指针 。 然 后 ， 又 打印 出 一 条 表示 
内 容 已 加 载 的 消息 。 这 样 的 逻辑 可 以 保证 尽 可 能 接近 使 用 DoMcontentLoaded 事件 的 效果 。 


































































































注意 使 用 readystatechange 只 能 尽量 模拟 DOMCcontentLoaaded, 但 做 不 到 分 毫 不 差 。 


load 事件 和 readystatechange 事件 发 生 的 顺序 在 不 同 页 面 中 是 不 一 样 的 。 





5. pageshow 与 pagehide 事件 

Firefox 和 Opera 开发 了 一 个 名 为 往返 缓存 (bfcache，back-forward cache ) 的 功能 ， 此 功能 旨 在 使 用 
浏览 器 “前 进 ” 和 “后 退 ” 按 钮 时 加 快 页 面 之 间 的 切换 。 这 个 缓存 不 仅 存储 页 面 数据 ， 也 存储 DOM 和 
JavaScript 状态 ， 实 际 上 是 把 整个 页 面 都 保存 在 内 存 里 。 如 果 页 面 在 缓存 中 ， 那 么 导航 到 这 个 页 面 时 就 
不 会 触发 1oad 事件 。 通常 ， 这 不 会 导致 什 么 问题 ， 因 为 整个 页 面 状 态 都 被 保存 起 来 了 。 不 过 ，Firefx 
决定 提供 一 些 事 件 ， 把 往返 缓存 的 行为 暴露 出 来 。 
第 一 个 事件 是 pageshow， 其 会 在 页 面 显示 时 触发 ， 无 论 是 否 来 自 往返 缓存 。 在 新 加 载 的 页 面 上 ， 
pageshow 会 在 10ad 事件 之 后 触发 ; 在 来 自 往 返 缓存 的 页 面 上 ，pageshow 会 在 页 面 状态 完全 恢复 后 
触发 。 注 意 ， 虽然 这 个 事件 的 目标 是 socument ， 但 事件 处 理 程序 必须 添加 到 window 上 。 下 面 的 例子 
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展示 了 追踪 这 些 事件 的 代码 : 
(function() { 


let showCount = 0; 


window.addEventListener("load", () => { 
console.log("Load fired"); 


于 


window.addEventListener("pageshow", () => { 

showCount++; 

console.log( ‘Show has been fired ${showCount} times..); 
0 

这 个 例子 使 用 了 私有 作用 域 来 保证 showcount 变量 不 进入 全 局 作用 域 。 在 页 面 首次 加 载 时 ， 
showCount 的 值 为 0。 之 后 每 次 触发 pageshow 事件 ，showcount 都 会 加 1 并 输出 消息 。 如 果 从 包含 
以 上 代码 的 页 面 跳 走 ， 然 后 又 点 击 “ 后 退 ” 按 钮 返回 以 恢复 它 ， 就 能 够 每 次 都 看 到 showcount 递增 的 
值 。 这 是 因为 变量 的 状态 连同 整个 页 面 状 态 都 保存 在 了 内 存 中 ,导航 回来 后 可 以 恢复 。 如 果 是 点 击 了 浏 
览 器 的 “刷新 ”按钮 ， 则 showcount 的 值 会 重 置 为 2 因为 页 面 会 重新 加 载 。 

除了 常用 的 属性 ，pageshow 的 event 对 象 中 还 包含 一 个 名 为 persisted 的 属性 。 这 个 属性 是 一 
个 布尔 值 ， 如 果 页 面 存储 在 了 往返 缓存 中 就 是 true， Ph false。 可 以 像 下 面 这 样 在 事件 处 理 程 
序 中 检测 这 个 属性 : 


(function() { 
let showCount = 0; 


’ 
’ 










































































window.addEventListener("load", () => { 
console.log("Load fired"); 


} 3 


window.addEventListener("pageshow", () => { 
showCount++; 
console.log( .Show has been fired ${showCount} times. ， 
“Persisted? S${event.persisted}. );，; 








通过 检测 persisted 属性 可 以 根据 页 面 是 否 取 自 往返 缓存 而 决定 是 否 采取 不 同 的 操作 。 
与 pageshow 对 应 的 事件 是 pagehide， 这 个 事件 会 在 页 面 从 浏览 器 中 纯 载 后 ， 在 unload 事件 之 
前 触发 。 与 pageshow 事件 一 样 ，pagehiae 事件 同样 是 在 socument 上 触发 , 但 事件 处 理 程序 必须 被 
添加 到 window。event 对 象 中 同样 包含 persisteq 属性 ， 但 用 法 稍 有 不 同 。 比 如 ， 以 下 代码 检测 了 
vent .persisted 属性 : 



































window.addEventListener("pagehide", (event) => { 
console.log("Hiding. Persisted? " + event .persisted); 


这 

这 样 ， 当 pagehige 事件 触发 时 ， 也 许可 以 根据 persisted 属性 的 值 来 采取 一 些 不 同 的 操作 。 对 
pageshow 事件 来 说 ,persisted 为 true 表示 页 面 是 从 往返 缓存 中 加 载 的 ; 而 对 pagehiae 事件 来 说 ， 
persisted 为 true 表示 页 面 在 纯 载 之 后 会 被 保存 在 往返 缓存 中 。 因 此 ， 第 一 次 触发 pageshow 事件 
时 persisted 始终 是 false, 而 第 一 次 触发 pagenide 事件 时 persisted 始终 是 true (除非 页 面 不 
符合 使 用 往返 缓存 的 条 件 )。 
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注意 ”注册 了 onunload 事件 处 理 程序 ( 即使 是 空 函 数 ) 的 页 面 会 自动 排除 在 往返 缓存 之 
外 。 这 是 因为 onunload 事件 典型 的 使 用 场景 是 撤销 onload 事件 发 生 时 所 做 的 事情 ， 如 果 


使 用 往返 缓存 , 则 下 一 次 页 面 显 示 时 就 不 会 触发 onload 事件 ,而 这 可 能 导致 页 面 无 法 使 用 。 





6. hashchange 事件 

HTML5 增加 了 hashchange 事件 ,用 于 在 URL 散 列 值 (URL 最 后 # 后 面 的 部 分 ) 发 生变 化 时 通知 
开发 者 。 这 是 因为 开发 者 经 常 在 Ajax 应 用 程序 中 使 用 URL 散 列 值 存 储 状 态 信 息 或 路 由 导航 信息 。 

onhashchange 事件 处 理 程序 必须 添加 给 window， 每 次 URL 散 列 值 发 生变 化 时 会 调用 它 。event 
对 象 有 两 个 新 属性 : ol9URL 和 newURL。 这 两 个 属性 分 别 保存 变化 前 后 的 URL， 而 且 是 包含 散 列 值 的 
完整 URL。 下 面 的 例子 展示 了 如 何 获取 变化 前 后 的 URL: 


window.addEventListener("hashchange", (event) => { 
console.log( ‘Old URL: S${event.oldURL}, New URL: S${event.newURL}.); 
ys 


如 果 想 确定 当前 的 散 列 值 ， 最 好 使 用 location 对 象 : 


window.addEventListener("hashchange", (event) => { 
console.log( ‘Current hash: S${location.hash}. ); 


站 


17.4.8 设备 事件 


随 着 智能 手机 和 平板 计算 机 的 出 现 , 用 户 与 浏览 器 交互 的 新 方式 应 运 而 生 。 为 此 ， 一 批 新 事件 被 发 
明了 出 来 。 设 备 事件 可 以 用 于 确定 用 户 使 用 设备 的 方式 。W3C 在 2011 年 就 开始 起 草 一 份 新 规范 ， 用 于 
定义 新 设备 及 设备 相关 的 事件 。 

1. orientationchange 事件 
苹果 公司 在 移动 Safari 浏览 器 上 创造 了 orientationchange 事件 , 以 方便 开发 者 判断 用 户 的 设备 
是 处 于 垂直 模式 还 是 水 平 模式 。 移 动 Safari 在 window 上 暴露 了 windqow.orientation 属性 ， 它 有 以 
下 3 种 值 之 一 : 0 表示 垂直 模式 ，90 表示 左 转 水 平 模式 ( 主屏 幕 键 在 右 侧 )，-90 表示 右 转 水 平 模式 ( 主 
屏幕 键 在 左 )。 虽 然 相 关 文档 也 提 及 设备 倒置 后 的 值 为 180， 但 设备 本 身 至 今 还 不 支持 。 图 17-9 展示 了 
window.orientation 属性 的 各 种 值 。 
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每 当 用 户 旋转 设备 改变 了 模式 ， 就 会 触发 orientationchange 事件 。 但 event 对 象 上 没有 暴露 
任何 有 用 的 信息 ， 这 是 因为 相关 信息 都 可 以 从 window.orientation 属性 中 获取 。 以 下 是 这 个 事件 典 
型 的 用 法 : 





window.addEventListener("load", (event) => { 
let div = document .getElementById ("myDiv"); 
div.innerHTML = "Current orientation is " + window.orientation; 
window.addEventListener("orientationchange", (event) => { 


div.innerHTML = "Current orientation is " + window.orientation; 
他 


这 个 例子 会 在 10ad 事件 触发 时 显示 设备 初始 的 朝向 。 然后 ,又 指定 了 orientationchange 事件 
处 理 程序 。 此 后 ， 只 要 这 个 事件 触发 ， 页 面 就 会 更 新 以 显示 新 的 朝向 信息 。 
所 有 iOS 设备 都 支持 orientationchange 事件 和 window.orientation 属性 。 









































注意 ”因为 orientationchange 事件 被 认为 是 window 事件 ,所 以 也 可 以 通过 给 <body> 


元 素 添加 onorientationchange 属性 来 指定 事件 处 理 程序 。 





2. deviceorientation 事件 

deviceorientation 是 DeviceOrientationEvent 规 范 定义 的 事件 .如 果 可 以 获取 设备 的 加 速 计 信 息 ， 
而 且 数 据 发 生 了 变化 ， 这 个 事件 就 会 在 window 上 触发 。 要 注意 的 是 ，deviceorientation 事件 只 反 
映 设备 在 空间 中 的 朝向 ， 而 不 涉及 移动 相关 的 信息 。 

设备 本 身 处 于 3D 空间 即 拥有 x 轴 、y 轴 和 z 轴 的 坐标 系 中 。 如 果 把 设备 静止 放 在 水 平 的 表面 上 , 那 
么 三 轴 的 值 均 为 0， 其 中 , x 轴 方 向 为 从 设备 左 侧 到 右 侧 ，y 轴 方 向 为 从 设备 底部 到 上 部 ，z 轴 方 向 为 从 
设备 背面 到 正面 ， 如 图 17-10 所 示 。 
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当 aeviceorientation 触发 时 ，event 对 象 中 会 包含 各 个 轴 相 对 于 设备 静 置 时 坐标 值 的 变化 ， 





主要 是 以 下 5 个 属性 。 











口 alpha: 0~360 范围 内 的 浮 点 值 ， 表 示 围 绕 z 轴 旋转 时 y 轴 的 度数 (左右 转 )。 
口 beta: -180~180 范围 内 的 浮 点 值 ， 表 示 围 绕 x 轴 旋转 时 z 轴 的 度数 (前 后 转 )。 
口 gamma: -90~90 范围 内 的 浮 点 值 ， 表 示 围 绕 y 轴 旋转 时 z 轴 的 度数 ( 扭转 )。 

口 absolute: 布尔 值 ， 表 示 设 备 是 否 返 回绝 对 值 。 

口 compasscalibratedq: 布尔 值 ， 表 示 设 备 的 指南 针 是 否 正确 校准 。 

图 17-11 展示 了 alpha、beta 和 gamma 值 的 计算 方式 。 
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x 轴 当 前 方向 








“x 轴 起 始 方向 
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z 轴 当 前 方向 
x 轴 当 前 方向 
x 轴 起 始 方向 
17-11 
下 面 是 一 个 输出 alpha、beta 和 gamma 值 的 简单 例子 : 
window.addEventListener("deviceorientation", (event) => { 


let output = document .getElementById("output"); 
output.innerHTML = 
‘Alpha=$ {event.alpha}, Beta=${event.beta}, Gamma=$ {event .gamma}<br>; 
过 
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基于 这 些 信息 ,可 以 随 着 设备 朝向 的 变化 重新 组 织 或 修改 屏幕 上 显示 的 元 素 。 例 如， 以 下 代码 会 随 
着 朝向 变化 旋转 一 个 元 素 : 











window.addEventListener("deviceorientation", (event) => { 
let arrow = document .getElementById("arrow"); 
arrow.style.webkitTransform = ‘rotate(${Math.round(event.alpha)}deg).; 


大 
这 个 例子 只 适用 于 移动 WebKit 浏览 器 ， 因 为 使 用 的 是 专 有 的 webkitTransform 属性 ( CSS 标准 
的 transform 属性 的 临时 版 本 ) “箭头 ”( arrow ) 元 素 会 随 着 event .alpha 值 的 变化 而 变化 ， 呈 现 
出 指南 针 的 样子 。 这 里 给 CSS3 旋转 变形 函数 传人 了 四 售 五 人 后 的 值 ， 以 确保 平顺 。 
3. devicemotion 事件 
DeviceOrientationEvent 规范 也 定义 了 aevicemotion 事件 。 这 个 事件 用 于 提示 设备 实际 上 在 移动 ， 
而 不 仅仅 是 改变 了 朝向 。 例 如 , aevicemotion 事件 可 以 用 来 确定 设备 正在 掉 落 或 者 正 拿 在 一 个 行走 的 
人 和 手 里 。 
当 aevicemotion 事件 触发 时 ，event 对 象 中 包含 如 下 额外 的 属性 。 
口 acceleration: 对 象 , 包含 x、y 和 z 属性 ， 反 映 不 考虑 重力 情况 下 各 个 维度 的 加 速 信息 。 
口 accelerationIncludingGravity: 对 象 , 包含 x、y 和 z 属性 ， 反 映 各 个 维度 的 加 速 信息 ， 
包含 z 轴 自然 重力 加 速度 。 
口 interval:; 上 毫秒， 距离 下 次 触发 devicemotion 事件 的 时 间 。 此 值 在 事件 之 间 应 为 常量 。 
口 rotationRate: 对 象 ， 包 含 alpha、peta 和 gamma 属性 ， 表 示 设 备 朝向 。 
如 果 无 法 提供 acceleration、accelerationIncludingGravity 和 rotationRate 信息 ， 则 


属性 值 为 nul1。 为 此 ， 在 使 用 这 些 属性 前 必须 先 检测 它们 的 值 是 否 为 nul1。 比 如 : 






































































































































window.addEventListener("devicemotion", (event) => { 
let output = document .getElementById("output"); 
if (event.rotationRate !== null) { 


output.innerHTML += ‘Alpha=${event.rotationRate.alpha}. + 
‘Beta=$ {event.rotationRate.beta}. + 
‘Gamma=$ {event .rotationRate.gamma}; 
} 
i 


17.4.9 触摸 及 手势 事件 


Safari 为 iOS 定制 了 一 些 专 有 事件 ， 以 方便 开发 者 。 因 为 iOS 设备 没有 鼠标 和 键盘 ， 所 以 常规 的 鼠 
标 和 键盘 事件 不 足以 创建 具有 完整 交互 能 力 的 网 页 。 同 时 ，WebKit 也 为 Android 定制 了 很 多 专 有 事件 ， 
成 为 了 事实 标准 ， 并 被 纳入 W3C 的 Touch Events 规范 。 本 节 介 绍 的 事件 只 适用 于 触 屏 设备 。 

1. 触摸 事件 

iPhone 3G 发 布 时 , iOS 2.0 内 置 了 新 版 本 的 Safari。 这 个 新 的 移动 Safari 支持 一 些 与 触摸 交互 有 关 的 
新 事件 。 后 来 的 Android 浏览 器 也 实现 了 同样 的 事件 。 当 手指 放 在 屏幕 上 、 在 屏幕 上 滑动 或 从 屏幕 移 开 
时 ， 触 摸 事 件 即 会 触发 。 触 摸 事 件 有 如 下 几 种 。 
口 touchstart: 手指 放 到 屏幕 上 时 触发 (即使 有 一 个 手指 已 经 放 在 了 屏幕 上 )。 
口 touchmove: 手指 在 屏幕 上 滑动 时 连续 触发 。 在 这 个 事件 中 调用 preventDefault () 可 以 阻止 

滚动 。 
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口 touchend: 手指 从 屏幕 上 移 开 时 触发 。 





D touchcancel: 系统 停止 跟踪 触摸 时 触发 。 文 档 中 并 未 明 




















这 些 事件 都 会 冒 泡 , 也 都 可 以 被 取消 。 尽 管 触摸 事件 不 属于 DOM 规范 , 但 浏览 
的 方式 实现 了 它们 。 因 此 ， 每 个 触摸 事件 的 event 对 象 者 











cancelable、Vview、clLien 


ctrlKey 和 metaKey。 


























提供 了 鼠标 事件 的 公 


txXx、 clientY、 screenX、screenY、detail、altKkey、 


I 


除了 这 些 公共 的 DOM 属性 ， 触 摸 事 件 还 提供 了 以 下 3 个 属性 用 于 跟踪 触 点 。 








口 touches: Touch 对 象 的 数组 ， 表 示 当 前 


= 





每 个 Touch 对 象 都 包含 下 列 








裔 性 。 
口 clientX: 触 点 在 视 口 中 的 x 坐标 。 
口 clientY: 触 点 在 视 口 中 的 y 坐 标 。 
D iaentifier: 触 点 ID。 
口 pagex: 触 点 在 页 面 上 的 x 坐标。 








口 bageY: 触 点 在 页 面 上 的 y 坐标 。 
口 screenXx: 触 点 在 屏幕 上 的 x 坐标。 
口 screenY: 触 点 在 屏幕 上 的 y 坐标 。 
口 carget: 触摸 事件 的 事件 目标 。 























屏幕 上 的 每 个 触 点 。 





这 些 属性 可 用 于 追踪 屏幕 上 的 触摸 轨迹 。 例 如 : 


function handleTouchEvent (event) 
// 只 针对 一 个 触 点 


{ 








if (event.touches.length == 1) { 
let output = document .getElementById("output"); 
Switch(event .type) { 
Case "touchstart": 
output.innerHTML += ‘<br>Touch started:. + 
‘(Ss{event.touches[0] .clientX}. + 
~ ${event.touches[0] .clientY}).; 
break; 
Case "touchend": 
output.innerHTML += ‘<br>Touch ended:. + 
‘(Ss{event.changedTouches[0] .clientXx}. 
. $s{event.changedTouches[0] .clientY}).，; 
break; 
case "touchmove": 
event .preventDefault(); // 阻止 滚动 
output.innerHTML += ‘<br>Touch moved:. + 
‘(Ss{event.changedTouches[0] .clientXx}. 
` $s{event.changedTouches[0] .clientY}). 
break; 
} 
} 
} 
document .addEventListener("touchstart", handleTouchEvent); 


document .addEventListener("touchend", 
document .addEventListener ("touchmove", 


handleTouchEvent); 
handleTouchEvent); 


口 targetTouches: Touch 对 象 的 数组 ， 表 示 特 定 于 事件 目标 的 触 点 。 
D changedTouches: Touch 对 象 的 数组 ， 表示 自 上 次 用 户 动作 之 后 变化 的 触 点 。 


了 


十 


什么 情况 下 停止 跟踪 。 











器 仍然 以 兼容 DOM 
属性 : bubbles、 
ShiftKey、 














~ 
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以 上 代码 会 追踪 屏幕 上 的 一 个 触 点 。 为 简 音 起见， 代码 只 会 在 屏幕 有 一 个 触 点 时 输出 信息 。 在 
touchstart 事件 触发 时 ， 触 点 的 位 置信 息 会 输出 到 output 元 素 中 。 在 touchmove 事件 触发 时 ,会 
取消 默认 行为 以 阻止 滚动 〈 移动 触 点 通常 会 滚动 页 面 )， 并 输出 变化 的 触 点 信息 。 在 toucheng 事件 触 
发 时 ， 会 输出 触 点 最 后 的 信息 。 注 意 ，toucheng 事件 触发 时 touches 集合 中 什么 也 没有 ， 这 是 因为 
没有 滚动 的 触 点 了 。 此 时 必须 使 用 cnangedTouches 集合 。 

这 些 事件 会 在 文档 的 所 有 元 素 上 触发 ， 因 此 可 以 分 别 控制 页 面 的 不 同 部 分 。 当 手指 点 触 屏 幕 上 的 元 
素 时 ， 依 次 会 发 生 如 下 事件 ( 包括 鼠标 事件 ): 


(1) touchstart 






















































































(2) mouseover 

(3) mousemove (1 次 ) 
(4) mousedown 

($5) mouseup 

(6) click 

(7) touchend 


2. 手势 事件 

iOS 2.0 中 的 Safari 还 增加 了 一 种 手势 事件 。 手势 事件 会 在 两 个 手指 触 碰 屏幕 且 相 对 距离 或 旋转 角度 
变化 时 触发 。 手 势 事件 有 以 下 3 种 。 
口 gesturestart: 一 个 手指 已 经 放 在 屏幕 上 ， 再 把 另 一 个 手指 放 到 屏幕 上 时 触发 。 
口 gesturechange: 任何 一 个 手指 在 屏幕 上 的 位 置 发 生变 化 时 触发 。 
口 gestureend: 其 中 一 个 手指 离开 屏幕 时 触发 。 
只 有 在 两 个 手指 同时 接触 事件 接收 者 时 ， 这 些 事件 才 会 触发 。 在 一 个 元 素 上 设置 事件 处 理 程序 ， 意 
味 着 两 个 手指 必须 都 在 元 素 边 界 以 内 才能 触发 手势 事件 ( 这 个 元 素 就 是 事件 目标 )。 因 为 这 些 事 件 会 冒 
泡 , 所 以 也 可 以 把 事件 处 理 程序 放 到 文档 级 别 ， 从 而 可 以 处 理 所 有 手势 事件 。 使 用 这 种 方式 时 ， 事 件 的 
目标 就 是 两 个 手指 均 位 于 其 边界 内 的 元 素 。 

触摸 事件 和 手势 事件 存在 一 定 的 关系 。 当 一 个 手指 放 在 屏幕 上 时 , 会 触发 touchstart 事件 。 当 另 
一 个 手指 放 到 屏幕 上 时 ，gesturestart 事件 会 首先 触发 ， 然 后 紧 接着 触发 这 个 手指 的 touchstart 
事件 。 如 果 两 个 手指 或 其 中 一 个 手指 移动 ， 则 会 触发 gesturechange 事件 。 只 要 其 中 一 个 手指 离开 屏 
幕 ， 就 会 触发 gestureeng 事件 ， 紧 接着 触发 该 手指 的 touchena 事件 。 

与 触摸 事件 类 似 ， 每 个 手势 事件 的 event 对 象 都 包含 所 有 标准 的 鼠标 事件 属性 : bubpbles、 
cancelable、 view、 clientX、 clientY、 screenX、 screenY、 detail、 altKey、 shiftKey.、 
ctrlKey 和 metaKey。 新 增 的 两 个 event 对 象 属性 是 rotation 和 scale。rotation 属性 表示 手指 
变化 旋转 的 度数 ， 负 值 表示 逆 时 针 旋转 ， 正 值 表 示 顺 时 针 旋 转 〈 从 0 开始 )。scale 属性 表示 两 指 之 间 
距离 变化 (对 捏 ) 的 程度 。 开 始 时 为 1， 然 后 随 着 距离 增 大 或 缩小 相应 地 增 大 或 缩小 。 

可 以 像 下 面 这 样 使 用 手势 事件 的 属性 : 


function handleGestureEvent (event) { 
let output = document .getElementById("output"); 
switch(event.type) { 
case "gesturestart": 
output.innerHTML += “Gesture started: ) + 
‘rotation=${event.rotation},. + 
‘scale=${event.scale}; 






































































































































534 第 17 章 事 件 





break; 
case "gestureend": 
output.innerHTML += 


break; 
case "gesturechange": 
output.innerHTML += 


‘Gesture ended: .+ 
‘rotation=$ {event.rotation},. 
“Scale=S$fevent .Scale} :， 


‘Gesture changed: .+ 
‘rotation=$ {event.rotation},. 
‘scale=${event.scale}; 


站 


后 


break; 


} 


document .addEventListener("gesturestart", 
document .addEventListener ("gestureend", 


document .addEventListener ("gesturechange", 


与 触摸 事件 的 例子 一 样 , 以 上 代码 简单 地 将 每 个 事件 对 应 到 一 个 处 理 函 数 ,然后 输出 每 个 





Ye 
六 忌 


handleGestureEvent, 
handleGestureEvent, 
handleGestureEvent, 


false); 
false); 
false); 


导 





有 件 的 信息 。 


触摸 事件 也 会 返回 rotation 和 scale 属性 ， 但 只 在 两 个 手指 触 碰 屏 幕 时 才 会 变 


化 。 一 般 来 说 ,使 用 两 个 手指 的 手势 事件 比 考虑 所 有 交互 的 触摸 事件 使 用 起 来 更 容易 一 些 。 


17.4.10 “事件 参考 


本 节 给 出 了 DOM 规范 、HTMLS5 规范 ， 以 及 概述 事件 行为 的 其 他 当前 已 发 布 规范 


览 器 事件 。 这 些 事 件 按照 API 和 /或 规范 分 类 。 


< 二 = 
六 忌 


Ambient Light events 
devicelight 


App Cache events 
cached 

checking 
downloading 
noupdate 
obsolete 


updateready 


Audio Channels API 
events 
headphoneschange 
mozinterruptbegin 


mozinterruptend 


只 包含 带 厂商 前 级 事件 的 规范 不 在 本 参考 中 。 

















Battery API events 
chargingchange 
chargingtimechange 
dischargingtimechange 


levelchange 


Broadcast Channel API 
events 


message 


Channel Messaging API events 


message 


Clipboard API events 
beforecopy 
beforecut 


beforepaste 





! 定 义 的 所 有 浏 
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copy 
ub 


paste 


Contacts API events 
contactchange 
error 


SUCCeSS 


CSS Font Loading 
API events 
loading 
loadingdone 


loadingerror 


CSSOM events 
animationend 
animationiteration 
animationstart 


transitionend 


CSSOM View events 
resize 


scroll 


Device Orientation events 
compassneedscalibration 
devicemotion 


deviceorientation 


Device Storage API events 


change 


DOM events 

abort 
beforeinput 

blur 

click 
compositionend 
compositionstart 
compositionupdate 
dblclick 

error 

focus 

focusin 


focusout 


input 
keydown 
keypress 
keyup 

load 
mousedown 
mouseenter 
mouseleave 
mousemove 
mouseout 
mouseover 
mouseup 
resize 
scroll 
select 
unload 


wheel 


Download API events 


statechange 


Encrypted Media Extensions 
events 

encrypted 

keystatuschange 

message 


waitingforkey 


Engineering Mode API events 


message 


File API events 
abort 

error 

load 

loadend 
loadstart 


progress 


File System API events 
error 


writeend 


FMRadio API events 
antennaavailablechange 
disabled 
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enabled pagehide 
frequencychange pageshow 
play 
Fullscreen API events playing 
fullscreenchange popstate 
fullscreenerror progress 
readystatechange 
Gamepad API events rejectionhandled 
gamepadconnected reset 
gamepaddisconnected seeked 
seeking 
HIML DOM events select 
DOMContentLoaded show 
abort sort 
afterprint stalled 
afterscriptexecute storage 
beforeprint submit 
beforescriptexecute suspend 
beforeunload timeupdate 
blur toggle 
cancel unhandledrejection 
canplay unload 
canplaythrough volumechange 
change waiting 
click 
close HTML Drag and Drop API 
connect events 
contextmenu drag 
durationchange dragend 
emptied dragenter 
error dragexit 
focus dragleave 
hashchange dragover 
input dragstart 
invalid drop 
languagechange 
load IndexedDB events 
loadeddata abort 
loadedmetadata blocked 
loadend close 
loadstart complete 
message error 
offline success 
online upgradeneeded 


open versionchange 
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Inter-App Connection API events 


message 


Media Capture and Streams 
events 

active 

addtrack 
devicechange 
ended 

inactive 

mute 
overconstrained 
ratechange 
removetrack 
started 


unmute 


Media Source Extensions events 
abort 
addsourcebuffer 
error 
removesourcebuffer 
sourceclose 
sourceended 
sourceopen 

update 

updateend 
updatestart 


MediaStream Recording events 
dataavailable 

error 

pause 

resume 

start 


stop 


Mobile Connection API events 
cardstatechange 


icccardlockerror 


Mobile Messaging API events 
close 

deliveryerror 
deliverysuccess 


SELOGL 


failed 
message 
open 
received 
retrieving 
sending 


sent 


Network Information API events 


change 


Page Visibility API events 


visibilitychange 


Payment Request API events 
shippingaddresschange 
shippingoptionchange 


Performance API events 


resourcetimingbufferfull 


Pointer events 
gotpointercapture 
lostpointercapture 
pointercancel 
pointerdown 
pointerenter 
pointerleave 
pointermove 
pointerout 
pointerover 


pointerup 


Pointer Lock API events 
pointerlockchange 


pointerlockerror 


Presentation API events 
change 
sessionavailable 


sessionconnect 


Proximity events 
deviceproximity 


userproximity 
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Push API events SVGLoad 

push SVGResize 

pushsubscriptionchange SVGScroll 
SVGUnload 

Screen Orientation API events SVGZoom 

change activate 
beginEvent 

Selection API events DG 

selectionchange endEvent 

selectstart focusin 
focusout 

Server Sent events mousedown 

error mousemove 

message mouseout 

open mouseover 
mouseup 

Service Workers API events repeatEvent 

activate 

controllerchange TCP Socket API events 

error connect 

fetch data 

install drain 

message error 

statechange 

updatefound Time and Clock API 
events 

Settings API events moztimechange 

settingchange 


Touch events 


Simple Push API events touchcancel 

error touchend 

success touchmove 
touchstart 


Speaker Manager API events 
speakerforcedchange TV API events 


currentchannelchanged 








SVG events currentsourcechanged 
DOMAttrModified eitbroadcasted 
DOMCharacterDataModified scanningstatechanged 
DOMNodeInserted 

DOMNodeInsertedIntoDocument UDP Socket API events 
DOMNodeRemoved message 
DOMNodeRemovedFromDocument 

DOMSUubtreeModified Web Audio API events 
SVGAbort audioprocess 


SVGError complete 
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ended 
loaded 
message 
nodecreate 


statechange 


Web Components events 


slotchange 


WebGL events 
webglcontextcreationerror 
webglcontextlost 


webglcontextrestored 


Web Manifest events 


install 


Web MIDI API events 
midimessage 


statechange 


Web Notifications events 
click 
close 
error 


show 


WebRTC events 

addstream 

close 

datachannel 

error 

icecandidate 
iceconnectionstatechange 
icegatheringstatechange 
identityresult 
idpassertionerror 
idpvalidationerror 
isolationchange 

message 
negotiationneeded 

open 

peeridentity 
removestream 
signalingstatechange 


tonechange 


Websockets API events 
close 

error 

message 


open 


Web Speech API events 
audioend 

audiostart 

boundary 

end_ (SpeechRecognition) 
end_ (SpeechSynthesis) 
error_ (SpeechRecognitionError) 
error (SpeechSynthesis) 
mark 

nomatch 

pause_ (SpeechSynthesis) 
result 

resume 

soundend 

soundstart 

speechend 

speechstart 

start (SpeechRecognition) 


start_ (SpeechSynthesis) 


Web Storage API events 


storage 


Web Telephony API events 


incoming 


WebVR API events 
vrdisplayactivate 
vrdisplayblur 
vrdisplayconnected 
vrdisplaydeactivate 
vrdisplaydisconnected 


vrdisplayfocus 





vrdisplaypresentchange 


WebVTT events 
addtrack 
change 
cuechange 


ENEer 
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exit 


removetrack 


WiFi Information API events 
connectioninfoupdate 


statuschange 


WiFi P2P API events 
disabled 
enabled 


peerinfoupdate 


17.5 内存 与 性 能 


statuschange 


XMLHttpRequest events 
abort 

error 

load 

loadend 

loadstart 

progress 
readystatechange 


timeout 








为 事件 处 理 程序 在 现代 Web 应 用 中 可 以 实现 交互 ， 所 以 很 多 开发 者 会 错误 地 在 页 面 中 大 量 使 用 
它们 。 在 创建 GUI 的 语言 如 C# 中 ， 通 常会 给 GUI 上 的 每 个 按钮 设置 一 个 onclick 事件 处 理 程序 。 这 

















样 做 不 会 有 什么 性 能 损耗 。 在 JavaScript 中 ， 页 面 中 事件 处 到 






































程序 的 数量 与 页 面 整 体 性 能 直接 相关 。 原 


因 有 很 多 。 首 先 ， 每 个 函数 都 是 对 象 ， 都 占用 内 存 空 间 ， 对 象 越 多 ,性 能 越 差 。 其次， 为 指定 事件 处 理 




















法 ， 就 可 以 改善 页 面 性 能 。 


事件 委托 








17.5.1 





“过 多 事件 处 理 程序 ”的 解决 方案 是 使 用 事件 委托 。 事 件 委 托 利用 事件 冒 泡 ， 可 以 只 使 用 一 个 事件 























程序 所 需 访问 DOM 的 次 数 会 先期 造成 整个 页 面 交 互 的 延迟 。 只 要 在 使 用 事件 处 理 程序 时 多 注意 一 些 方 























处 理 程序 来 管理 一 种 类 型 的 事件 。 例 如 ，click 事件 骨 泡 到 document。 这 意味 着 可 以 为 整个 页 面 指定 
一 个 onclick 事件 处 理 程序 ， 而 不 用 为 每 个 可 点 击 元 素 分 别 指定 事件 处 理 程序 。 比 如 有 以 下 HTML: 




















<ul id="myLinks"> 
<li id="goSomewhere">Go somewhere</1i> 
<li id="doSomething">Do something</1i> 
<li id="sayHi">Say hi</1i> 

</ul> 


这 里 的 HTML 包含 3 个 列表 项 ,在 被 点 击 时 应 该 执行 某 个 操作 。 对 此 ,通常 的 做 法 


个 事件 处 理 程 序 : 


let iteml 





























document .getElementById("goSomewhere"); 


let item2 = document .getElementById("doSomething"); 


let item3 document .getElementById("sayHi"); 

iteml .addEventListener("click", (event) => { 
location.href = "http:// www.wrox.com"; 

用 

item2.addEventListener("click", (event) => { 
document .title = "I changed the document's title"; 

item3.addEventListener("click", (event) => { 




















console.log("hi"); 


}); 
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如 果 对 页 面 中 所 有 需要 使 用 onclick 事件 处 理 程序 的 元 素 都 如 法 炮制 ， 结 果 就 会 出 现 大 片 雷 同 的 
只 为 指定 事件 处 理 程序 的 代码 ,使 用 事件 委托 , 只 要 给 所 有 元 素 共同 的 祖先 节点 添加 一 个 事件 处 理 程序 ， 
就 可 以 解决 问题 。 比 如 : 


let list = document .getElementById("myLinks"); 


























list.addEventListener("click", (event) => { 
let target = event.target,; 


switch(target.id) { 
case "doSomething": 
document .title = "I changed the document's title"; 
break; 





Case "goSomewhere": 
location.href = "http:// www.wrox.com"; 
break; 


case "sayHi": 
console.log("hi"); 
break; 





} 
})s 


这 里 只 给 <ul id="myLinks "> 元素 添加 了 一 个 onclick 事件 处 理 程序 。 因 为 所 有 列表 项 都 是 这 个 
元 素 的 后 代 ,， 所 以 它们 的 事件 会 向 上 冒 泡 ， 最 终 都 会 由 这 个 函数 来 处 理 。 但 事件 目标 是 每 个 被 点 击 的 列 
表 项 ， 只 要 检查 sevent 对 象 的 id 属性 就 可 以 确定 , 然后 再 执行 相应 的 操作 即 可 。 相 对 于 前 面 不 使 用 事 
件 委 托 的 代码 ， 这 里 的 代码 不 会 导致 先期 延迟 ， 因 为 只 访问 了 一 个 DOM 元 素 和 添加 了 一 个 事件 处 理 程 
序 。 结 果 对 用 户 来 说 没有 区 别 , 但 这 种 方式 占用 内 存 更 少 。 所 有 使 用 按钮 的 事件 ( 大 多 数 鼠 标 事件 和 键 
盘 事件 ) 都 适用 于 这 个 解决 方案 。 

只 要 可 行 , 就 应 该 考虑 只 给 aocument 添加 一 个 事件 处 理 程序 , 通过 它 处 理 页 面 中 所 有 某 种 类 型 的 
事件 。 相 对 于 之 前 的 技术 ,事件 委托 具有 如 下 优点 。 

口 gocument 对 象 随时 可 用 ， 任 何 时 候 都 可 以 给 它 添加 事件 处 理 程序 ( 不 用 等 待 DoMcontentLoaded 
或 10ad 事件 )。 这 意味 着 只 要 页 面 浑 染 出 可 点 击 的 元 素 ， 就 可 以 无 延迟 地 起 作用 。 
口 节省 花 在 设置 页 面 事件 处 理 程 序 上 的 时 间 。 只 指定 一 个 事件 处 理 程序 既 可 以 节省 DOM 引用 , 也 
可 以 节省 时 间 。 

口 减少 整个 页 面 所 需 的 内 存 ， 提 升 整体 性 能 。 

最 适合 使 用 事件 委托 的 事件 包括 : click、 mousedown、mouseup、keydown 和 keypress。 
mouseover 和 mouseout 事件 骨 泡 ， 但 很 难 适 当 处 理 ， 且 经 常 需要 计算 元 素 位 置 (因为 mouseonut 会 
在 光标 从 一 个 元 素 移动 到 它 的 一 个 后 代 节 点 以 及 移出 元 素 之 外 时 触发 )。 


17.5.2 ”删除 事件 处 理 程序 


把 事件 处 理 程序 指定 给 元 素 后 , 在 浏览 器 代码 和 负责 页 面 交 互 的 JavaScript 代码 之 间 就 建立 了 联系 。 
这 种 联系 建立 得 越 多 ,页 面 性 能 就 越 差 。 除 了 通过 事件 委托 来 限制 这 种 连接 之 外 ,还 应 该 及 时 删除 不 用 
的 事件 处 理 程序 。 很 多 Web 应 用 性 能 不 佳 都 是 由 于 无 用 的 事件 处 理 程序 长 驻 内 存 导致 的 。 

导致 这 个 问题 的 原因 主要 有 两 个 。 第 一 个 是 删除 带 有 事件 处 理 程序 的 元 素 。 比 如 通过 真正 的 DOM 
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方法 removeChild () 或 replaceChilg() 删 除 节 点 。 最 常见 的 还 是 使 用 innerHTML 整体 替换 页 面 的 
某 一 部 分 。 这 时 候 ， 被 innerHTML 删除 的 元 素 上 如 果 有 事件 处 理 程序 ， 就 不 会 被 垃圾 收集 程序 正常 清 
理 。 比 如 下 面 的 例子 : 


<div id="myDiv"> 
<input type="button" value="Click Me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
let btn = document .getElementById("myBtn"); 
btn.onclick = function() { 




















// 执行 操作 


document .getElementById("myDiv").innerHTML = "Processing...";} 
// 不 好 ! 
}; 


</script> 

这 里 的 按钮 在 <qiv> 元 素 中 。 单 击 按钮 ， 会 将 自己 删除 并 替换 为 一 条 消息 ， 以 阻止 双击 发 生 。 这 是 
很 多 网 站 上 常见 的 做 法 。 问 题 在 于 ， 按 钮 被 删除 之 后 仍然 关联 着 一 个 事件 处 理 程序 。 在 <aiv> 元 素 上 设 
置 innerHTML 会 完全 删除 按钮 ， 但 事件 处 理 程序 仍然 挂 在 按钮 上 面 。 某 些 浏览 器 ， 特 别 是 IE8 及 更 早 
版 本 ,在 这 时 候 就 会 有 问题 了 。 很 有 可 能 元 素 的 引用 和 事件 处 理 程序 的 引用 都 会 残留 在 内 存 中 。 如 果 知 
道 某 个 元 素 会 被 删除 ， 那 么 最 好 在 删除 它 之 前 手工 删除 它 的 事件 处 理 程序 ， 比 如 : 


<div id="myDiv"> 
<input type="button" value="Click Me" id="myBtn"> 
</div> 
<script type="text/javascript"> 
let btn = document .getElementById("myBtn"); 
btn.onclick = function() { 























// 执行 操作 
btn.onclick = null; // 删除 事件 处 理 程序 
document .getElementById("myDiv").innerHTML = "Processing...";} 


}y 


</script> 

















在 这 个 重 写 后 的 例子 中 ,设置 <aiv> 元 素 的 innerHTwL 属性 之 前 ,按钮 的 事件 处 理 程序 先 被 删除 
了 。 这样 就 可 以 确保 内 存 被 回收 ， 按 钮 也 可 以 安全 地 从 DOM 中 删 掉 。 

但 也 要 注意 ,在 事件 处 理 程序 中 删除 按钮 会 阻止 事件 置 泡 。 只 有 事件 目标 仍然 存在 于 文档 中 时 ， 事 
件 才 会 骨 泡 。 









































注意 事件 委托 也 有 助 于 解决 这 种 问题 ,如 果 提 前 知道 页 面 菜 一 部 分 会 被 使 用 innerHTML 
删除 ,就 不 要 直接 给 该 部 分 中 的 元 素 添 加 事件 处 理 程序 了 。 把 事件 处 理 程序 添加 到 更 高 层 


级 的 节点 上 同样 可 以 处 理 该 区 域 的 事件 。 




















男 一 个 可 能 导致 内 存 中 残留 引用 的 问题 是 页 面 印 载 。 同 样 ，IE8 及 更 早 版 本 在 这 种 情况 下 有 很 多 问 
题 , 不 过 好 像 所 有 浏览 器 都 会 受 这 个 问题 影响 。 如 果 在 页 面 印 载 后 事件 处 理 程序 没有 被 清理 ， 则 它们 仍 
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然 会 残留 在 内 存 中 。 之 后 ， 浏 览 器 每 次 加 载 和 纯 载 页 面 ( 比如 通过 前 进 、 后 退 或 刷新 )， 内 存 中 残留 对 
象 的 数量 都 会 增加 ， 这 是 因为 事件 处 理 程序 不 会 被 回收 。 

一 般 来 说 , 最 好 在 onunload 事件 处 理 程序 中 趁 页 面 尚未 卸载 先 删 除 所 有 事件 处 理 程序 。 这 时 候 也 
能 体现 使 用 事件 委托 的 优势 ,因为 事件 处 理 程序 很 少 , 所 以 很 容易 记 住 要 删除 哪些 。 关 于 钊 载 页 面 时 的 
清理 ， 可 以 记 住 一 点 : onload 事件 处 理 程序 中 做 了 什么 ， 最 好 在 onunloadq 事件 处 理 程序 中 恢复 。 






























































注意 在 页 面 中 使 用 onunload 事件 处 理 程序 意味 着 页 面 不 会 被 保存 在 往返 缓存 
(bfcache ) 中 。 如 果 这 对 应 用 很 重要 ， 可 以 考虑 只 在 下 中 使 用 onunload 来 删除 事件 处 理 





年 序 。 


17.6 ”模拟 事件 


事件 就 是 为 了 表示 网 页 中 某 个 有 意义 的 时 刻 。 通常 , 事件 都 是 由 用 户 交 互 或 浏览 右 功 能 触发 。 事实 
上 ， 可 能 很 少 有 人 知道 可 以 通过 JavaScript 在 任何 时 候 触发 任意 事件 ， 而 这 些 事件 会 被 当成 浏览 器 创建 
的 事件 。 这 意味 着 同样 会 有 事件 冒 泡 ， 因 而 也 会 触发 相应 的 事件 处 理 程序 。 这 种 能 力 在 测试 Web 应 用 
时 特别 有 用 。DOM3 规范 指明 了 模拟 特定 类 型 事件 的 方式 。IE8 及 更 早 版 本 也 有 自己 模拟 事件 的 方式 。 


17.6.1 DOM 事件 模拟 


任何 时 候 , 都 可 以 使 用 document . createEvent () 方 法 创建 一 个 event 对 象 。 这 个 方法 接收 一 个 
参数 ， 此 参数 是 一 个 表示 要 创建 事件 类 型 的 字符 串 。 存 DOM2 中 ， 所 有 这 些 字符 串 都 是 英文 复数 形式 ， 
但 在 DOM3 中 ， 又 把 它们 改 成 了 英文 单数 形式 。 可 用 的 字符 串 值 是 以 下 值 之 一 。 
口 "UIEvents" (DOM3 中 是 "UIEvent" ): 通用 用 户 界面 事件 ( 鼠标 事件 和 键盘 事件 都 继承 自 这 
个 事件 )。 
口 "MouseEvents" (DOM3 中 是 "MouseEvent" ): 通用 鼠标 事件 。 
口 "HTMLEvents"(DOM3 中 没有 ): 通 用 HTML 事件 ( HTML 事件 已 经 分 散 到 了 其 他 事件 大 类 中 )。 
注意 ， 键 盘 事件 不 是 在 DOM2 Events 中 规定 的 ， 而 是 后 来 在 DOM3 Events 中 增加 的 。 
创建 event 对 象 之 后 , 需要 使 用 事件 相关 的 信息 来 初始 化 。 每 种 类 型 的 event 对 象 都 有 特定 的 方法 ， 
可 以 使 用 相应 数据 来 完成 初始 化 。 方 法 的 名 字 并 不 相同 ， 这 取决 于 调用 createEvent () 时 传人 的 参数 。 
事件 模拟 的 最 后 一 步 是 触发 事件 。 为 此 要 使 用 aispatchEvent () 方 法 ， 这 个 方法 存在 于 所 有 支持 
事件 的 DOM 节点 之 上 。dispatchEvent () 方 法 接收 一 个 参数 ， 即 表示 要 触发 事件 的 event 对 象 。 调 
用 aispatchEvent () 方 法 之 后 ， 事 件 就 “转正 ”了 ， 接 着 便 冒 泡 并 触发 事件 处 理 程 序 执行 。 
1. 模拟 鼠标 事件 
模拟 鼠标 事件 需要 先 创建 一 个 新 的 鼠标 event 对 象 ， 然 后 再 使 用 必要 的 信息 对 其 进行 初始 化 。 要 
创建 鼠标 event 对 象 ， 可 以 调用 createEvent () 方 法 并 传人 "MouseEvents" 人 参数 。 这 样 就 会 返回 一 
个 event 对 象 ， 这 个 对 象 有 一 个 initMouseEvent () 方 法 ， 用 于 为 新 对 象 指 定 鼠 标的 特定 信息 。 
initMouseEvent () 方 法 接收 15 个 参数 ， 分 别 对 应 鼠标 事件 会 暴露 的 属性 。 这 些 参数 列举 如 下 。 
口 type〈 字 符 串 ): 要 触发 的 事件 类 型 ， 如 "click"。 
口 bubbles (布尔 值 ); 表示 事件 是 否 冒 泡 。 为 精确 模拟 鼠标 事件 ， 应 该 设置 为 true。 
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口 cancelable (布尔 值 ); 表示 事件 是 否 可 以 取消 。 为 精确 模拟 鼠标 事件 ， 应 该 设置 为 true。 
口 view (AbstractView ): 与 事件 关联 的 视图 。 基 本 上 始终 是 document .defaultViewo 

口 getail (整数 ): 关于 事件 的 额外 信息 。 只 被 事件 处 理 程序 使 用 ,通常 为 0。 

口 screenx (整数 ): 事件 相对 于 屏幕 的 x 坐标。 

口 screenY (整数 ): 事件 相对 于 屏幕 的 7 坐标。 

D clientx (整数 ); 事件 相对 于 视 口 的 x 坐 标 。 

口 clientY (整数 ): 事件 相对 于 视 口 的 y 坐标 。 

D ctrlkey (布尔 值 ): 表示 是 否 按 下 了 Ctrl 键 。 默 认为 false。 

口 altkey (布尔 值 ): 表示 是 否 按 下 了 Alt 键 。 默 认为 false。 

口 shiftkey (布尔 值 ): 表示 是 否 按 下 了 Shift 键 。 默 认为 false。 

口 metakey ( 布尔 值 ): 表示 是 否 按 下 了 Meta 键 。 默 认为 false。 

口 putton (整数 )， 表示 按 下 了 哪个 按钮 。 默 认为 0。 

D relatedTarget( 对象 ): 与 事件 相关 的 对 象 。 只 在 模拟 mouseover 和 mouseout 时 使 用 。 
显然 ，initMouseEvent () 方 法 的 这 些 参数 与 鼠标 事件 的 event 对 象 属性 是 一 一 对 应 的 。 前 4 个 
参数 是 正确 模拟 事件 唯一 重要 的 几 个 参数 , 这 是 因为 它们 是 浏览 器 要 用 的 ,其 他 参数 则 是 事件 处 理 程序 
要 用 的 。event 对 象 的 target 属性 会 自动 设置 为 调用 dispatchEvent () 方 法 时 传人 的 节点 。 下 面 来 
看 一 个 使 用 默认 值 模拟 单 击 事件 的 例子 : 


let btn = document .getElementById("myBtn"); 






























































































































































// 创建 event 对 象 


lJet event = document.createEvent ("MouseEvents"); 


// 初始 化 event 对 象 
event.initMouseEvent ("click", true, true, document .defaultView, 
0, 0, 0, 0, 0, false, false, false, false, 0, null); 





// 触发 事件 


btn.dispatchEvent (event ) ; 
所 有 鼠标 事件 ， 包 括 ablclick 都 可 以 像 这 样 在 DOM 合 规 的 浏览 如 中 模拟 出 来 。 
2. 模拟 键盘 事件 
如 前 所 述 ， DOM2 Events 中 没有 定义 键盘 事件 ， 因 此 模拟 键盘 事件 并 不 直观 。 键 盘 事件 曾 在 DOM2 
Events 的 草案 中 提 到 过 ， 但 最 终 成 为 推荐 标准 前 又 被 删 掉 了 。 要 注意 的 是 ，DOM3 Events 中 定义 的 键盘 
事件 与 DOM2 Events 草案 最 初 定义 的 键盘 事件 差别 很 大 。 
在 DOM3 中 创建 键盘 事件 的 方式 是 给 createEvent () 方 法 传人 参数 "KeyboardEvent"。 这 样 会 
返回 一 个 event 对 象 ， 这 个 对 象 有 一 个 initkeyboardEvent () 方 法 。 这 个 方法 接收 以 下 参数 。 
口 type (字符 串 ): 要 触发 的 事件 类 型 ， 如 "keydown"。 
口 bubples ( 布尔 值 ): 表示 事件 是 否 冒 泡 。 为 精确 模拟 键盘 事件 ， 应 该 设置 为 true。 
口 cancelable (布尔 值 ): 表示 事件 是 否 可 以 取消 。 为 精确 模拟 键盘 事件 ， 应 该 设置 为 true。 
口 view (AbstractView ): 与 事件 关联 的 视图 。 基 本 上 始终 是 socument .defaultView。 
口 key (字符 串 ): 按 下 按键 的 字符 串 代 码 。 
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口 location (整数 ): 按 下 按键 的 位 置 。 0 表示 默认 键 ，!] 表示 左边 , 2 表示 右边 , 3 表示 数字 键盘 ， 
4 表示 移动 设备 ( 虚拟 键盘 )，5 表示 游戏 手柄 。 

口 mogifiers (字符 串 ): 空格 分 隔 的 修饰 键 列 表 ， 如 "Shift"。 

口 repeat (整数 ): 连续 按 了 这 个 键 多 少 次 。 

注意 , DOM3 Events 废弃 了 keypress 事件 , 因此 只 能 通过 上 述 方式 模拟 keydown 和 keyup 事件 : 


let textbox = document .getElementById ("myTextbox" ) ， 
eVent ; 

















// 按照 DOM3 的 方式 创建 event 对 象 
if (document.implementation.hasFeature("KeyboardEvents", "3.0")) { 
event = document .createEvent ("KeyboardEvent"); 


// 初始 化 event 对 象 
event.initKeyboardEvent ("keydown", true, true, document.defaultView, "a", 
Oy- Shift,, "0s 


外 触发 事件 

textbox.dispatchEvent (event);} 

这 个 例子 模拟 了 同时 按 住 Shift 键 和 键盘 上 A 键 的 keydown 事件 。 在 使 用 document .create 
Event ("KeyboardEvent") 之 前 , 最 好 检测 一 下 浏览 器 对 DOM3 键盘 事件 的 支持 情况 ， 其 他 浏览 器 会 
返回 非 标 准 的 KeyboardEvent 对 象 。 

Firefox 允许 给 createEvent () 传 人 "KeyEvents" 来 创建 键盘 事件 。 这 时 候 返回 的 event 对 象 包 
含 的 方法 叫 initKeyEvent () ， 此 方法 接收 以 下 10 个 参数 。 

口 type (字符 串 ): 要 触发 的 事件 类 型 ， 如 " keydown"o 

口 bubbles (布尔 值 ); 表示 事件 是 否 冒 泡 。 为 精确 模拟 键盘 事件 ， 应 该 设置 为 true。 

口 cancelable (布尔 值 ): 表示 事件 是 否 可 以 取消 。 为 精确 模拟 键盘 事件 ， 应 该 设置 为 true。 
口 view (AbstractView ): 与 事件 关联 的 视图 ， 基 本 上 始终 是 document .defaultView。 

口 ctrlkey (布尔 值 ) 表示 是 否 按 下 了 Ctrl 键 。 默 认为 false。 

口 altkey (布尔 值 ): 表示 是 否 按 下 了 Alt 键 。 默 认为 false。 

口 shiftkey (布尔 值 ); 表示 是 否 按 下 了 Shift 键 。 默 认为 false。 

口 metakey ( 布尔 值 ): 表示 是 否 按 下 了 Meta 键 。 默 认为 false。 

口 keyCode (整数 ): 表示 按 下 或 释放 键 的 键 码 。 在 keydown 和 keyup 中 使 用 。 默 认为 0。 
口 charcode (整数 ): 表示 按 下 键 对 应 字符 的 ASCII 编码 。 在 keypress 中 使 用 。 默 认为 0。 
键盘 事件 也 可 以 通过 调用 dispatchEvent () 并 传人 event 对 象 来 触发 ， 比 如 : 


// 仅 适 用 于 Firefox 
let textbox = document .getElementById("myTextbox"); 























































































































// 创建 event 对 象 


let event = document .createEvent ("KeyEvents"); 


// 初始 化 event 对 象 
event .initKeyEvent ("keydown", true, true, document .defaultView, false, 
false, true, false, 65, 65); 


// 触发 事件 


textbox.dispatchEvent (event);} 
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这 个 例子 模拟 了 同时 按 住 Shift 键 和 键盘 上 A 键 的 keydown 事件 。 同 样 也 可 以 像 这 样 模拟 keyup 


keypress 事件 。 
对 于 其 他 浏览 器 ， 需 要 创建 一 个 通用 的 事件 ， 并 为 其 指定 特定 于 键盘 的 信息 ， 如 下 面 的 例子 所 示 : 


Jet textbox = document .getElementById("myTextbox"); 


























// 创建 event 对 象 


let event = document .createEvent ("Events"); 


// 初始 化 event 对 象 

event .initEvent (type, bubbles, cancelable); 
event .view = document .defaultView; 
event.altKey = false; 

event .ctrlKey = false; 

event.shiftKey = false; 

event .metaKey false; 

event .keyCode 65; 

event.charCode = 65; 


// 触发 事件 


textbox.dispatchEvent (event); 

以 上 代码 创建 了 一 个 通用 事件 ， 然 后 使 用 initEvent () 方 法 初始 化 ， 接 着 又 为 它 指定 了 键盘 事件 
息 。 这 里 必须 使 用 通用 事件 而 不 是 用 户 界面 事件 ， 因 为 用 户 界 面 事件 不 允许 直接 给 event 对 象 添加 
性 (Safari 例外 )。 像 这 样 模拟 一 个 事件 虽然 会 触发 键盘 事件 ,但 文本 框 中 不 会 输入 任何 文本 ， 因 为 它 





















































并 不 能 准确 模拟 键盘 事件 。 


3. 模拟 其 他 事件 
鼠标 事件 和 键盘 事件 是 浏览 器 中 最 常见 的 模拟 对 象 。 不 过 ， 有 时 候 可 能 也 需要 模拟 HIML 事件 。 
































模拟 HTML 事件 要 调用 createEvent () 方法 并 传人 "HTMLEvents" ， 然 后 再 使 用 返回 对 象 的 
initEvent () 方 法 来 初始 化 : 








Jet event = document.createEvent ("HTMLEvents"); 
event.initEvent ("focus", true, false); 
target .dispatchEvent (event); 


这 个 例子 模拟 了 在 给 定 目 标 上 触发 focus 事件 。 其 他 HTML 





山中 





有 件 也 可 以 像 这 样 来 模拟 。 


注意 HTML 事件 在 浏览 器 中 很 少 使 用 ， 因 为 它们 用 处 有 限 。 





4. 自 定 义 DOM 事件 
DOM3 增加 了 自 定义 事件 的 类 型 。 自 定义 事件 不 会 触发 原生 DOM 事件 ， 但 可 以 让 开发 者 定义 自己 























的 事件 。 要 创建 自 定 义 事件 ， 需 要 调用 createEvent("CustomEvent") 。 返 回 的 对 象 包含 
initCustomEvent () 方 法 ， 该 方法 接收 以 下 4 个 参数 。 








口 type (字符 串 ): 要 触发 的 事件 类 型 ， 如 "myevent "。 

口 pubbles ( 布尔 值 ): 表示 事件 是 否 冒 泡 。 

口 cancelable (布尔 值 ): 表示 事件 是 否 可 以 取消 。 

口 getail ( 对象): 任意 值 。 作 为 event 对 象 的 detail 属性 。 
自 定 义 事件 可 以 像 其 他 事件 一 样 在 DOM 中 派发 ， 比 如 : 
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let div = document .getElementById("myDiv"), 
event; 


div.addEventListener("myevent", (event) => { 
console.log("DIV: " + event.detail); 


}); 


document .addEventListener("myevent", (event) => { 
console.log("DOCUMENT: " + event.detail); 
})s 





if (document.implementation.hasFeature("CustomEvents", "3.0")) { 
event = document.createEvent ("CustomEvent"); 
event.initCustomEvent ("myevent", true, false, "Hello world!"); 
div.dispatchEvent (event); 


J 

这 个 例子 创建 了 一 个 名 为 "myevent "的 冒 泡 事件 ,event 对 象 的 detail 属性 就 是 一 个 简单 的 字符 
串 ，<div> 元 素 和 document 都 为 这 个 事件 注册 了 事件 处 理 程序 。 因 为 使 用 initcustomEvent () 初 始 
化 时 将 事件 指定 为 可 以 冒 泡 ， 所 以 浏览 絮 会 负责 把 事件 冒 泡 到 aocument。 


17.6.2 IE 事件 模拟 


在 IE8 及 更 早 版 本 中 模拟 事件 的 过 程 与 DOM 方式 类 似 : 创建 event 对 象 , 指定 相应 信息 ,然后 使 
用 这 个 对 象 触发 。 当 然 ，IE 实现 每 一 步 的 方式 都 不 一 样 。 

首先 ， 要 使 用 aocument 对 象 的 createEventobject () 方 法 来 创建 event 对 象 。 与 DOM 不 同 ， 
这 个 方法 不 接收 参数 ， 返 回 一 个 通用 event 对 象 。 然 后 ， 可 以 手工 给 返回 的 对 象 指定 希望 该 对 象 具 备 
的 所 有 属性 。( 没有 初始 化 方法 。) 最 后 一 步 是 在 事件 目标 上 调用 fireEvent () 方 法 ， 这 个 方法 接收 两 
个 参数 : 事件 处 理 程序 的 名 字 和 event 对 象 。 调 用 fireEvent () 时 ，srcElement 和 type 属性 会 自 
动 指派 到 event 对 象 ( 其 他 所 有 属性 必须 手工 指定 )。 这 意味 着 IE 支持 的 所 有 事件 都 可 以 通过 相同 的 
方式 来 模拟 。 例 如 ， 下 面 的 代码 在 一 个 按钮 上 模拟 了 click 事件 : 


var btn = document .getElementById("myBtn" ) ， 














































































































// 创建 event 对 象 


Var event = document .createEventObject (); 


/// 初始 化 event 对 象 


.ShiftKey = false; 
.button = 0; 


or 
evem 





eVent .ScreenX = 100; 
event.screenY = 0; 
event .ClLientX = 0; 
event.clientY = 0; 
event.ctrlKkey = false; 
event.altKey = false; 


// 触发 事件 


btn.fireEvent ("onclick", event); 

这 个 例子 先 创建 event 对 象 ， 然 后 用 相关 信息 对 其 进行 了 初始 化 。 注 意 ， 这 里 可 以 指定 任何 属性 
包括 IE8 及 更 早 版 本 不 支持 的 属性 。 这 些 属性 的 值 对 于 事件 来 说 并 不 重要 ， 因 为 只 有 事件 处 理 程序 才 会 
使 用 它们 。 
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同样 


// 他 
Var 

















的 方式 也 可 以 用 来 模拟 keypress 事件 ， 如 下 面 的 例子 所 示 : 








textbox = document .getElementById("myTextbox"); 


| 建 event 对 象 


event = document .createEventObject (); 


// 初始 化 event 对 象 


rt 
er 
eVemL 


SE 


.alLLKey = false; 
.ctrlKey = false; 
ShiftKey = false; 
t.keyCode = 65; 


// 触发 事件 


text 





box.fireEvent ("onkeypress", event); 














由 于 鼠标 事件 、 键 盘 事件 或 其 他 事件 的 event 对 象 并 没有 区 别 ， 因 此 使 用 通用 的 event 对 象 可 以 
触发 任何 类 型 的 事件 。 注 意 ， 与 DOM 方式 模拟 键盘 事件 一 样 ， 这 里 模拟 的 keypress 虽然 会 触发 ， 但 
文本 框 中 也 不 会 出 现 字符 。 








17.7 


事件 是 JavaScript 与 网 页 结合 的 主要 方式 。 最 常见 的 事件 是 在 DOM3 Events 规范 或 HTML5 
的 。 虽 然 基 本 的 寻 











小 结 














好 地 满足 用 户 交 互 需求 ， 其 中 一 些 专 有 事件 直接 与 特殊 的 设备 相关 。 





围绕 着 使 用 事件 ， 需 要 考虑 内 存 与 性 能 问题 。 例 如 : 
口 最 好 限制 一 个 页 面 中 事件 处 理 程序 的 数量 ， 因 为 它们 会 占用 过 多 内 存 ， 导 致 页 面 响应 缓慢 ; 














使 用 














可 以 模拟 所 有 原生 DOM 事件 。 键 盘 寻 
























































口 利用 事件 冒 泡 ， 事 件 委托 可 以 解决 限制 事件 处 理 程序 数量 的 问题 ; 
口 最 好 在 页 面 印 载 之 前 删除 所 有 事件 处 理 程序 。 














! 定 义 


丰 件 都 有 规范 定义 ,但 很 多 浏览 器 在 规范 之 外 实现 了 自己 专 有 的 事件 ， 以 方便 开发 者 更 


JavaScript 也 可 以 在 浏览 器 中 模拟 事件 。DOM2 Events 和 DOM3 Events 规范 提供 了 模拟 方法 ， 




















及 更 时 版 本 也 支持 事件 模拟 ， 只 是 接口 与 DOM 方式 不 同 。 


事件 是 JavaScript 中 最 重要 的 主题 之 一 ， 理 解 事件 的 原理 及 其 对 性 








能 的 影响 非常 重要 。 


有 件 一 定 程度 上 也 是 可 以 模拟 的 ， 有 时 候 需 要 组 合 其 他 技术 。IE8 


第 名 。 
动画 与 Canvas 图 形 


本 章 内 容 

口 使 用 requestAnimationFrame 
口 理解 <canvas> 元 素 

口 绘制 简单 2D 图 形 
口 使 用 WebGL 绘制 3D 图 形 


























图 形 和 动画 已 经 日 益 成 为 浏览 器 中 现代 Web 应 用 程序 的 必 备 功能 ， 但 实现 起 来 仍然 比较 困难 。 
觉 上 复杂 的 功能 要 求 性 能 调 优 和 硬件 加 速 , 不 能 拖 慢 浏览 器 。 目 前 已 经 有 一 套 日 趋 完善 的 API 和 工具 
以 用 来 开发 此 类 功能 。 

姓 良 置疑 ，<canvas> 是 HTML5 最 受 欢迎 的 新 特性 。 这 个 元 素 会 占据 一 块 页 面 区 域 ， 让 JavaScript 
可 以 动态 在 上 面 绘制 图 片 。<canvas> 最 早 是 苹果 公司 提出 并 准备 用 在 控制 面板 中 的 ， 随 着 其 他 浏览 
的 迅速 跟 进 ，HTML5 将 其 纳入 标准 。 目 前 所 有 主流 浏览 器 都 在 基 种 程度 上 支持 <canvas> 元 素 。 

与 浏览 器 环境 中 的 其 他 部 分 一 样 ，<canvas> 自 身 提供 了 一 些 API， 但 并 非 所 有 浏览 器 都 支持 这 些 
API， 其 中 包括 支持 基础 绘图 能 力 的 2D 上 下 文 和 被 称 为 WebGL 的 3D 上下文。 支持 的 浏览 器 的 最 新 版 
本 现在 都 支持 2D 上 下 文 和 WebGL。 





























到 党 

















































































































18.1 使 用 requestAnimationFrame 


很 长 时 间 以 来 ， 计 时 器 和 定时 执行 都 是 JavaScript 动画 最 先进 的 工具 。 虽 然 CSS 过 渡 和 动画 方便 了 
Web 开发 者 实现 某 些 动 画 , 但 JavaScript 动画 领域 多 年 来 进展 甚 微 ,Firefox 4 率先 在 浏览 器 中 为 JavaScript 
动画 增加 了 一 个 名 为 mozRequestAnimationFrame () 方 法 的 API。 这 个 方法 会 告诉 浏览 需要 执行 动画 

了 ， 于 是 浏览 髓 可 以 通过 最 优 方 式 确定 重 绘 的 时 序 。 自 从 出 现 之 后 ， 这 个 API 被 广泛 采用 ， 现 在 作为 
requestAnimationFrame () 方 法 已 经 得 到 各 大 浏览 器 的 支持 。 


18.1.1 早期 定时 动画 


以 前 , 在 JavaScript 中 创建 动画 基本 上 就 是 使 用 set Interval () 来 控制 动画 的 执行 。 下 面 的 例子 展 
示 了 使 用 setInterval () 的 基本 模式 : 




















































































(funet Torn(),t 回 
function updateAnimations() { fj 
doaAnimationl (); [Di 
doAnimation2 (); 视频 讲解 
// 其 他 任务 


setInterval (updateAnimations, 100); 


}) 0); 
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作为 一 个 小 型 动画 库 的 标 配 ， 这 个 updateaAnimations () 方 法 会 周期 性 运行 注册 的 动画 任务 ， 并 
反映 出 每 个 任务 的 变化 ( 例如， 同时 更 新 滚动 新 闻 和 进度 条 )。 如 果 没 有 动画 需要 更 新 ， 则 这 个 方法 既 
可 以 什么 也 不 做 ， 直 接 退 出 ， 也 可 以 停止 动画 循环 ， 等 待 其 他 需要 更 新 的 动画 。 

这 种 定时 动画 的 问题 在 于 无 法 准确 知晓 循环 之 间 的 延 时 。 和 定时 间隔 必须 足够 短 ， 这 样 才能 让 不 同 的 
动画 类 型 都 能 平滑 顺畅 , 但 又 要 足够 长 ， 以 便 产 生 浏览 器 可 以 泻 染 出 来 的 变化 。 一般 计 算 机 显示 融 的 
幕 刷新 率 都 是 60Hz， 基 本 上 意味 着 每 秒 需 要 重 绘 60 次 。 大 多 数 浏览 咒 会 限制 重 绘 频率 ,使 其 不 超出 屏 
幕 的 刷新 率 ， 这 是 因为 超过 刷新 率 ， 用 户 也 感知 不 到 。 

因此 ,实现 平滑 动画 最 佳 的 重 绘 间隔 为 1000 上 毫秒 /60, 大 约 17 毫秒 。 以 这 个 速度 重 绘 可 以 实现 最 
滑 的 动画 ， 因 为 这 已 经 是 浏览 器 的 极限 了 。 如 果 同 时 运行 多 个 动画 ， 可 能 需要 加 以 限 流 ， 以 免 17 毫秒 
的 重 绘 间隔 过 快 ， 导 致 动画 过 早 运行 完 。 

虽然 使 用 set Interval () 的 定时 动画 比 使 用 多 个 setTimeout () 实现 循环 效率 更 高 ， 但 也 不 是 没 
有 问题 。 无 论 set Interval () 还 是 setTimeout () 都 是 不 能 保证 时 间 精 度 的 。 作 为 第 二 个 参数 的 延 时 
只 能 保证 何 时 会 把 代码 添加 到 浏览 器 的 任务 队列 ,不 能 保证 添加 到 队列 就 会 立即 运行 。 如果 队列 前 面 还 
有 其 他 任务 ,那么 就 要 等 这 些 任务 执行 完 再 执行 。 简 单 来 讲 ， 这 里 毫秒 延 时 并 不 是 说 何 时 这 些 代码 会 执 
行 ， 而 只 是 说 到 时 候 会 把 回调 加 到 任务 队列 。 如 果 添 加 到 队列 后 ， 主 线程 还 被 其 他 任务 占用 ， 比 如 正在 
处 理 用 户 操作 ， 那 么 回调 就 不 会 马上 执行 。 


18.1.2 ”时 间 间 隔 的 问题 


知道 何 时 绘制 下 一 帧 是 创造 平滑 动画 的 关键 。 直 到 几 年 前 , 都 没有 办 法 确切 保证 何 时 能 让 浏览 器 把 
下 一 帧 绘制 出 来 。 随 着 <canvas> 的 流行 和 HTML5 游戏 的 兴起 ， 开 发 者 发 现 setInterval() 和 
setTimeout () 的 不 精确 是 个 大 问题 。 

浏览 器 自身 计时 器 的 精度 让 这 个 问题 雪上 加 霜 。 浏览 器 的 计时 占 精 度 不 足 毫 秒 。 以 下 是 几 个 浏览 
计时 器 的 精度 情况 : 

口 IE8 及 更 早 版 本 的 计时 器 精度 为 15.625 毫秒 ; 
口 IE9 及 更 晚 版 本 的 计时 吉 精 度 为 4 毫秒 ; 

口 Firefox 和 Safari 的 计时 器 精度 为 约 10 毫秒 ; 
口 Chrome 的 计时 央 精 度 为 4 毫秒 。 

IE9 之 前 版 本 的 计时 器 精度 是 15.625 毫秒 , 意味 着 0 ~ 15 范围 内 的 任何 值 最 终 要 么 是 0, 要 么 是 15， 
不 可 能 是 别 的 数 。IE9 把 计时 器 精度 改进 为 4 毫秒 , 但 这 对 于 动画 而 言 还 是 不 够 精确 。Chrome 计时 器 精 
度 是 4 毫秒 ， 而 Firefox 和 Safari 是 10 上 毫秒。 更 麻烦 的 是 ， 浏 览 絮 又 开始 对 切换 到 后 台 或 不 活跃 标签 页 
中 的 计时 器 执行 限 流 。 因 此 即使 将 时 间 间 隔 设 定 为 最 优 ， 也 免不了 只 能 得 到 近似 的 结果 。 
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18.1.3 requestAnimationFrame 


Mozilla 的 Robert O’Callahan 一 直 在 思考 这 个 问题 , 并 提出 了 一 个 独特 的 方案 。 他 指出 , 浏览 器 知道 CSS 
过 渡 和 动画 应 该 什么 时 候 开始 , 并 据 此 计算 出 正确 的 时 间 间 隔 , 到 时 间 就 去 刷新 用 户 界 面 。 但 对 于 JavaScript 
动画 ， 浏 览 器 不 知道 动画 什么 时 候 开 始 。 他 给 出 的 方案 是 创造 一 个 名 为 mozRequestAnimationFrame () 
的 新 方法 ， 用 以 通知 浏览 器 某 些 JavaScript 代码 要 执行 动画 了 。 这 样 浏览 器 就 可 以 在 运行 某 些 代 码 后 进 
行 适当 的 优化 。 目 前 所 有 浏览 器 都 支持 这 个 方法 不 带 前 缀 的 版 本 ， 即 requestAnimationFrame ()。 

requestAnimationFrame() 方 法 接收 一 个 参数 ， 此 参数 是 一 个 要 在 重 绘 屏幕 前 调用 的 函数 。 这 个 
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函数 就 是 修改 DOM 样式 以 反映 下 一 次 重 绘 有 什么 变化 的 地 方 。 为 了 实现 动画 循环 ， 可 以 把 多 个 
requestAnimationFrame () 调 用 串联 起 来 ， 就 像 以 前 使 用 setTimeout ( ) 时 一 样 : 











function updateProgress() { 
var div = document .getElementById("status"); 
div.style.width = (parseInt (div.style.width, 10) + 5) + "%S"; 
if (div.style.left != "100%") { 


requestAnimationFrame (updateProgress); 
} 
} 


requestAnimationFrame (updateProgress); 


因为 requestAnimationFrame () 只 会 调用 一 次 传人 的 函数 ， 所 以 每 次 更 新 用 户 界面 时 需要 再 手 
动 调用 它 一 次 。 同 样 ， 也 需要 控制 动画 何 时 停止 。 结 果 就 会 得 到 非常 平滑 的 动画 。 

目前 为 止 , requestAnimationFrame () 已 经 解决 了 浏览 器 不 知道 JavaScript 动画 何 时 开始 的 问题 ， 
以 及 最 佳 间隔 是 多 少 的 问题 , 但 是 , 不 知道 自己 的 代码 何 时 实际 执行 的 问题 呢 ? 这 个 方案 同样 也 给 出 了 
解决 方法 。 

传 给 requestAnimationFrame() 的 函数 实际 上 可 以 接收 一 个 参数 ， 此 参数 是 一 个 DoMHighRes- 
TimeStamp 的 实例 (比如 performance.now() 返 回 的 值 )， 表 示 下 次 重 绘 的 时 间 。 这 一 点 非常 重要 : 
recuestanimationFrame () 实 际 上 把 重 绘 任务 安排 在 了 未 来 一 个 已 知 的 时 间 点 上 , 而 且 通 过 这 个 参数 
告诉 了 开发 者 。 基 于 这 个 参数 ， 就 可 以 更 好 地 决定 如 何 调 优 动画 了 。 




































































18.1.4 cancelAnimationFrame 











与 setTimeout () 类 似 ，requestAnimationFrame() 也 返回 一 个 请 求 ID ， 可 以 用 于 通过 另 一 个 
方法 cancelAnimationFrame () 来 取消 重 绘 任务 。 下 面 的 例子 展示 了 刚 把 一 个 任务 加 入 队列 又 立即 将 
其 取消 : 

let requestID = window.requestAnimationFrame(() => { 

console.log('Repaint!'); 


window.cancelAnimationFrame (requestID); 




















18.1.5 通过 requestAnimationFrame 节 流 

requestAnimationFrame 这 个 名 字 有 时 候 会 让 人 误解 ,因为 看 不 出 来 它 跟 排 期 任务 有 关 。 支持 这 
个 方法 的 浏览 器 实际 上 会 暴露 出 作为 钩子 的 回调 队列 。 所 谓 钩 子 (hook )， 就 是 浏览 器 在 执行 下 一 次 重 
绘 之 前 的 一 个 点 。 这 个 回调 队列 是 一 个 可 修改 的 函数 列表 , 包含 应 该 在 重 绘 之 前 调用 的 函数 。 每 次 调用 
requestAnimationFrame () 都 会 在 队列 上 推 人 一 个 回调 函数 ， 队 列 的 长 度 没有 限制 。 

这 个 回调 队列 的 行为 不 一 定 跟 动 画 有 关 。 不 过 ， 通 过 requestanimationFrame() 递 归 地 向 队列 
中 加 入 回调 函数 ， 可 以 保证 每 次 重 绘 最 多 只 调用 一 次 回调 函数 。 这 是 一 个 非常 好 的 节 流 工具 。 在 频繁 执 
行 影响 页 面 外 观 的 代码 时 ( 比如 滚动 事件 监听 器 )， 可 以 利用 这 个 回调 队列 进行 节 流 。 

先 来 看 一 个 原生 实现 ,其 中 的 滚动 事件 监听 器 每 次 触发 都 会 调用 名 为 expensiveoperation()( 耗 
时 操作 ) 的 函数 。 当 向 下 滚动 网 页 时 ， 这 个 事件 很 快 就 会 被 触发 并 执行 成 百 上 千 次 : 

function expensiveOperation() { 


console.log('Invoked at', Date.now()); 


} 
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window.addEventListener('scroll', () => { 


expensiveOperation(); 
上 

















如 果 想 把 事件 处 理 程 序 的 调用 限制 在 每 次 重 绘 前 发 生 ， 那 么 可 以 像 这 样 下 面 把 它 封 装 到 *equest- 


AnimationFrame () 调 用 中 : 


制 操作 执行 的 频率 。 这 相 



































function expensiveOperation() { 
console.log('Invoked at', Date.now()); 


} 


window.addEventListener('scroll', () => { 
window.requestAnimationFrame (expensiveOperation); 























次 重 绘 的 多 余 调 用 。 此 时 ,定义 一 个 标 




















这 样 会 把 所 有 回调 的 执行 集中 在 重 绘 钩子 ,但 不 会 过 滤 掉 每 
量 ， 由 回调 设置 其 开关 状态 ， 0 


let enqueued = false; 

















function expensiveOperation() { 
console.log('Invoked at', Date.now()); 
enqueued = false; 


} 


window.addEventListener('scroll', () => { 
if (!enqueued) { 
enqueued = true; 
window.requestAnimationFrame (expensiveOperation); 
} 
Ee 


因为 重 绘 是 非常 频繁 的 操作 ， 所 以 这 还 算 不 上 真正 的 节 流 。 更 好 的 办 法 是 配合 使 用 一 个 计时 器 来 限 
， 计 时 需 可 以 限制 实际 的 操作 执行 间隔 ， 而 requestAnimationFrame 控制 
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在 浏览 器 的 哪个 泻 染 周期 中 执行 。 下 面 的 例子 可 以 将 回调 限制 为 不 超过 50 毫秒 执行 一 次 : 


18. 





| 








[e] 








let enabled = true; 


function expensiveOperation() { 
console.log('Invoked at', Date.now()); 


} 


window.addEventListener('scroll', () => { 
if (enabled) { 
enabled = false; 
window.requestAnimationFrame (expensiveOperation); 
window.setTimeout(() => enabled = true, 50); 
} 
> 


2 基本 的 画布 功能 


创建 <canvas> 元 素 时 至 少 要 设置 其 width 和 heignt 属性 , 这样 才能 告诉 浏览 器 在 多 大 面积 上 绘 
出 现在 开始 和 结束 标签 之 间 的 内 容 是 后 备 数据 ， 会 在 浏览 器 不 支持 <canvas> 元 素 时 显示 。 比 如 : 


<canvas id="drawing" width="200" height="200">A drawing of something.</canvas> 
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与 其 他 元 素 一 样 ，wiath 和 height 属性 也 可 以 在 DOM 节点 上 设置 ， 因 此 可 以 随时 修改 。 整 个 元 
素 还 可 以 通过 CSS 添加 样式 ， 并 且 元 素 在 添加 样式 或 实际 绘制 内 容 前 是 不 可 见 的 。 

要 在 画布 上 绘制 图 形 , 首先 要 取得 绘图 上 下 文 。 使 用 getcontext () 方 法 可 以 获取 对 绘图 上 下 文 的 
引用 。 对 于 平面 图 形 ， 需 要 给 这 个 方法 传 入 参数 "29" ， 表 示 要 获取 2D 上 下 文 对象: 


let drawing = document .getElementById("drawing"); 



































// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 


let context = drawing.getContext ("2d"); 
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} 
使 用 <canvas> 元 素 时 ， 最 好 先 测试 一 下 getcontext () 方 法 是 否 存在 。 有 些 浏览 器 对 HTML 规范 
中 没有 的 元 素 会 创建 默认 HTML 元 素 对 象 。 这 就 意味 着 即使 arawing 包含 一 个 有 效 的 元 素 引 用 ， 
getContext () 方 法 也 未 必 存 在 。 

可 以 使 用 topataURL () 方 法 导出 <canvas> 元 素 上 的 图 像 。 这 个 方法 接收 一 个 参数 : 要 生成 图 像 
的 MIME 类 型 (与 用 来 创建 图 形 的 上 下 文 无 关 ),。 例如 ,要 从 画布 上 导出 一 张 PNG 格式 的 图 片 ， 可 以 这 
样 做 : 


let drawing = document .getElementById("drawing"); 















































// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext 


{ 


// 取得 图 像 的 数据 URI 
let imgURI = drawing.toDataURL("image/png"); 


// 显示 图 片 


let image document .createElement ("img"); 
image.src imgURI; 
document .body .appendChild (image); 
} 
浏览 器 默认 将 图 像 编码 为 PNG 格式 ， 除 非 男 行 指定 。Firefox 和 Opera 还 支持 传人 "image/jpeg" 
进行 JPEG 编码 。 因 为 这 个 方法 是 后 来 才 增 加 到 规范 中 的 , 所 以 支持 的 浏览 器 也 是 在 后 面 的 版 本 实现 的 ， 


包括 IE9、Firefox 3.5 和 Opera 10。 


























注意 ”如果 画 布 中 的 图 像 是 其 他 域 绘制 过 来 的 , toDataURL() 方 法 就 会 抛 出 错误 。 相关 内 


容 本 章 后 面 会 讨论 。 





18.3 ”2D 绘图 上 下 文 

2D 绘图 上 下 文 提 供 了 绘制 2D 图 形 的 方法 ， 包 括 和 矩形 、 弧 形 和 路 径 。2D 上 下 文 的 坐标 原点 (0, 0) 在 
<canvas> 元 素 的 左上 角 。 所 有 坐标 值 都 相对 于 该 点 计算 ， 因此 x 坐标 向 右 增长 ,y 坐标 向 下 增长 。 默认 
情况 下 ，width 和 heignt 表示 两 个 方向 上 像素 的 最 大 值 。 
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18.3.1 填充 和 描 边 





2D 上 下 文 有 两 个 基本 绘制 操作 : 填充 和 描 边 。 填 充 以 指定 样式 〈 颜色 、 渐 变 或 图 像 ) 自动 填充 形 











状 , 而 描 边 只 为 图 形 边 界 着 色 。 大 多 数 2D 上 下 文 操 作 有 填充 和 描 边 的 变 体 ， 显 示 效 果 取 决 于 两 个 属性 : 


fillStyle 和 strokeStyle。 




















这 两 个 属性 可 以 是 字符 串 、 渐 变 对 象 或 图 案 对 象 ， 默 认 值 都 为 "#000000"。 字 符 串 表示 颜色 值 ， 可 











Ne 





是 CSS 支持 的 任意 格式 : 名 称 、 十 六 进 制 代码 、rgbp、rgba、hsl 或 hsla。 比 如 : 
let drawing = document .getElementById("drawing"); 


// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 


let context = drawing.getContext ("2d"); 
context.strokeStyle = "red"; 
context.fillStyle = "#0000ff"; 

} 


这 里 把 strokeStyle 设置 为 "red" ( CSS 颜色 名 称 )， 把 fillstyle 设置 为 "#0000ff" ( 




















蓝 色 )。 


所 有 与 描 边 和 填充 相关 的 操作 都 会 使 用 这 两 种 样式 ， 除 非 再 次 修改 。 这 两 个 属性 也 可 以 是 渐变 或 图 案 ， 


本 章 后 面 会 讨论 。 
18.3.2 ”绘制 矩形 








和 矩形 是 唯一 一 个 可 以 直接 在 2D 绘图 上 下 文中 绘制 的 形状 。 与 绘制 矩形 相关 的 方法 有 3 个 : 





























fillRect ()、strokeRect () 和 clearRect () 。 这 些 方法 都 接收 4 个 参数 : 矩形 x 坐 标 、 矩 芒 ? 坐 标 、 


抢 形 宽度 和 和 矩形 高 度 。 这 几 个 参数 的 单位 都 是 像素 。 
fillRect () 方 法 用 于 以 指定 颜色 在 画布 上 绘制 并 填充 和 矩形。 填充 的 颜色 使 用 fillstyle 
定 。 来 看 下 面 的 例子 : 


let drawing = document .getElementById ("drawing"); 














// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
let context = drawing.getContext ("2d");} 


/* 
* 引 自 MDN 文档 
Rf 


// 绘制 红色 矩形 
context .fillstyle = "#fEf0000"7 
context .fillRect(10, 10, 50, 50); 


// 绘制 半 透 明 蓝 色 矩 形 
Context .fi11Style = "rgba(0,0,255,0.5)"; 
Context .fillRect(30, 30, 50, 50); 

} 


以 上 代码 先 将 fillstyle 设置 为 红色 并 在 坐标 点 (10, 10) 绘 制 了 一 个 宽 高 均 为 50 像素 的 矩 














属性 指 

















攻 。 接 


着 , 使 用 rgba() 格 式 将 fillstyle 设置 为 半 透 明 蓝 色 ， 并 绘制 了 男 一 个 与 第 一 个 部 分 重 全 的 矩形 。 




















结果 就 是 可 以 透 过 蓝 色 和 矩形 看 到 红色 矩形 ( 见 图 18-1 )。 
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图 18-1 
strokeRect () 方 法 使 用 通过 strokestyle 属性 指定 的 颜色 绘制 矩形 轮 廊 。 下 面 是 一 个 例子 : 


let drawing = document .getElementById("drawing"); 























// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
let context = drawing.getContext ("2d"); 





/* 
* 引 自 MDN 文档 
4 


// 绘制 红色 轮 廊 的 矩形 
COntLext .strokeStyle = "#ff£f0000"; 
context.strokeRect (10, 10, 50, 50); 


// 绘制 半 迁 明 蓝 色 轮 廓 的 矩形 
context .strokeStyle = "rgba(0,0,255,0.5)"; 
context .strokeRect (30, 30, 50, 50); 

} 


以 上 代码 同样 绘制 了 两 个 重 双 的 矩 形 ， 不 过 只 有 轮廓 ， 而 不 是 实心 的 ( 见 图 18-2 )。 











注意 ” 描 边 宽度 由 1inewigdth 属性 控制 ， 它 可 以 是 任意 整数 值 。 类 似 地 ，1linecap 属性 控 


制 线条 端点 的 形状 [ "butt" (平头 和 "rzound"( 出 圆 头 ) 或 "square" (出 方 头 )], 而 lineJoin 
属性 控制 线条 交点 的 形状 [ "round" ( 圆 转 )、"bevel" ( 取 平 ) 或 "miter" (出 尖 )]。 











使 用 clearRect () 方 法 可 以 擦 除 画 布 中 某 个 区 域 。 该 方法 用 于 把 绘图 上 下 文中 的 某 个 区 域 变 透明 。 
通过 先 绘制 形状 再 擦 除 指定 区 域 , 可 以 创建 出 有 趣 的 效果 , 比如 从 已 有 矩形 中 开 个 孔 。 来 看 下 面 的 例子 : 


let drawing = document .getElementById("drawing"); 

















// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
let context = drawing.getContext ("2d"); 


/* 


* 引 自 MDN 文档 
wy 
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} 


以 上 代码 在 两 个 矩形 重合 的 区 域 上 擦 除了 一 个 小 和 矩形， 图 18-3 展示 了 结果 。 


// 绘制 红色 矩形 
context.fillStyle = "#f£ff0000"; 
context.tillRect(10, 10, 50, 50)» 


// 绘制 半 透 明 蓝 色 矩 形 
context.fillStyle = "rgba(0,0,255,0.5)"; 
context.fillRect (30, 30, 50, 50); 


// 在 前 两 个 算 形 重合 的 区 域 擦 除 一 个 算 形 区 域 
context.clearRect (40, 40, 10, 10); 









































18.3.3 ”绘制 路 径 


2D 绘图 上 下 文 支 持 很 多 在 画布 上 绘制 路 径 的 方法 。 通 过 路 径 可 以 创建 复杂 的 形状 和 线条 。 要 绘制 
路 径 ， 必 须 首 先 调用 beginPath () 方 法 以 表示 要 开始 绘制 新 路 径 。 然 后 ， 再 调用 下 列 方法 来 绘制 路 径 。 


Darc(x, y, radius, startAngle, endAngle, counterclockwise): 以 坐标 (x，y) 为 圆 





口 rect (x，y，wiath，height): 以 给 定 宽度 和 高 度 在 坐标 点 (x，y) 绘制 一 个 矩形 。 这 个 方法 


























心 ， 以 ragius 为 半径 绘制 一 条 弧 线 ， 起 始 角 度 为 startangle， 结束 角度 为 sndangle (都 是 
弧度 )。 最 后 一 个 参数 counterclockwise 表示 是 否 逆 时 针 计算 起 始 角 度 和 结束 角度 ( 默认 为 
顺 时 针 )。 














口 arcTo (x1，y1l，x2，y2，radius): 以 给 定 半 径 radius， 经 由 (xl1，y1) 绘 制 一 条 从 上 一 点 


到 (x2，y2) 的 弧 线 。 


D bezierCurveTo (cilx, cly, c2x, c2y, x, y): 以 (c1x， cly) 和 (c2x， c2y) 为 控制 点 ， 


绘制 一 条 从 上 一 点 到 (x，y) 的 弧 线 (三 次 贝 塞 尔 曲 线 )。 





口 1ineTo (x，y): 绘制 一 条 从 上 一 点 到 (x，y) 的 直线 。 
口 moveTo (x，y): 不 绘制 线条 ， 只 把 绘制 光标 移动 到 (x，y)。 
口 quadraticCurveTo(cx，cy，x,， y): 以 (cx，cy) 为 控制 点 ,绘制 一 条 从 上 一 点 到 (x，y) 








的 弧 线 (二 次 贝 塞 尔 曲 线 )。 




















与 strokeRect () 和 fillRect () 的 区 别 在 于 ， 它 创建 的 是 一 条 路 径 ， 而 不 是 独立 的 图 形 。 





创建 路 径 之 后 ， 可 以 使 用 closePath () 方 法 绘制 一 条 返回 起 点 的 线 。 如 果 路 径 已 经 完成 ， 则 既 可 








以 指定 fillstyle 属性 并 调用 fi11() 方 法 来 填充 路 径 ， 也 可 以 指定 strokestyle 属性 并 调用 
stroke () 方 法 来 描画 路 径 ， 还 可 以 调用 clip () 方 法 基于 已 有 路 径 创 建 一 个 新 剪 切 区 域 。 
下 面 这 个 例子 使 用 前 面 提 到 的 方法 绘制 了 一 个 不 带 数字 的 表盘 : 
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let drawing = document .getElementById("drawing"); 


// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
let context = drawing.getContext ("2d"); 


// 创建 路 径 


context .beginPath(); 


// 绘制 外 辆 
context.arc(100, 100, 99, 0, 2 * Math.PI, false); 


// 绘制 内 辆 
Context .moveTo(194, 100); 
context.arc(100, 100, 94, 0, 2 * Math.PI, false); 





// 绘制 分 针 
context .moveTo(100, 100); 
context.lineTo(100, 15); 


// 绘制 时 针 
context .moveTo(100, 100); 
context.lineTo(35, 100); 


// 描画 路 径 
Context .stroke(); 


} 

这 个 例子 使 用 arc () 绘制 了 两 个 圆 形 ， 一 个 外 圆 和 一 个 内 圆 ， 以 构成 表盘 的 边框 。 外 圆 半 径 99 像 
素 ， 原 点 为 (100,100)， 也 就 是 画布 的 中 心 。 要 绘制 完整 的 圆 形 ， 必 须 从 0 弧度 绘制 到 2r 弧度 (使 用 数 
学 常量 Math. PI )。 而 在 绘制 内 圆 之 前 ， 必 须 先 把 路 径 移动 到 内 圆 上 的 一 点 ， 以 避免 绘制 出 多 余 的 线条 。 
第 二 次 调用 arc () 时 使 用 了 稍 小 一 些 的 半径 ,以 呈现 边框 效果 。 然 后 ,再 组 合 运 用 moveTo () 和 lineTo () 
分 别 绘制 分 针 和 时 针 。 最 后 一 步 是 调用 stroke () ， 得 到 如 图 18-4 所 示 的 图 像 。 






























































图 18-4 


路 径 是 2D 上 下 文 的 主要 绘制 机 制 ， 为 绘制 结果 提供 了 很 多 控制 。 因 为 路 径 经 常 被 使 用 ， 所 以 也 有 
一 个 isPointInPath() 方 法 ,接收 x 轴 和 y 轴 坐标 作为 参数 。 这 个 方法 用 于 确定 指定 的 点 是 否 在 路 径 
上 ， 可 以 在 关闭 路 径 前 随时 调用 ， 比 如 : 


if (context .isPointInPath(100，100)) { 
alert ("Point (100, 100) is in the path."); 























} 
2D 上 下 文 的 路 径 API 非常 可 靠 ， 可 用 于 创建 涉及 各 种 填充 样式 、 描 述 样 式 等 的 复杂 图 像 。 
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18.3.4 ”绘制 文本 

















文本 和 图 像 混合 也 是 常见 的 绘制 需求 ,因此 2D 绘 图 上 下 文 还 提供 了 绘制 文本 的 方法 , 即 fi1lText () 

















和 strokeText ()。 这 两 个 方法 都 接收 4 个 参数 : 要 绘制 的 字符 串 、x 坐标 、y 坐标 和 
宽度 。 而 且 ， 这 两 个 方法 最 终 绘制 的 结果 都 取决 于 以 下 3 个 属性 。 
口 font: 以 CSS 语法 指定 的 字体 样式 、 大 小 、 字 体 族 等 ， 比 如 "10px Arial"。 























1 可 选 的 最 大 像素 


口 textAlign: 指定 文本 的 对 齐 方式 ， 可 能 的 值 包括 "start"、"enG"、"left"、"right" 和 











"center"。 推荐 使 用 "start" 和 "end", 不 使 用 "left" 和 "right"， 因 为 前 者 无 论 在 从 左 到 右 























书写 的 语言 还 是 从 右 到 左 书 写 的 语言 中 含义 都 更 明确 。 
口 textBaseLine: 指定 文本 的 基线 ， 可 能 的 值 包 括 "top" 、"hanging' 


"alphabetic"、"ideographic" 和 "bottom"。 














"~ “middle™s 


这 些 属性 都 有 相应 的 默认 值 ， 因 此 没 必要 每 次 绘制 文本 时 都 设置 它们 。fi11Text () 方 法 使 用 





























字 “2” 
context.font = "boldq 14px Arial"; 
context.textAlign = "center"; 
context.textBaseline = "middle"; 


context.fillText ("12", 100, 20); 


结果 就 得 到 了 如 图 18-5 所 示 的 图 像 。 








图 18-5 


因为 把 textAlign 设置 为 了 "center", 把 textBaseline 设置 为 "middle" 














fillStyle 属性 绘制 文本 ， 而 strokeText () 方 法 使 用 strokeStyle 属性 。 通 常 ，fillText () 方 法 
是 使 用 最 多 的 ， 因 为 它 模拟 了 在 网 页 中 泻 染 文本 。 例 如 , 下面 的 例子 会 在 前 一 节 示 例 的 表盘 顶部 绘制 数 





， 所 以 (100, 20) 表 


示 文 本 水 平和 垂直 中 心 点 的 坐标 。 如 果 textAlign 是 "start"， 那 么 x 坐 标 在 从 左 到 右 书写 的 语言 








E 标 。 例 如 : 





表示 文本 的 左 侧 坐 标 ， 而 "ena" 会 让 x 坐标 在 从 左 到 右 书写 的 语言 中 表示 文本 的 右 侧 4 





// 正常 

Context .font = "boldq 14px Arial"; 
context.textAlign = "center"; 
context.textBaseline = "middle"; 
CotCExt fTeKt 2 T0020 
// 与 开头 对 齐 

context .七 extA1Lign = "start"; 
Context .fillText ("12", 100, 40); 
// 与 末尾 对 齐 

COntext .textAlign = "end" 


Context .fillText ("12", 100, 60); 
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字符 串 "12" 被 绘制 了 3 次 ， 每 次 使 用 的 坐标 都 一 样 ， 但 textAlign 值 不 同 。 为 了 让 每 个 字符 串 不 
至 于 重合 ,每 次 绘制 的 y 坐标 都 会 设置 得 大 一 些 。 结 果 就 是 如 图 18-6 所 示 的 图 像 。 


























图 18-6 


因为 表盘 中 垂直 的 线条 是 居中 的 , 所 以 文本 的 对 齐 方 式 就 一 目 了 然 了 。 类 似 地 , 通过 修改 textBaseline 
属性 ， 可 以 改变 文本 的 垂直 对 齐 方式 。 比 如 ， 设 置 为 "top" 意 味 着 y 坐标 表示 文本 顶部 ，"bottom" 表 示 
文本 底部 ，"hanging"、"alphabetic" 和 "ideographic" 分 别 引 用 字体 中 特定 的 基准 点 。 

由 于 绘制 文本 很 复杂 ， 特 别 是 想 把 文本 绘制 到 特定 区 域 的 时 候 ， 因 此 2D 上 下 文 提 供 了 用 于 辅助 确 
定 文 本 大 小 的 measureText () 方 法。 这 个 方法 接收 一 个 参数 ， 即 要 绘制 的 文本 ， 然 后 返回 一 个 
TextMetrics 对 象 。 这 个 返回 的 对 象 目前 只 有 一 个 属性 wiath， 不 过 将 来 应 该 会 增加 更 多 度量 指标 。 

measureText () 方 法 使 用 font 、textAlign 和 textBaseline 属性 当前 的 值 计 算 绘制 指定 文本 
后 的 大 小 。 例 如 ， 假 设 要 把 文本 "Hello world!" 放 到 一 个 140 像素 宽 的 矩形 中 ， 可 以 使 用 以 下 代码 ， 
从 100 像素 的 字体 大 小 开始 计算 ， 不 断 递减 ， 直 到 文本 大 小 合适 : 


















































let fontSize = 100; 
context.font = fontSize + "px Arial"; 
while(context.measureText ("Hello world!") .width > 140) { 


fontSize= ;3 
context.font = fontSize + "px Arial"; 


} 
context.fillText ("Hello world!", 10, 10); 
context.fillText ("Font size is " + fontSize + "px", 10, 50); 


fillText () 和 strokeText () 方 法 还 有 第 四 个 参数 ， 即 文本 的 最 大 宽度 。 这 个 参数 是 可 选 的 
( Firefox 4 是 第 一 个 实现 它 的 浏览 器 )， 如 果 调 用 fillText () 和 strokeText () 时 提供 了 此 参数 ， 但 要 
绘制 的 字符 串 超出 了 最 大 宽度 限制 ， 则 文本 会 以 正确 的 字符 高 度 绘制 ， 这 时 字符 会 被 水 平 压缩 ， 以 达到 
限定 宽度 。 图 18-7 展示 了 这 个 参数 的 效果 。 


eowald 
Font slze Is 26px 


图 18-7 























绘制 文本 是 一 项 比较 复杂 的 操作 ， 因 此 支持 <canvas> 元 素 的 浏览 器 不 一 定 全 部 实现 了 相关 的 文本 
绘制 API。 
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18.3.5 ”变换 


上 下 文 变 换 可 以 操作 绘制 在 画布 上 的 
上 下 文 时 , 会 以 默认 值 初 始 化 变换 矩阵 ， 从 而 让 绘制 操作 如 实 应 
生 不 同 的 结果 。 


图 像 。2D 绘 








换 ， 可 以 导致 以 不 同 的 变换 矩阵 应 用 绘制 操作 ， 从 而 产 


以 下 方法 可 用 
D rotate(angle): 围绕 原点 把 
口 scale (scalex, scaleY) :通过 在 x 身 

















于 改变 绘制 上 下 文 的 变换 矩阵 。 









































和 scaleY 的 默认 值 都 是 1.0。 





i 
m2_1 m2 2 dy 
0 0 J 





口 translate (x，y): 把 原点 移动 到 (x，y) 。 执 行 这 个 操作 后 ， 坐 标 (0, 0) 就 会 变 
口 transform(ml_1,， m1l_2,m2_1，m2_2，dx，dy): 像 下 面 这 样 通过 和 矩阵 乘法 直接 修改 矩阵。 


图 上 下 文 支持 所 有 常见 的 绘制 变换 。 在 创建 绘制 























用 到 绘制 结果 上 。 对 绘制 上 下 文 应 用 变 











图 像 旋转 angle 弧度 。 
乘 以 scaleX、 在 7 轴 乘 以 scaleY 来 缩放 图 像 。 scalex 


成 (x, y)。 











D setTransform(ml_1, ml _2, m2_1, m2_2, dx, dy): 把 矩阵 重 置 为 默认 值 ， 再 以 传人 的 


变换 可 以 简单 ， 也 可 以 复杂 。 例 如 ， 在 前 面 绘制 表盘 的 例子 





参数 调用 transform() 。 





那 再 绘制 表 针 就 非常 简单 了 : 


Jet drawing 


// 确保 浏览 器 支持 <canvas> 


EE 


} 


(drawing.getContext) { 
let context drawing.getContext ("2d"); 


// 创建 路 径 
context .beginPath(); 


// 绘制 外 辆 


CONntext. arce(l00;, L100 9570 -2 * Math: PL; 





// 绘制 内 辆 
context.moveTo(194, 100); 
context.arc(100, 100, 94, 0, 2 * Math.PI， 
// 移动 原点 到 表盘 中 心 
context.translate(100, 100); 
// 绘制 分 针 

context .moveTo(0, 0); 
context.lineTo(0, -85); 


// 绘制 时 针 
context .moveTo(0, 0); 
context.lineTo(-65, 0); 


// 描画 路 径 
context.stroke(); 





把 原点 移动 到 (100, 100)， 也 就 是 表盘 的 中 心 后 , 要 
有 计算 都 是 基于 (0, 0)， 而 不 是 (100, 100) 了 。 当 然 ， 也 可 以 使 用 rotate() 方 法 来 转动 表 针 : 








fa 


fa 


给 




















1， 如 果 把 坐标 原点 移动 到 表盘 中 心 ， 








document .getElementById("Qrawing" ) ， 


lse); 


lse); 





剖 表 针 只 需 简 单 的 数学 计算 即 可 。 这 是 因为 所 
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let drawing = document .getElementById("drawing"); 


// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
let context = drawing.getContext ("2d"); 


// 创建 路 径 


context .beginpath(); 





// 绘制 外 国 
context.arc(100, 100, 99, 0, 2 * Math.PI, false); 











// 绘制 内 辆 
context .moveTo(194, 100); 
context.arc(100, 100, 94, 0, 2 * Math.PI, false); 





// 移动 原点 到 表盘 中 心 


context.translate(100, 100); 








// 旋转 表 针 


context .rotate(1); 


// 绘制 分 针 
context .moveTo(0, 0); 
context.lineTo(0, -85); 


// 绘制 时 针 
context .moveTo(0, 0); 
context.lineTo(-65, 0); 


// 描画 路 径 
context.stroke(); 











因为 原点 已 经 移动 到 表盘 中 心 , 所 以 旋转 就 是 以 该 点 为 圆心 的 。 这 相当 于 把 表 针 一 头 固定 在 表盘 中 
心 ， 然 后 向 右 拨 了 一 个 弧度 。 结 果 如 图 18-8 所 示 。 








图 18-8 


所 有 这 些 变换 ， 包 括 fillstyle 和 strokeStyle 属性 ,会 一 直 保 留 在 上 下 文中 ， 直 到 再 次 修改 
它们 。 虽然 没有 办 法 明确 地 将 所 有 值 都 重 置 为 默认 值 , 但 有 两 个 方法 可 以 帮 我 们 跟踪 变化 。 如 果 想 着 什 
么 时 候 再 回 到 当前 的 属性 和 变换 状态 ， 可 以 调用 save () 方 法 。 调 用 这 个 方法 后 ， 所 有 这 一 时 刻 的 设置 
会 被 放 到 一 个 暂 存 栈 中 。 保 存 之 后 ， 可 以 继续 修改 上 下 文 。 而 在 需要 恢复 之 前 的 上 下 文 时 ， 可 以 调用 
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restore() 方 法 。 这 个 方法 会 从 暂 存 栈 中 取出 并 恢复 之 前 保存 的 设置 。 多 次 调用 save () 方 法 可 以 在 暂 
存 栈 中 存储 多 套 设置 ， 然 后 通过 restore () 可 以 系统 地 恢复 。 下 面 来 看 一 个 例子 : 
context.fillStyle = "#f£ff0000"; 
context.save(); 
context.fillStyle = "#00ff00"; 
context.translate(100, 100); 
context.save(); 
context.fillStyle = "#0000ff"; 
context.fillRect (0, 0, 100, 200); // 在 (100，100) 绘 制 蓝 色 珑 形 
Context .YeStore () 
context.fillRect(10, 10, 100, 200); // 在 (100，100) 绘 制 绿色 矩形 
context.restore(); 
context.fillRect (0, 0, 100, 200); // 在 (0，0) 绘 制 红色 矩形 


以 上 代码 先 将 fillstyle 0 然后 调用 save ( 














。 接着, 将 





标 移动 到 (100, 100)， 并 再 次 调用 save ( 


， 保 存 设置 。 随 后 ， fillstyle 





lStyle 修改 为 绿色 ， 坐 
属性 设置 为 蓝 色 并 绘制 一 


El 








E 


个 矩形 。 因 为 此 时 坐标 被 移动 了 ， 所 以 i 100)。 在 调用 restore() 


fillstyle 恢复 为 绿色 ， 





人 会 制 的 矩 














之 后 ， 























攻 是 绿色 的 。 而 绘制 矩 





E 的 坐标 是 (110, 110)， 因 为 变换 
之 后 ， 变 换 被 移 除 ，fillstyle 也 恢复 为 红色 。 绘 制 最 后 一 个 矩形 





仍 在 起 作用 。 再 次 调用 restore ( 
的 坐标 变 成 了 (0, 0)。 
) 方 法 只 


18.3.6 ”绘制 图 像 


2D 绘图 上 下 文 内 置 支持 操作 图 像 。 如 果 想 把 现 有 图 像 绘 制 到 画布 上 , 可 以 使 用 arawImage () 方 法 。 
这 个 方法 可 以 接收 3 组 不 同 的 参数 , 并 产生 不 同 的 结果 。 最 简单 的 调用 是 传人 一 个 HTML 的 <img> 元 素 ， 








保存 应 用 到 绘图 上 下 文 的 设置 和 变换 ， 不 保存 绘 








图 上 下 文 的 内 容 。 


i 
六 已 ，save( 





















































































































































以 及 表示 绘制 日 标 的 x 和 yy 坐标 ,结果 是 把 图 像 绘 制 到 指定 位 置 。 比 如 : 

let image = document.images[0]; 

context .drawImage (image, 10, 10); 

以 上 代码 获取 了 文本 中 的 第 一 个 图 像 , 然后 在 画布 上 的 坐标 (10, 10) 处 将 它 绘制 了 出 来 。 绘制 出 来 的 
到 像 与 原来 的 图 像 一 样 大 。 如 果 想 改变 所 绘制 图 像 的 大 小 ， 可 以 再 传人 男 外 两 个 参数 : 目标 宽度 和 目标 
高 度 。 这 里 的 缩放 只 影响 绘制 的 图 像 ， 不 影响 上 下 文 的 变换 矩阵 。 比 如 下 面 的 例子 : 

context.drawImage (image, 50, 10, 20, 30); 

执行 之 后 ， 图 像 会 缩放 到 20 像素 宽 、30 像素 高 。 

还 可 以 只 把 图 像 绘 制 到 上 下 文中 的 一 个 区 域 。 此 时 ， 需 要 给 arawImage () 提供 9 个 参数 : 要 绘制 
的 图 像 、 源 图 像 x 坐标 、 源 图 像 y 坐标 、 沽 图 像 党 度 源 图 像 高 度 、 目 标 区 域 x 坐 标 、 目 标 区 域 坐标、 




















目标 区 域 宽度 和 目标 区 域 高 度 。 这 个 重 载 后 的 arawImage () 方 法 可 以 实现 最 大 限度 的 控制 ， 比 如 : 
context .drawImage (image, 0, 10, 50, 50, 0, 100, 40, 60); 
最 终 ， 原始 图 像 中 只 有 一 部 分 会 绘制 到 画布 上 。 这 一 部 分 从 (0, 10) 开 始 ，50 像素 宽 、50 像素 高 。 而 
绘制 到 画布 上 时 ,会 从 (0, 100) 开 始 ， 变 成 40 像素 宽 、60 像素 高 。 
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像 这 样 可 以 实现 如 图 18-9 所 示 的 有 趣 效 果 。 
© 
全 





EE 本 


第 一 个 参数 除了 可 以 是 HTML 的 <img> 元 素 ， 还 可 以 是 另 一 个 <canvas> 元 素 ， 这 样 就 会 把 另 一 个 
画布 的 内 容 绘制 到 当前 画布 上 。 

结合 其 他 一 些 方法 ，drawImage () 方 法 可 以 方便 地 实现 常见 的 图 像 操作 。 操 作 的 结果 可 以 使 用 
toDataURL () 方 法 获取 。 不 过 有 一 种 情况 例外 : 如 果 绘 制 的 图 像 来 自 其 他 域 而 非 当 前 页 面 , 则 不 能 获取 
其 数据 。 此 时 ， 调 用 topataURL () 将 抛 出 错误 。 比 如 ， 如 果 来 自 www.example.com 的 页 面 上 绘制 的 是 
来 自 www.wrox.com 的 图 像 ， 则 上 下 文 就 是 “ 脏 的 ”， 获 取 数 据 时 会 抛 出 错误 。 
























































18.3.7 “阴影 


2D 上 下 文 可 以 根据 以 下 属性 的 值 自 动 为 已 有 形状 或 路 径 生成 阴影 。 
口 shadowColor: CSS 颜色 值 ， 表 示 要 绘制 的 阴影 颜色 ， 默 认为 黑色 。 
口 shadqowoffsetX: 阴影 相对 于 形状 或 路 径 的 x 坐 标的 偏 移 量 ， 默 认为 0。 
口 shadowOffsetY: 阴影 相对 于 形状 或 路 径 的 坐标 的 偏 移 量 ， 默 认为 0。 
口 shadqowBlur: 像素 ， 表 示 阴 影 的 模糊 量 。 默 认 值 为 0， 表 示 不 模糊 。 
这 些 属性 都 可 以 通过 context 对 象 读 写 。 只 要 在 绘制 图 形 或 路 径 前 给 这 些 属性 设置 好 适当 的 值 ， 
阴影 就 会 自动 生成 。 比 如 ; 


let _ context = drawing.getContext ("2d"); 
// 设置 阴影 
Context . ShadowOftfsetX = 
Context .shadowOffsetY = 
context.shadowBlur = 4; 
context .shadowColor = 
// 绘制 红色 矩形 
context.fillStyle = "#f£ff0000"; 

context .fillReet:(L10, 十 07 50% 50)3 

// 绘制 蓝 色 和 矩形 

eoritext ESEZTLGP s. "roba(0 .0 255..1) 
context.fillRect (30, 30, 50, 50); 


这 里 两 个 矩形 使 用 了 相同 的 阴影 样式 ， 得 到 了 如 图 18-10 所 示 的 结果 。 



















































































5; 
5; 


"rgba(0, 0, 0, 0.5)"; 
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图 18-10 


18.3.8 渐变 


渐变 通过 canvasGradient 的 实例 表示 , 在 2D 上 下 文中 创建 和 修改 都 非常 简单 。 要 创建 一 个 新 的 
线性 渐变 , 可 以 调用 上 下 文 的 createLinearGradient () 方 法 。 这 个 方法 接收 4 个 参数 : 起 点 x 坐标、 
起 点 上 坐标 、 终 点 x 坐标 和 终点 y 坐标 ,调用 之 后 ,该 方法 会 以 指定 大 小 创建 一 个 新 的 CanvasGradient 
对 象 并 返回 实例 。 

有 了 gradient 对 象 后 ， 接 下 来 要 使 用 adaacolorstop () 方 法 为 渐变 指定 色 标 。 这 个 方法 接收 两 
个 参数 : 色 标 位 置 和 CSS 颜色 字符 串 。 色 标 位 置 通过 0 ~ 1 范围 内 的 值 表示 ，0 是 第 一 种 颜色 ，! 是 最 后 
一 种 颜色 。 比 如 : 


Jet gradient = context.createLinearGradient (30, 30, 70, 70); 
gradient.addColorStop(0, "white"); 
gradient.addColorStop(1, "black"); 


这 个 gradient 对 象 现在 表示 的 就 是 在 画布 上 从 (30, 30) 到 (70, 70) 绘 制 一 个 渐变 。 渐 变 的 起 点 颜色 
为 白色 ,终点 颜色 为 黑色 。 可 以 把 这 个 对 象 赋 给 fillstyle 或 strokestyle 属性 ， 从 而 以 渐变 填充 
或 描画 绘制 的 图 形 : 


// 绘制 红色 矩形 

context.fillStyle = "#f£ff0000"; 
context.fillRect (10, 10, 50, 50); 
// 绘制 渐变 矩形 

Context .fillSstyle = gradient; 
context.fillRect (30, 30, 50, 50); 


为 了 让 渐变 覆盖 整个 矩形 ， 而 不 只 是 其 中 一 部 分 ,两 者 的 坐标 必须 搭配 合适 。 以 上 代码 将 得 到 如 图 
18-11 所 示 的 结果 。 












































图 18-11 


如 果 和 矩形 没有 绘制 到 渐变 的 范围 内 ， 则 只 会 显示 部 分 渐变 。 比 如 : 

















context.fillStyle = gradient; 
context .fillRect(50, 50, 50, 50); 
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以 上 代码 执行 之 后 绘制 的 矩形 只 有 左上 角 有 一 部 分 白色 。 这 是 因为 矩形 的 起 点 在 渐变 的 中 间 ， 此 时 
颜色 的 过 渡 几 乎 要 完成 了 。 结 果 矩 形 大 部 分 地 方 是 黑色 的 ,因为 渐变 不 会 重复 。 保 持 渐变 与 形状 的 一 至 
非常 重要 ， 有 时 候 可 能 需要 写 个 函数 计算 相应 的 坐标 。 比 如 : 


function createRectLinearGradient (context, x, y, width, height) { 
return context.createLinearGradient (x, y, x+width, y+height); 


} 
这 个 函数 会 基于 起 点 的 x、y 坐标 和 传人 的 宽度 、 高 度 创建 渐变 对 象 ， 之 后 调用 fillRect () 方 法 
时 可 以 使 用 相同 的 值 : 


let gradient = createRectLinearGradient (context, 30, 30, 50, 50); 

gradient .addColorSstop(0, "white"); 

gradient .addColorStop(1, "black"); 

// 绘制 渐变 矩形 

Context .fillStyle = gradient; 

context.fillRect (30, 30, 50, 50); 

计算 坐标 是 使 用 画布 时 重要 而 复杂 的 问题 ,使 用 类 似 createRectLinearGradient () 这 样 的 辅助 
函数 能 让 计算 坐标 简单 一 些 。 

径 向 渐变 (或 放射 性 渐变 ) 要 使 用 createRadialGradient () 方 法 来 创建 。 这 个 方法 接收 6 个 参 
数 ， 分 别 对 应 两 个 圆 形 圆心 的 坐标 和 半径 。 前 3 个 参数 指定 起 点 圆 形 中 心 的 x、y 坐标 和 半径 , 后 3 个 参 
数 指定 终点 圆 形 中 心 的 x、y 坐标 和 半径 。 在 创建 径 向 渐变 时 ， 可 以 把 两 个 圆 形 想象 成 一 个 圆柱 体 的 两 
个 圆 形 表面 。 把 一 个 表面 定义 得 小 一 点 ， 另 一 个 定义 得 大 一 点 ， 就 会 得 到 一 个 圆锥 体 。 然 后 ， 通 过 移动 
两 个 圆 形 的 圆心 ， 就 可 以 旋转 这 个 圆锥 体 。 

要 创建 起 点 圆心 在 形状 中 心 并 向 外 扩散 的 径 向 渐变 ， 需 要 将 两 个 圆 形 设置 为 同心 圆 。 比 如 ， 要 在 前 
面 例 子 中 和 矩形 的 中 心 创建 径 向 渐变 , 则 渐变 的 两 个 圆 形 的 圆心 都 必须 设置 为 (5$, 5$3)。 这 是 因为 矩形 的 起 
点 是 (30, 30)， 终 点 是 (80, 80)。 代 码 如 下 : 

let gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30); 

gradient .addColorStop(0, "white"); 

gradient .addColorStop(1, "black"); 

// 绘制 红色 算 形 

context.fillStyle = "#ff0000"; 

context.fillRect (10, 10, 50, 50); 

// 绘制 渐变 矩形 

context.fillStyle = gradient; 

context.fillRect (30, 30, 50, 50); 


运行 以 上 代码 会 得 到 如 图 18-12 所 示 的 效果 。 









































































































































图 18-12 


因为 创建 起 来 要 复杂 一 些 ， 所 以 径 向 渐变 比较 难处 理 。 不 过 ,通常 情况 下 ， 起 点 和 终点 的 圆 形 都 是 
同心 圆 ， 只 要 定义 好 圆心 坐标 ， 剩 下 的 就 是 调整 各 自 羊 径 的 问题 了 。 
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18.3.9 图案 


图 案 是 用 于 填充 和 描画 图 形 的 重复 图 像 。 要 创建 新 图 案 ， 可 以 调用 createPattern() 方 法 并 传人 
两 个 参数 : 一 个 HTML <img> 元 素 和 一 个 表示 该 如 何 重复 图 像 的 字符 串 。 第 二 个 参数 的 值 与 CSS 的 
background-repeat 属性 是 一 样 的 ， 包括 "repeat"、 "repeat-x"、 "repeat-y" 和 和 "no-repeat"。 
比如 : 


let image = document.images[0], 
pattern = context.createPattern(image, "repeat"); 
// 绘制 矩形 
context.fillStyle = pattern; 
context.fillRect(10, 10, 150, 150); 


记 住 , 跟 渐变 一 样 ， 图案 的 起 点 实际 上 是 画布 的 原点 (0, 0)。 将 填充 样式 设置 为 图 案 , 表示 在 指定 位 
置 而 不 是 开始 绘制 的 位 置 显示 图 案 。 以 上 代码 执行 的 结果 如 图 18-13 所 示 。 
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图 18-13 





传 给 createPattern () 方 法 的 第 一 个 参数 也 可 以 是 <viaqeo> 元 素 或 者 另 一 个 <canvas> 元 素 。 


18.3.10 图像 数据 


2D 上 下 文中 比较 强大 的 一 种 能 力 是 可 以 使 用 getImageData () 方 法 获取 原始 图 像 数 据 。 这 个 方法 
接收 4 个 参数 : 要 取得 数据 中 第 一 个 像素 的 左上 角 坐 标 和 要 取得 的 像素 宽度 及 高 度 。 例 如 ， 要 从 (10, 5) 
开始 取得 50 像素 宽 、50 像素 高 的 区 域 对 应 的 数据 ， 可 以 这 样 写 : 

let imageData = context.getImageData(10, 5, 50, 50); 

返回 的 对 象 是 一 个 ImageData 的 实例 。 每 个 ImageData 对 象 都 包含 3 个 属性 : wiath、height 
和 aata， 其 中 ，dqata 属性 是 包含 图 像 的 原始 像素 信息 的 数组 。 每 个 像素 在 data 数组 中 都 由 4 个 值 表 
示 ， 分 别 代表 红 、 绿 、 蓝 和 透明 度 值 。 换 句 话 说， 第 一 个 像素 的 信息 包含 在 第 0 到 第 3 个 值 中 ， 比 如 : 


let data = imageData.data, 
red = Qata[0]， 
green = datal[1], 
blue = data[2], 
alpha = data[3]; 


这 个 数组 中 的 每 个 值 都 在 0~255 范围 内 (包括 0 和 255 )。 对 原始 图 像 数 据 进行 访问 可 以 更 灵活 地 操 
作 图 像 。 例 如 ， 通 过 更 改 图 像 数据 可 以 创建 一 个 简单 的 灰 阶 过 滤器 : 
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let drawing = document .getElementById("drawing"); 
// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
let context = drawing.getContext ("2d"), 
image = document.images[0], 
imageData, data, 
i, len, average, 
red, green, blue, alpha; 


// 绘制 图 像 


context .drawImage (image, 0, 0); 





// 取得 图 像 数 据 

imageData = context.getImageData(0, 0, image.width, image.height); 
data = imageData.data; 

for (i=0, len=data.length; i < len; i+=4) { 


red = datalil]; 

green = datal[li+1]; 
blue = datal[li+2]; 
alpha = datal[li+3]; 


// 取得 RGB 平均 值 
average = Math.floor((red + green + blue) / 3); 


// 设置 颜色 ， 不 管 透 明度 


datal[i] = average; 
datal[i+1] = average; 
datal[i+2] = average; 


} 


// 将 修改 后 的 数据 写 回 ImageData 并 应 用 到 画布 上 显示 出 来 
imageData.data = data; 
context .putImageData (imageData, 0, 0); 


} 

这 个 例子 首先 在 画布 上 绘制 了 一 个 图 像 , 然后 又 取得 了 其 图 像 数 据 。for 循环 遍历 了 图 像 数 据 中 的 
每 个 像素 , 注意 每 次 循环 都 要 给 i 加 上 4。 每 次 循环 中 取得 红 、 绿 、 蓝 的 颜色 值 , 计算 出 它们 的 平均 值 。 
然后 再 把 原来 的 值 修 改 为 这 个 平均 值 ， 实 际 上 相当 于 过 滤 掉 了 颜色 信息 ， 只 留 下 类 似 亮 度 的 灰 度 信息 。 
之 后 将 data 数组 重 写 回 imageData 对 象 。 最 后 调用 putImageData() 方 法 ， 把 图 像 数据 再 绘制 到 画 
布 上 。 结 果 就 得 到 了 原始 图 像 的 黑白 版 。 

当然 , 灰 阶 过 滤 只 是 基于 原始 像素 值 可 以 实现 的 其 中 一 种 操作 。 要 了 解 基于 原始 图 像 数据 还 可 以 实 
现 哪些 操作 ， 可 以 参考 IImari Heikkinen 的 文章 “Making Image Filters with Canvas”。 








注意 ”只 有 在 画布 没有 加 载 跨 域 内 容 时 才 可 以 获取 图 像 数 据 。 如 果 画 布 上 绘制 的 是 跨 域 内 


容 ， 则 尝试 获取 图 像 数据 会 导致 JavaScript 报错 。 





18.3.11 ”合成 


2D 上 下 文中 绘制 的 所 有 内 容 都 会 应 用 两 个 属性 : globalAlpha 和 globalComposition Operation， 
其 中 ，globalAlpha 属性 是 一 个 范围 在 0~1 的 值 (包括 0 和 1 )， 用 于 指定 所 有 绘制 内 容 的 透明 度 ， 默 
































568 第 18 章 动画 与 Canvas 图 形 
认 值 为 0。 如 果 所 有 后 来 的 绘制 都 需要 使 用 同样 的 透明 度 , 那么 可 以 将 globalAlpha 设置 为 适当 的 值 ， 



































执行 绘制 ， 然 后 再 把 globalAlpha 设置 为 0。 比 如 : 
// 绘制 红色 算 形 
context.fillStyle = "#f£ff0000"; 
context.fillRect (10, 10, 50, 50); 
// 修改 金 局 透明 度 
Context .globalAlpha = 0.5; 
// 绘制 蓝 色 算 形 
context.fillStyle = "rgba(0,0,255,1)"; 
context.fillRect (30, 30, 50, 50); 
// 重 置 
context .globalAlpha = 0; 
在 这 个 例子 中 ， 蓝 色 和 矩形 是 绘制 在 红色 和 矩形 上 面 的 。 因 为 在 绘制 蓝 色 和 矩形 前 globalAlpha 被 设置 


成 了 0.5， 所 以 蓝 色 矩形 就 变 成 半 透 明了 ， 从 而 可 以 透 过 它 看 到 下 面 的 红色 矩形 。 



































globalcompositionoperation 属性 表示 新 绘制 的 形状 如 何 与 上 下 文中 已 有 的 
性 是 一 个 字符 串 ， 可 以 取 下 列 值 。 


图 


默认 值 ， 新 














图 形 绘制 在 原 有 图 形 上 面 。 





D source-over: 





立 | 
必 








图 形 只 绘制 出 不 与 原 有 
口 source-atop: 新 图 形 只 绘制 出 与 原 有 图 形 重 释 的 部 分 ， 原 有 图 形 不 受 影响 。 





口 source-out: 


受 影 








形状 融合 。 这 个 属 








后 
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口 source-in: 新 图 形 只 绘制 出 与 原 有 图 形 重合 的 部 分 ， 画 布 上 其 余部 分 全 部 透明 。 
图 形 重合 的 部 分 ， 画 布 上 其 余部 分 全 部 透明 。 











口 destination-over: 新 图 形 绘制 在 原 有 图 形 下 面 , 重合 部 分 只 有 原 图 形 透 明 像 素 
口 gestination-in: 新 图 形 绘制 在 原 有 图 形 下 面 , 画布 上 只 剩 下 二 者 重 县 的 部 分 ， 
透明 。 

口 aestination-out: 新 图 形 与 原 有 图 形 重 闪 的 部 分 完全 透明 ， 原 图 形 其 余部 分 不 
D destination-atop: 新 图 形 绘制 在 原 有 图 形 下 面 ， 原 有 图 形 与 新 图 形 不 各 
口 1ighter: 新 图 形 与 原 有 图 形 重 又 部 分 的 像素 值 相 加 ， 使 该 部 分 变 亮 。 

D copy: 新 图 形 将 擦 除 并 完全 取代 原 有 图 形 。 

口 xor: 新 图 形 与 原 有 图 形 重 辣 部 分 的 像素 执行 “ 异 或 ”计算 。 

以 上 合成 选项 的 含义 很 难 用 语言 来 表达 清楚 ， 只 用 黑白 
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已 
一 个 例子 : 
// 绘制 红色 算 形 
context.fillStyle = "#f£ff0000"; 
Gontext efillReet (tL0.. LO :50 ‘D0 
// 设置 合成 方式 
context .globalCompositeOperation = "destination-over"; 
// 绘制 蓝 色 算 形 
Context .fil1Style = "rgba(0,0,255,1)"; 
context.fillRect (30, 30, 50, 50); 


| 


F 的 部 分 可 见 。 
其 余部 分 完全 





2 国人 
当 品 


响 。 


E 合 的 部 分 完全 透明 。 


图 像 也 体现 不 出 所 有 合成 的 效果 。 下 面 来 看 


然后 绘制 的 蓝 色 和 矩形 通常 会 出 现在 红色 和 矩形 上 面 ,但 将 g 


下 








lobalCompositeOperation 属 怕 











修改 为 "destination-over" 意 味 着 红色 和 矩形 会 出 现在 蓝 色 算 


使 用 globalCompositeOperation 











县 





攻 上 面 。 


属性 时 ， 一 定 记 得 要 在 不 同 浏览 带 上 进行 测试 。 不 同 浏览 带 在 
实现 这 些 选项 时 可 能 存在 差异 。 这 些 操 作 在 Safari 和 Chrome 中 仍然 有 些 问题 ， 





的 值 





可 以 参考 MDN 文档 上 的 


CanvasRenderingContext2D.globalCompositeOperation， 比 较 它 们 与 于 或 Firefox 演 染 的 差异 。 
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18.4 WebGL 


WebGL 是 画布 的 3D 上 下 文 。 与 其 他 Web 技术 不 同 ，WebGL 不 是 W3C 制定 的 标准 ， 而 是 Khronos 
Group 的 标准 。 根 据 官网 描述 ,“Khronos Group 是 非 营 利 性 、 会 员 资助 的 联盟 ， 专 注 于 多 平台 和 设备 下 
并 行 计算 、 图 形 和 动态 媒体 的 无 专利 费 开放 标准 ”"。Khronos Group 也 制定 了 其 他 图 形 API， 包 括 作为 浏 
览 器 中 WebGL 基础 的 OpenGL ES 2.0。 

OpenGL 这 种 3D 图 形 语言 很 复杂 ， 本 书 不 会 涉及 过 多 相关 概念 。 不 过 ， 要 使 用 WebGL 最 好 熟悉 
OpenGL ES 2.0， 因 为 很 多 概念 可 以 照搬 过 来 。 

本 节 假 设 读者 了 解 OpenGL ES 2.0 的 基本 概念 ， 并 简单 介绍 OpenGL ES 2.0 在 WebGL 中 实现 的 部 分 。 
要 了 解 关于 OpenGL 的 更 多 信息 ,可 以 访问 OpenGL 网 站 。 另 外 ,推荐 一 个 WebGL 教程 网 站 :Learn WebGL。 






























































注意 定型 数组 是 在 WebGL 中 执行 操作 的 重要 数据 结构 。 第 6 章 中 讨论 了 定型 数组 。 








18.4.1 WebGL 上 下 文 


在 完全 支持 的 浏览 器 中 ，WebGL 2.0 上 下 文 的 名 字 叫 "webg12" ，WebGL 1.0 上 下 文 的 名 字 叫 
"webg11"。 如 果 浏 览 器 不 支持 WebGL， 则 尝试 访问 WebGL 上 下 文 会 返回 nul1。 在 使 用 上 下 文 之 前 ， 
应 该 先 检 测 返 回 值 是 否 存在 : 


let drawing = document .getElementById("drawing"); 





// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
let gl = drawing.getContext ("webgl"); 
if (gl1){ 
// 使 用 WebGL 
} 
} 


这 里 把 WebGL context 对 象 命名 为 g1。 大 多 数 WebGL 应 用 和 例子 遵循 这 个 约定 ,因为 OpenGL ES 
2.0 方 法 和 值 通常 以 "g1 "开头 。 这 样 可 以 让 JavaScript 代码 看 起 来 更 接近 OpenGL 程序 。 


18.4.2” WebGL 基础 


取得 WebGL 上 下 文 后 ， 就 可 以 开始 3D 绘图 了 。 如 前 所 述 ， 因 为 WebGL 是 OpenGL ES 2.0 的 Web 
版 ， 所 以 本 节 讨 论 的 概念 实际 上 是 JavaScript 所 实现 的 OpenGL 概念 。 

可 以 在 调用 getcontext () 取得 WebGL 上 下 文 时 指定 一 些 选 项 。 这 些 选 项 通过 一 个 参数 对 象 传人 ， 
选项 就 是 参数 对 象 的 一 个 或 多 个 属性 。 
口 alpha: 布尔 值 ， 表 示 是 否 为 上 下 文 创建 透明 通道 缓冲 区 ， 默 认为 true。 

口 aepth: 布尔 值 ， 表 示 是 否 使 用 16 位 深 缓 冲 区 ， 默 认为 true。 

口 stencil: 布尔 值 ， 表 示 是 否 使 用 8 位 模板 缓冲 区 ， 默 认为 false。 

口 antialias: 布尔 值 ， 表 示 是 否 使 用 默认 机 制 执 行 抗 锯齿 操作 ， 默 认为 true。 

口 premultipliedAlpha: 布尔 值 ， 表 示 绘 图 缓冲 区 是 和 否 预 乘 透明 度 值 ， 默 认为 true。 

口 preserveDrawingBuffer: 布尔 值 ， 表 示 绘 图 完成 后 是 否 保留 绘图 缓冲 区 ， 默 认为 false。 
建议 在 充分 了 解 这 个 选项 的 作用 后 再 自行 修改 ， 因 为 这 可 能 会 影响 性 能 。 
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可 以 像 下 面 这 样 传人 options 对 象 : 
let drawing = document .getElementById("drawing"); 


// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 


let gl = drawing.getContext ("webgl", { alpha: false }); 
if (gl1) { 
// 使 用 WebGL 
} 
} 


这 些 上 下 文选 项 大 部 分 适合 开发 高 级 功能 。 多 数 情 况 下 ， 默 认 值 就 可 以 满足 要 求 。 
如 果 调 用 getcontext () 不 能 创建 WebGL 上 下 文 ， 某 些 浏览 器 就 会 抛 出 错误 。 为 此 ， 最 好 把 这 个 
方法 调用 包装 在 try/catch 块 中 : 


Insert IconMargin [download]let drawing = document .getElementById("drawing"), 
gl; 



































// 确保 浏览 器 支持 <canvas> 
if (drawing.getContext) { 
try { 
gl = drawing.getContext ("webgl"); 
} catch (ex) { 
// 什么 也 不 做 
} 
if (gl1) { 
// 使 用 WebGL 
} else { 
alert ("WebGL context could not be created."); 
} 
} 


1. 常量 
如 果 你 熟悉 OpenGL ， 那 么 可 能 知道 用 于 操作 的 各 种 常量 。 这 些 常量 在 OpenGL 中 的 名 字 以 GL_ 开 
头 。 在 WebGL 中 ，context 对 象 上 的 常量 则 不 包含 cL_ 前 级 。 例 如 ，GL_COLOR_BUFFER_BIT 常量 在 
WebGL 中 要 这 样 访问 g1 .COLOR_BUFFER_BIT。WebGL 以 这 种 方式 支持 大 部 分 OpenGL 常量 ( 少数 常 
量 不 支持 )。 

2. 方法 命名 

OpenGL ( 同时 也 是 WebGL ) 中 的 很 多 方法 会 包含 相关 的 数据 类 型 信息 。 接 收 不 同类 型 和 不 同 数量 
参数 的 方法 ， 会 通过 方法 名 的 后 缀 体现 这 些 信息 。 表 示 参 数 数量 的 数字 ( 1~4 ) 在 先 ， 表示 数 据 类 型 的 
字符 串 〈“f ”表示 浮 点 数 ,“i” 表 示 整 数 ) 在 后 。 比 如 ，gl.uniform4f () 的 意思 是 需要 4 个 浮 点 数值 
参数 ， 而 gl .uniform3i () 表 示 需 要 3 个 整数 值 参数 。 

还 有 很 多 方法 接收 数组 ， 这 类 方法 用 字母 “v”( vector ) 来 表示 。 因 此 ，gl.uniform3iv() 就 是 要 
接收 一 个 包含 3 个 值 的 数组 参数 。 在 编写 WebGL 代码 时 ， 要 记 住 这 些 约定 。 

3. 准备 绘图 

准备 使 用 WebGL 上 下 文 之 前 ， 通 常 需要 先 指定 一 种 实心 颜色 清除 <canvas>。 为 此 ， 要 调用 
clearCcolor() 方 法 并 传人 4 个 参数 ， 分 别 表示 红 、 绿 、 蓝 和 透明 度 值 。 每 个 参数 必须 是 0~1 范围 内 的 
值 ， 表 示 各 个 组 件 在 最 终 颜 色 的 强度 。 比 如 : 
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gl.clearColor(0，0，0，1); // 黑色 
gl.clear (gl .COLOR_ BUFFER_BIT); 


以 上 代码 把 清理 颜色 缓冲 区 的 值 设 置 为 黑色 ， 然 后 调用 clear () 方 法 ， 这 个 方法 相当 于 OpenGL 
中 的 glclear () 方 法 。 参 数 gl1 .COLOR_BUFFER_BIT 告诉 WebGL 使 用 之 前 定义 的 颜色 填充 画布 。 通 
常 ， 所 有 绘图 操作 之 前 都 需要 先 清除 绘制 区 域 。 

4. 视 口 与 坐标 

绘图 前 还 要 定义 WebGL 视 口 。 默 认 情 况 下 , 视 口 使 用 整个 <canvas> 区 域 。 要 改变 视 口 ,可 以 调用 
viewport () 方 法 并 传人 视 口 相对 于 <canvas> 元 素 的 x、? 坐标 及 宽度 和 高 度 。 例 如 ， 以 下 代码 表示 要 
使 用 整个 -canvas> 元 素 : 


gl.viewport (0, 0, drawing.width, 
drawing.height); 


这 个 视 口 的 坐标 系统 与 网 页 中 通常 的 坐标 系统 不 一 样 。 视 口 的 x 和 yy 坐标 起 点 (0, 0) 表 示 <canvas> 
元 素 的 左下 角 ， 癌 上 、 向 右 增 长 可 以 用 点 (width-l, height-1) 定 义 ( 见 图 18-14 )。 


<Canvas> (width—1, height—1) 






















































































(0, 0) 
图 18-14 





知道 如 何 定义 视 口 就 可 以 只 使 用 <canvas> 元 素 的 一 部 分 来 绘图 。 比 如 下 面 的 例子 : 


// 视 口 是 <canvas> 左下 角 四 分 之 一 区 域 

gl.viewport (0, 0, drawing.width/2, drawing.height/2); 

// 视 口 是 <canvas> 左上 角 四 分 之 一 区 域 

gl.viewport (0, drawing.height/2, drawing.width/2, drawing.height/2); 
// 视 口 是 <canvas> 右 下 角 四 分 之 一 区 域 

91L.viewport (drawing.width/2, 0, drawing.width/2, drawing.height/2); 


定义 视 口 的 坐标 系统 与 视 口 中 的 坐标 系统 不 一 样 。 在 视 口 中 , 坐标 原点 (0, 0) 是 视 口 的 中 心 点 。 左 下 
角 是 (-1, -1)， 右 上 和 角 是 (1, 1)， 如 图 18-15 所 示 。 














视 口 (1, DD) 


0.0) 


C1,-D) 





图 18-15 
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如 果 绘 图 时 使 用 了 视 口外 部 的 坐标 ， 则 绘制 结果 会 被 视 口 剪 切 。 例 如 ， 要 绘制 的 形状 有 一 个 顶点 在 
(2)， 则 视 口 右 侧 的 图 形 会 被 切 掉 。 

5. 缓冲 区 

在 JavaSeript 中 ,顶点 信息 保存 在 定型 数组 中 。 要 使 用 这 些 信息 ,必须 先 把 它们 转换 为 WebGL 缓冲 

















区 。 创 建 缓冲 区 要 调用 gl .createBuffer () 方 法 ,并 使 用 g1.binqBuffer () 方 法 将 缓冲 区 绑 定 到 
WebGL 上 下 文 。 绑 定之 后 ， 就 可 以 用 数据 填充 缓冲 区 了 。 比 如 : 


let buffer = 9l.createBuffter() 
9l1.bindqBuffer(g91L.ARRAY_BUFEFER，buftfer) 
9lLl.buffterData(g91L.ARRAY_BUFFER，Dnew Float32Array ([0, 0.5, 1]), gl.STATIC_ DRAW); 


调用 gl.bingBuffer() 将 puffer 设置 为 上 下 文 的 当前 缓冲 区 。 然 后 ， 所 有 缓冲 区 操作 都 在 
buffer 上 直接 执行 。 因 此 ,调用 g1 .bufferData() 虽 然 没有 包含 对 buffer 的 直接 引用 ,但 仍然 是 
在 它 上 面 执行 的 。 上 面 最 后 一 行 代 码 使 用 一 个 Float32Array (通常 把 所 有 顶点 信息 保存 在 
Float32Array 中 ) 初始 化 了 buffer。 如 果 想 输出 缓冲 区 内 容 ,， 那 么 可 以 调用 darawElements ( ) 方 法 
并 传人 gl1 .ELEMENT_ARRAY_BUFFER。 

gl .bufferData() 方 法 的 最 后 一 个 参数 表示 如 何 使 用 缓冲 区 。 这 个 参数 可 以 是 以 下 常量 值 。 

口 g1 .STATIC_DRAW: 数据 加 载 一 次 ， 可 以 在 多 次 绘制 中 使 用 。 
口 g1. STREAM_DRAW: 数据 加 载 一 次 ， 只 能 在 几 次 绘制 中 使 用 。 
口 g1 .DYNAMIC_DRAW: 数据 可 以 重复 修改 ， 在 多 次 绘制 中 使 用 。 

除非 是 很 有 经 验 的 OpenGL 程序 员 ， 否 则 我 们 会 对 大 多 数 缓冲 区 使 用 g1 .STATIC_DRAW。 

缓冲 区 会 一 直 驻 留 在 内 存 中 , 直到 页 面 印 载 。 如 果 不 再 需要 缓冲 区 , 那么 最 好 调用 gl .aeleteBuffer () 
方法 释放 其 占用 的 内 存 : 


9l.dqeleteBuffer(bpuftfer) 





































































































































































































6. 错误 

与 JavaScript 多 数 情 况 下 不 同 的 是 ， 在 WebGL 操作 中 通常 不 会 抛 出 错误 。 必 须 在 调用 可 能 失败 的 方 
法 后 , 调用 gl .getError () 方 法 。 这 个 方法 返回 一 个 常量 , 表示 发 生 的 错误 类 型 。 下 面 列 出 了 这 些 常量 。 
口 gl1 .NO_ERROR: 上 一 次 操作 没有 发 生 错误 (0 值 )。 
D gl .INVALID_ENUM: 上 一 次 操作 没有 传人 WebGL 预定 义 的 常量 。 
口 g1 .INVALID_VALUE: 上 一 次 操作 需要 无 符号 数值 ， 但 是 传人 了 负数 。 
口 gl .INVALID_OPERATION: 上 一 次 操作 在 当前 状态 下 无 法 完成 。 
口 gl1.0UT_oOF_MEMORY: 上 一 次 操作 因 内 存 不 足 而 无 法 完成 。 
口 gl .CONTEXT_LOST_WEBGL: 上 一 次 操作 因 外 部 事件 ( 如 设备 掉 电 ) 而 丢失 了 WebGL 上 下 文 。 

每 次 调用 gl .getError () 方 法 会 返回 一 个 错误 值 。 第 一 次 调用 之 后 ， 再 调用 gl1 .getError() 可 
能 会 返回 另 一 个 错误 值 。 如 果 有 多 个 错误 ， 则 可 以 重复 这 个 过 程 ， 直 到 gl.getError() 返 回 
gl .NO_ERROR。 如 果 执 行 了 多 次 操作 ,那么 可 以 通过 循环 调用 getError () : 


let errorCode = gl.getError(); 

while (errorCode) { 
console.log("Error occurred: " + errorCode); 
errorCode = gl.getError(); 


} 
如 果 WebGL 代码 没有 产 出 想 要 的 输出 结果 ， 那 么 可 以 调用 几 次 getError ()， 这样 有 可 能 帮 你 找 
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到 问题 所 在 。 

7. 着 色 器 

着 色 器 是 OpenGL 中 的 另 一 个 概念 。WebGL 中 有 两 种 着 色 器 : 顶点 着 色 器 和 片段 ( 或 像素 ) 着 色 器 。 
顶点 着 色 器 用 于 把 3D 顶点 转换 为 可 以 泻 染 的 2D 点 。 片 段 着 色 器 用 于 计算 绘制 一 个 像素 的 正确 颜色 。 














WebGL 着 色 器 的 独特 之 处 在 于 ， 它 们 不 是 JavaScript 实现 的 ， 而 是 使 用 一 种 与 C 或 JavaScript 完全 不 同 
的 语言 GLSL ( OpenGL Shading Language ) 写 的 。 

@ 编写 着 色 器 

GLSL 是 一 种 类 似 于 C 的 语言 , 专门 用 于 编写 OpenGL 着 色 器 。 因 为 WebGL 是 OpenGL ES 2 的 实现 ， 
所 以 OpenGL 中 的 着 色 器 可 以 直接 在 WebGL 中 使 用 。 这 样 也 可 以 让 桌面 应 用 更 方便 地 移植 到 Web 上 。 
每 个 着 色 器 都 有 一 个 main () 方 法 ,在 绘制 期 间 会 重复 执行 。 给 着 色 器 传递 数据 的 方式 有 两 种 : 
attribute 和 uniform。attribute 用 于 将 顶点 传人 顶点 着 色 器 ， 而 uni form 用 于 将 常量 值 传 人 任 
何 着 色 器 。attripute 和 uniform 是 在 main() 消 数 外 部 定义 的 。 在 值 类 型 关键 字 之 后 是 数据 类 型 ， 
然后 是 变量 名 。 下 面 是 一 个 简单 的 顶点 着 色 器 的 例子 : 


// OpenGL 着 色 器 语言 
// 着 色 器 ， 摘 自 Bartek Drozdz 的 文章 “Get started with WebGL 一 draw a square” 
attribute vec2 aVertexPosition; 





















































void main() { 
gl_Position = vec4(aVertexPosition, 0.0, 1.0); 


. 

这 个 顶点 着 色 器 定义 了 一 个 名 为 aVertexPosition 的 attribute。 这 个 attribute 是 一 个 包含 
两 项 的 数组 ( 数据 类 型 为 vec2 )， 代表 x 和 yy 坐标。 即使 只 传人 了 两 个 坐标 ， 顶 点 着 色 器 返回 的 值 也 会 
包含 4 个 元 素 ， 保 存在 变量 g1_Position 中 。 这 个 着 色 器 创建 了 一 个 新 的 包含 4 项 的 数组 (vec4 )， 
缺少 的 坐标 会 补充 上 ， 实 际 上 是 把 2D 坐标 转换 为 了 3D 坐标 。 

片段 着 色 器 与 顶点 着 色 器 类 似 ， 只 不 过 是 通过 uniform 传人 数据 。 下 面 是 一 个 片段 着 色 器 的 例子 : 


// OpenGL 着 色 器 语言 
// 着 色 器 ,摘自 Bartek Drozdz 的 文章 “Get started with WebGL 一 draw a square” 
uniform vec4 uColor; 



































void main() { 
gl_FragColor = uColor; 
} 


片段 着 色 器 必须 返回 一 个 值 ， 保 存 到 变量 g1_Fragcolor 中 ， 这 个 值 表示 绘制 时 使 用 的 颜色 。 这 
个 着 色 器 定义 了 一 个 uniform,， 包含 颜色 的 4 个 组 件 (vec4 ), 保存 在 ucolor 中 。 从 代码 上 看 ， 这 个 
着 色 器 只 是 把 传人 的 值 赋 给 了 gl1_FragColor。uColor 的 值 在 着 色 咒 内 不 能 改变 。 








注意 ” OpenGL 着 色 器 语言 比 示例 中 的 代码 要 复杂 ， 详 细 介 绍 需 要 整 本 书 的 篇 幅 。 因 此 ， 
本 节 只 是 从 使 用 WebGL 的 角度 对 这 门 语言 做 个 极其 简单 的 介绍 。 要 了 和解 更 多 信息 ， 可 以 


参考 Randi J]. Rost 的 著作 《OpenGL 着 色 语言 》 





@ 创建 着 色 器 程序 
浏览 器 并 不 理解 原生 GLSL 代码 , 因此 GLSL 代码 的 字符 串 必 须 经 过 编译 并 链接 到 一 个 着 色 器 程序 
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。 为 便于 使 用 ,通常 可 以 使 用 带 有 自 定义 type 属性 的 <script> 元 素 把 着 色 器 代码 包含 在 网 页 中 。 



























































符 串 





如 果 type 属性 无 效 ， 则 浏览 器 不 会 解析 <script> 的 内 容 ， 但 这 并 不 妨碍 读 写 其 中 的 内 容 : 


<script type="x-webgl/x-vertex-shader" id="vertexShader"> 
attribute vec2 aVertexPosition; 


void main() { 
gl_Position = vec4(aVertexPosition, 0.0, 1.0); 


小 
</script> 
<script type="x-webgl/x-fragment-shader" id="fragmentShader"> 


uniform vec4 uColor; 


void main() { 
dl.PragColor- =UCoLor: 

} 

</script> 


然后 可 以 使 用 text 属性 提取 <script> 元 素 的 内 容 : 


let vertexGlsl = document .getElementBylId("vertexShader") .text, 
fragmentGlsl = document .getElementById("fragmentShader") .text; 


更 复杂 的 WebGL 应 用 可 以 动态 加 载 着 色 咒 。 重 点 在 于 要 使 用 着 色 器 ， 必 须 先 拿 到 GLSL 代码 的 字 
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有 了 GLSL 字符 串 ， 下 一 步 是 创建 shader 对 象 。 为 此 ， 需 要 调用 gl .createshader() 方 法 , 并 

















传人 想 要 创建 的 着 色 器 类 型 ( gl1 .VERTEX_SHADER 或 gl.FRAGMENT_SHADER )。 然 后 ， 调 用 


gl. 




















shaderSource() 方 法 把 GLSL 代码 应 用 到 着 色 器 , 再 调用 gl . compileshaqet () 编译 着 色 器 。 下 


面 是 一 个 例子 : 


let vertexShader = gl.createShader (gl .VERTEX_SHADER); 
gl.shaderSource (vertexShader, vertexGls1); 
gl.compileShader (vertexShader); 

let fragmentShader = gl.createShader (gl .FRAGMENT_ SHADER); 
gl.shaderSource (fragmentShader, fragmentGls1); 
gl.compileShader (fragmentShader); 


这 里 的 代码 创建 了 两 个 着 色 器 ， 并 把 它们 保存 在 vertexshader 和 fragmentshader 中 。 然 后 ， 








可 以 通过 以 下 代码 把 这 两 个 对 象 链接 到 着 色 器 程序 ; 


let program = gl.createProgram();} 
gl.attachShader (program, vertexShader); 
gl.attachShader (program, fragmentShader); 
gl.linkProgram(program); 


一行 代 码 创建 了 一 个 程序 ， 然 后 attachshagder () 用 于 添加 着 色 器 。 调 用 g1 .1inkProgram () 





Vy 











将 两 个 着 色 器 链接 到 了 变量 program 中 。 链 接 到 程序 之 后 ， 就 可 以 通过 gl .useProgram() 方 法 让 








WebGL 上 下 文 使 用 这 个 程序 了 : 


gl .useProgram(program); 


调用 gl .useProgtram() 之 后 ， 所 有 后 续 的 绘制 操作 都 会 使 用 这 个 程序 。 


给 着 色 器 传 值 
前 面 定义 的 每 个 着 色 器 都 需要 传人 一 个 值 ,才能 完成 工作 。 要 给 着 色 吉 传 值 ， 必 须 先 找到 要 接收 值 














的 变量 。 对 于 uniform 变量 ， 可 以 调用 gl .getUniformLocation() 方 法 。 这 个 方法 返回 一 个 对 象 ， 
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表示 该 uniform 变量 在 内 存 中 的 位 置 。 然 后 ， 可 以 使 用 这 个 位 置 来 完成 赋值 。 比 如 : 


let uColor = gl.getUniformLocation(program, "uColor"); 
gl.uniform4fv(uColor, [0, 0, 0, 1]); 


这 个 例子 从 program 中 找到 uniform 变量 ucolor ， 然 后 返回 了 它 的 内 存 位 置 。 第 二 行 代 码 调 
gl.uniform4fv() 方 法 给 ucolor 传人 了 值 。 

给 顶点 着 色 器 传 值 也 是 类 似 的 过 程 。 而 要 获得 attribute 变量 的 位 置 , 可 以 调用 gl .getAttrib- 
Location () 方 法 。 找 到 变量 的 内 存 地 址 后 ， 可 以 像 下 面 这 样 给 它 传 人 值 : 


let aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); 
gl .enableVertexAttribArray (aVertexPosition); 
gl .vertexAttribPointer (aVertexPosition, itemSize, gl.FLOAT, false, 0, 0); 


这 里 ， 首 先 取得 aVertexPosition 的 内 存 位 置 ， 然 后 使 用 gl .enablevertexAttribArray () 
来 启用 。 最 后 一 行 代码 创建 了 一 个 指向 调用 gl1 .bindBuffer () 指 定 的 缓冲 区 的 指针 ， 并 把 它 保 存在 
aVertexPosition 中 ， 从 而 可 以 在 后 面 由 顶点 着 色 髓 使 用 。 

@ 调试 着 色 器 和 程序 

与 WebGL 中 的 其 他 操作 类 似 ， 着 色 器 操作 也 可 能 失败 ， 而 且 是 静默 失败 。 如 果 想 知道 发 生 了 什么 
错误 ， 则 必须 手工 通过 WebGL 上 下 文 获取 关于 着 色 器 或 程序 的 信息 。 

对 于 着 色 器 ， 可 以 调用 gl .getshaderParameter () 方 法 取得 编译 之 后 的 编译 状态 : 


if (!gl.getShaderParameter (vertexShader, gl.COMPILE STATUS)) { 
alert (gl .getShaderInfoLog (vertexShader)); 
} 


这 个 例子 检查 了 vertexshader 编译 的 状态 。 如果 着 色 需 编译 成 功 , 则 调用 g] .getshaderParameter () 
会 返回 true。 如 果 返 回 false， 则 说 明 编 译 出 错 了 。 此 时 ， 可 以 使 用 gl .getshaqerInfoLog() 并 传 
人 着 色 器 取得 错误 。 这 个 方法 返回 一 个 字符 串 消息 ， 表 示 问 题 所 在 。gl1 .getshaqerParameter () 和 
gl.getShaderInfoLog() 既 可 以 用 于 顶点 着 色 器 ， 也 可 以 用 于 片段 着 色 融 。 

着 色 咒 程序 也 可 能 失败 ， 因 此 也 有 类 似 的 方法 。g1 .getProgramParameter () 用 于 检测 状态 。 最 
常见 的 程序 错误 发 生 在 链接 阶段 ， 为 此 可 以 使 用 以 下 代码 来 检查 : 


if (!gl.getProgramParameter (program, gl.LINK_STATUS)) { 
alert (gl .getProgramInfoLog (program) ); 
. 
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与 gl .getShadqerParameter() 一 样 , gl .getProgramParameter () 会 在 链接 成 功 时 返回 true， 
失败 时 返回 false。 当 然 也 有 一 个 gl1 .getProgramInfoLog () 方 法 ， 可 以 在 程序 失败 时 获取 错误 
信息 。 

这 些 方法 主要 在 开发 时 用 于 辅助 调试 。 只 要 没有 外 部 依赖 ， 在 产品 环境 中 就 可 以 放心 地 删除 它们 。 

e@ GLSL 100 升级 到 GLSL 300 

WebGL2 的 主要 变化 是 升级 到 了 GLSL 3.00 ES 着 色 器 。 这 个 升级 暴露 了 很 多 新 的 着 色 融 功能 , 包括 3D 
纹理 等 在 支持 OpenGL ES 3.0 的 设备 上 都 有 的 功能 。 要 使 用 升级 版 的 着 色 器 ， 着 色 器 代码 的 第 一 行 必须 是 ; 

#version 300 es 

这 个 升级 需要 一 些 语法 的 变化 。 

口 顶点 attribute 变量 要 使 用 in 而 不 是 attribute 关键 字 声明 。 
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口 使 用 varying 关键 字 为 顶点 或 片段 着 色 器 声明 的 变量 ,现在 必须 根据 相应 着 色 吕 的 行为 改 为 使 

用 in 或 out。 

口 预定 义 的 输出 变量 gl_FragColor 没有 了 ， 片 段 着 色 器 必须 为 颜色 输出 声明 自己 的 out 变量 。 

口 纹理 查找 函数 texture2D 和 textureCube 统一 成 了 一 个 texture 国 数 。 

8. 绘图 

WebGL 只 能 绘制 三 种 形状 : 点 、 线 和 三 角形 。 其 他 形状 必须 通过 这 三 种 基本 形状 在 3D 空间 的 组 合 
来 绘制 。WebGL 绘图 要 使 用 drawArrays () 和 drawElements() 方 法 ， 前 者 使 用 数组 缓冲 区 ， 后 者 则 
操作 元 素数 组 缓冲 区 。 

drawArrays () 和 drawElements() 的 第 一 个 参数 都 表示 要 绘制 形状 的 常量 。 下 面 列 出 了 这 些 常 量 。 

口 g1 .POINTS: 将 每 个 顶点 当成 一 个 点 来 绘制 。 

D gl1.LINES: 将 数组 作为 一 系列 项 点， 在 这 些 顶点 间 绘 制 直线 。 每 个 顶点 既是 起 点 也 是 终点 ， 因 

此 数组 中 的 顶点 必须 是 偶数 个 才能 开始 绘制 。 

口 g1 .LINE_LOOP: 将 数组 作为 一 系列 顶点 , 在 这 些 顶 点 间 绘 制 直线 。 从 第 一 个 顶点 到 第 二 个 顶点 
绘制 一 条 直线 ， 再 从 第 二 个 顶点 到 第 三 个 顶点 绘制 一 条 直线 ， 以 此 类 推 ， 直 到 绘制 到 最 后 一 个 
顶点 。 此 时 再 从 最 后 一 个 顶点 到 第 一 个 顶点 绘制 一 条 直线 。 这 样 就 可 以 绘制 出 形状 的 轮廓 。 

口 g1 .LINE_STRIP: 类 似 于 gl .LINE_LOOP, 区 别 在 于 不 会 从 最 后 一 个 顶点 到 第 一 个 顶点 绘制 直线 。 

口 g1 .TRIANGLES: 将 数组 作为 一 系列 顶点 ,在 这 些 顶 点 间 绘 制 三 角形 。 如 不 特殊 指定 ,每 个 三 角 

形 都 分 开 绘 制 ， 不 共享 顶点 。 

口 g1 .TRIANGLES_STRIP: 类 似 于 g1 .TRIANGLES， 区 别 在 于 前 3 个 顶点 之 后 的 顶点 会 作为 第 三 
个 顶点 与 其 前 面 的 两 个 顶点 构成 三 角形 。 例 如， 如 果 数 组 中 包含 顶点 4、B、C、D， 那 么 第 一 个 
三 角形 使 用 48C， 第 二 个 三 角形 使 用 BCD。 

口 gl .TRIANGLES_FAN: 类 似 于 gl1.TRIANGLES， 区 别 在 于 前 3 个 顶点 之 后 的 顶点 会 作为 第 三 个 
顶点 与 其 前 面 的 顶点 和 第 一 个 顶点 构成 三 角形 。 例如， 如 果 数 组 中 包含 顶点 4、8、C、D， 那么 

第 一 个 三 角形 使 用 4BC， 第 二 个 三 角形 使 用 4CD。 

以 上 常量 可 以 作为 gl .drawArrays () 方 法 的 第 一 个 参数 ， 第 二 个 参数 是 数组 缓冲 区 的 起 点 索引 ， 

第 三 个 参数 是 数组 缓冲 区 包含 的 顶点 集合 的 数量 。 以 下 代码 使 用 gl .qrawarrays () 在 画布 上 绘制 了 一 

个 三 角形 : 


// 假设 已 经 使 用 本 节 前 面 的 着 色 器 清除 了 视 口 
// 定义 3 个 顶点 的 文 坐 标 和 yy 坐标 
let vertices = new Float32Array ([ 0, 1, 1, -1, -1, -1 ]), 
buffer = gl.createBuffer(), 
vertexSetSize = 2， 
vertexSetCount = vertices.length/vertexSetSize, 
这 EGG 
aVertexPosition; 
// 将 数据 放 入 缓冲 区 
91L.bindqBuffer (91.ARRAY_BUFEFER，buffer) 
9lL.bufferData(g91.ARRAY_BUFFER，vertices，g91.STATIC_DRAW) ; 
// 给 片段 着 色 器 传 入 颜色 
uColor = gl.getUniformLocation(program, "uColor"); 
gl.uniform4fv(uColor, [ 0, 0, 0, 1 1]); 
// 把 顶点 信息 传 给 着 色 器 
aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); 
gl .enableVertexAttribArray (aVertexPosition); 
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gl .vertexAttribPpointer (aVertexPosition, vertexSetSize, gl.FLOAT, false, 0, 0); 
绘制 三 角形 

ne me 0, vertexSetCount); 

这 个 例子 定义 了 一 个 Float32Array 变量 ， 它 包含 3 组 两 个 点 的 顶点 。 完 成 计算 的 关键 是 跟踪 顶 
点 大 小 和 数量 。 将 vertexSetsize 的 值 指定 为 2， 再 计算 出 vertexSetcount。 项 点 信息 保存 在 了 组 
冲 区 。 然 后 把 颜色 信息 传 给 片段 着 色 器 。 

接着 给 顶点 着 色 器 传人 顶点 集 的 大 小 ， 以 及 表示 顶点 坐标 数值 类 型 的 gl .Fl10AT。 第 四 个 参数 是 一 
个 布尔 值 ， 表 示 坐 标 不 是 标准 的 。 第 五 个 参数 是 步 长 值 ( stride value )， 表 示 跳 过 多 个 数组 元 素 取 得 下 一 
个 值 。 除 非 真 要 跳 过 一 些 值 ， 和 否则 就 向 这 里 传人 0 即 可 。 最 后 一 个 参数 是 起 始 偏 移 量 ， 这 里 的 0 表示 从 
第 一 个 数组 元 素 开始 。 

最 后 一 步 是 使 用 gl .arawarrays () 把 三 角形 绘制 出 来 ,通过 把 第 一 个 参数 指定 为 gl .TRIANGLES， 
就 可 以 从 (0, 1) 到 (1, 1) 再 到 (-1, 1) 绘制 一 个 三 角形 ， 并 填充 传 给 片段 着 色 器 的 颜色 。 第 二 个 参数 表示 绥 
冲 区 的 起 始 偏 移 量 ， 最 后 一 个 参数 是 要 读 取 的 顶点 数量 。 以 上 绘图 操作 的 结果 如 图 18-16 所 示 。 


























































































































图 18-16 


通过 改变 gl .drawArrays () 的 第 一 个 参数 ， 可 以 修改 绘制 三 角形 的 方式 。 图 18-17 展示 了 修改 第 
一 个 参数 之 后 的 两 种 输出 。 











gl1 .LINE_LOOP gl .LINE_SET 


图 18-17 


9. 纹理 

WebGL 纹理 可 以 使 用 DOM 中 的 图 片 。 可 以 使 用 gl .createTexture () 方 法 创建 新 的 纹理 ， 然 后 
再 将 图 片 绑 定 到 这 个 纹理 。 如 果 图 片 还 没有 加 载 ， 则 可 以 创建 一 个 Image 对 象 来 动态 加 载 。 图 片 加 载 
完成 后 才能 初始 化 纹理 ， 因 此 在 图 片 的 10aq 事件 之 后 才能 使 用 纹理 。 比 如 : 


let image = new Image(), 
texture; 
image.src = "smile.gif",; 
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image.onload = function() { 
texture = gl.createTexture(); 
gl .bindTexture (gl .TEXTURE_ 2D, texture); 
gl .pixelStorei (gl .UNPACK_FLIP_ Y WEBGL, true); 


gl .texImage2D (91 .TEXTURE_2D, 0, gl.RGBA, gl1.RGBA, gl .UNSIGNED BYTE, image); 
gl .texParameteri (gl .TEXTURE_2D, gl .TEXTURE_ MAG FILTER, gl .NEAREST); 
gl.texParameteri (gl .TEXTURE_2D, gl .TEXTURE_ MIN_FILTER, gl .NEAREST); 





// 除 当 前 纹理 
9lL.bindqTexture (gl1 .TEXTURE_2D，mnul1) ， 


除了 使 用 DOM 图 片 ， 这 些 步 又 跟 在 OpenGL 中 创建 纹理 是 一 样 的 。 最 大 的 区 别 在 于 使 用 
gl .pixelStorei () 设 置 了 像素 存储 格式 。 常 量 gl .UNPACK_FLIP_Y_WEBGL 是 WebGL 独 有 的 ， 在 基 

















于 Web 加 载 图 片 时 通常 要 使 用 。 原 因 在 于 GIF、JPEG 和 PNG 图 片 使 用 的 坐标 系统 与 WebGL 内 部 的 坐 
标 系统 不 一 样 。 如 果 不 使 用 这 个 标志 ， 图 片 就 会 倒 过 来 。 

用 于 纹理 的 图 片 必须 跟 当 前 页 面 同 源 ， 或 者 是 来 自 启用 了 跨 源 资源 共享 ( CORS ，Cross-Origin 
Resource Sharing ) 的 服务 器 上 。 












































注意 ”纹理 来 源 可 以 是 图 片 、 通 过 <viaqeo> 元 素 加 载 的 视频 ， 甚 至 是 别 的 <canvas> 元 素 。 


视频 同样 受 跨 源 限 制 。 





10. 读 取 像素 

与 2D 上 下 文 一 样 ， 可 以 从 WebGL 上 下 文中 读 取 像素 数据 。 读 取 像 素 的 readPixels () 方 法 与 
OpenGL 中 的 方法 有 同样 的 参数 ， 只 不 过 最 后 一 个 参数 必须 是 定型 数组 。 像 素 信息 是 从 帧 缓冲 区 读 出 来 
并 放 到 这 个 定型 数组 中 的 。readPixels () 方 法 的 参数 包括 x 和 了 了 坐标、 宽度 、 高 度 、 图 像 格式 、 类 型 
和 定型 数组 。 前 4 个 参数 用 于 指定 要 读 取 像素 的 位 置 。 图 像 格式 参数 几乎 总 是 g1 .RGBA。 类 型 参数 指 的 
是 要 存储 在 定型 数组 中 的 数据 类 型 ， 有 如 下 限制 : 
口 如 果 这 个 类 型 是 g1 .UNSIGNED_BYTE， 则 定型 数组 必须 是 Uint 8Array; 
口 如 果 这 个 类 型 是 gl .UNSICGNED_SHORT_5_6_5、g1.UNSIGNED_SHORT 4 4 4 4 或 gl .UNSIGNED_ 

SHORT 5 _5_5_ 1， 则 定型 数组 必须 是 Uint16Array。 


下 面 是 一 个 调用 readPixels () 方 法 的 例子 : 


let pixels = new Uint8Array (25*25); 
gl.readPixels(0, 0, 25, 25, gl.RGBA, gl .UNSIGNED_ BYTE, pixels); 


以 上 代码 读 取 了 帧 缓冲 区 中 25 像素 x25 像素 大 小 的 区 域 ,并 把 读 到 的 像素 信息 保存 在 pixels 数组 
!， 其 中 每 个 像素 的 颜色 在 这 个 数组 中 都 以 4 个 值 表示 ,分 别 代 表 红 、 绿 、 蓝 和 透明 度 值 。 每 个 数组 值 
的 取 值 范围 是 0~255 (包括 0 和 255 )。 别 忘 了 先 按照 预期 存储 的 数据 量 初始 化 定型 数组 。 
在 浏览 器 绘制 更 新 后 的 WebGL 图 像 之 前 调用 readPixels () 没 有 问题 。 而 在 绘制 完成 后 ， 帧 缓冲 
区 会 恢复 到 其 初始 清除 状态 ,此 时 调用 readPixels () 会 得 到 与 清除 状态 一 致 的 像素 数据 。 如 果 想 在 绘 
制 之 后 读 取 像素 ， 则 必须 使 用 前 面 讨论 过 的 preserveDrawingBuffer 选项 初始 化 WebGL 上 下 文 : 
et gl = drawing.getContext ("webgl", { preserveDrawingBuffer: true; }) 

设置 这 个 标志 可 以 强制 帧 缓冲 区 在 下 一 次 绘制 之 前 保持 上 一 次 绘制 的 状态 。 这 个 选项 可 能 会 影响 性 

能 ， 因 此 尽量 不 要 使 用 。 
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18.4.3 WebGL1 与 WebGL2 


WebGL1 代码 几乎 完全 与 WebGL2 兼容 。 在 使 用 WebGL2 上 下 文 时 , 唯一 可 能 涉及 修改 代码 以 保证 
兼容 性 的 就 是 扩展 。 在 WebGL2 中 ,很 多 扩展 都 变 成 了 默认 功能 。 
例如 ， 要 在 WebGL1 中 使 用 绘制 缓冲 区 ， 需 要 先 测试 相应 扩展 后 再 使 用 : 


let ext = gl.getExtension('WEBGL_ draw_buffers'); 





























if (!ext) { 
// 没有 扩展 的 代码 


} else { 


ext .drawBuffersWEBGL([...]) 
, 18 


而 在 WebGL2 中 ， 这 里 的 检测 代码 就 不 需要 了 ， 因 为 这 个 扩展 已 经 直接 暴露 在 上 下 文 对 象 上 了 : 


gl.drawBuffers([...]); 


以 下 特性 都 已 成 为 WebGL2 的 标准 特性 : 
DQ ANGLE_ instanced_ arrays 

口 ExXT_blend minmax 

口 ExXT_frag_depth 

DQ EXT_shader texture_ lod 

DQ OES_ element index uint 

DQ OES_ standard derivatives 

DQ OES texture_ float 

DQ OES_ texture float_linear 

DQ OES_vertex_array_object 

口 WEBGL_ depth_ texture 

口 WEBGL_dqraw_buffers 

口 Vertex shader texture access 
































注意 要 了 解 WebGL 更 新 的 内 容 ， 可 以 参考 WebGL2Fundamentals 网 站 上 的 文章 “WebGL2 


from WebGL1 ”。 





18.5 小结 


requestAnimationFrame 是 简单 但 实用 的 工具 ， 可 以 让 JavaScript 跟 进 浏览 器 演 染 周期 ， 从 而 更 
加 有 效 地 实现 网 页 视觉 动 效 。 
HTMLS 的 <canvas> 元 素 为 JavaScript 提供 了 动态 创建 图 形 的 API。 这 些 图 形 需 要 使 用 特定 上 下 文 
绘制 ， 主 要 有 两 种 。 第 一 种 是 支持 基本 绘图 操作 的 2D 上 下 文 : 
口 填充 和 描绘 颜色 及 图 案 
口 绘制 矩形 
口 绘制 路 径 
口 绘制 文本 
口 创建 渐变 和 图 案 
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第 二 种 是 3D 上 下 文 ， 也 就 是 WebGL。WebGL 是 浏览 器 对 OpenGL ES 2.0 的 实现 。OpenGL ES 2.0 
是 游戏 图 形 开发 常用 的 一 个 标准 。WebGL 支持 比 2D 上 下 文 更 强大 的 绘图 能 力 ， 包 括 : 

口 用 OpenGL 着 色 需 语言 (GLSL ) 编写 顶点 和 片段 着 色 器 ; 

口 支持 定型 数组 ， 限 定数 组 中 包含 数值 的 类 型 ; 

口 创建 和 操作 纹理 。 
目前 所 有 主流 浏览 器 的 较 新 版 本 都 已 经 支持 <canvas> 标 签 。 
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表单 脚本 


本 章 内 容 

口 理解 表单 基础 

口 文本 框 验证 与 交互 
口 使 用 其 他 表单 控件 









































JavaScript 较 早 的 一 个 用 途 是 承担 一 部 分 服务 器 端 表单 处 理 的 责任 ,虽然 Web 和 JavaScript 都 已 经 发 


















































JavaScript 既 做 表单 验证 ， 又 用 于 增强 标准 表单 控件 的 默认 行为 。 


19.1 表单 基础 


Web 表单 在 HTML 中 以 <form> 元 素 表示 ， 在 JavaScript 中 则 以 HTMLFormElement 类 型 表示 。 
HTMLFormElement 类 型 继承 自 HTMLElement 类 型 ， 因 此 拥有 与 其 他 HTML 元 素 一 样 的 默认 属性 。 不 


过 ， 


性 ， 


索引 或 表单 的 名 字 (name ) 来 访问 特定 的 表单 。 比 如 : 


















































HTMLFormElement 也 有 自己 的 属性 和 方法 。 
口 acceptcharset: 服务 器 可 以 接收 的 字符 集 ， 等 价 于 HTML 的 accept-charset 属性 。 
口 action: 请 求 的 URL， 等 价 于 HTML 的 action 属性 。 

口 elements: 表单 中 所 有 控件 的 HTMLCollection。 

口 enctype: 请 求 的 编码 类 型 ， 等 价 于 HTML 的 enctype 属性 。 
口 length: 表单 中 控件 的 数量 。 












































口 name: 表单 的 名 字 ， 等 价 于 HTML 的 name 属性 。 

口 reset (): 把 表单 字段 重 置 为 各 自 的 默认 值 。 

口 supmit () : 提交 表单 。 

口 target: 用 于 发 送 请 求 和 接收 响应 的 窗口 的 名 字 ， 等 价 于 HTML 的 target 属性 。 












































口 method: HTTP 请 求 的 方法 类 型 ， 通常 是 "get "或 "post"， 等 价 于 HTML 的 method 属性 





展 了 很 多 年 , 但 Web 表单 的 变化 不 是 很 大 。 由 于 不 能 直接 使 用 表单 解决 问题 ， 因 此 开发 者 不 得 不 使 用 


Lo 


有 几 种 方式 可 以 取得 对 <form> 元 素 的 引用 。 最 常用 的 是 将 表单 当 作 普 通 元 素 为 它 指定 一 个 id 属 



































从 而 可 以 使 用 getElementById() 来 获取 表单 ， 比 如 : 


let form = document .getElementById("forml"),; 


























此 外 ,使 用 aocument .forms 集合 可 以 获取 页 面 上 所 有 的 表单 元 素 。 然 后 ， 可 以 进一步 使 用 数字 

















// 取得 页 面 中 的 第 一 个 表单 


let firstForm = document.forms[0]; 


// 取得 名 字 为 "form2" 的 表单 


let myForm = document.forms["form2"]; 
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较 早 的 浏览 器 ,或 者 严格 向 后 兼容 的 浏览 器 , 也 会 把 每 个 表单 的 name 作为 aocument 对 象 的 属性 。 
例如 ， 名 为 "form2" 的 表单 可 以 通过 document . form2 来 访问 。 不 推荐 使 用 这 种 方法 ， 因 为 容易 出 错 ， 
而 且 这 些 属 性 将 来 可 能 会 被 浏览 器 删除 。 

注意 ， 表 单 可 以 同时 拥有 ia 和 name， 而 且 两 者 可 以 不 相同 。 


19.1.1 提交 表单 


表单 是 通过 用 户 点 击 提交 按钮 或 图 片 按 钮 的 方式 提交 的 。 提 交 按钮 可 以 使 用 type 属性 为 "submit" 
的 <input> 或 <button> 元 素来 定义 ， 图 片 按 钮 可 以 使 用 type 属性 为 "image" 的 <input> 元 素来 定义 。 
点 击 下 面 例子 中 定义 的 所 有 按钮 都 可 以 提交 它们 所 在 的 表单 : 


<!-- 通用 提交 按钮 --> 
<input type="submit" value="Submit Form"> 


























































































































<!-- 自 定义 提交 按钮 --> 


<button type="submit">Submit Form</button> 


<!-- 图 片 按钮 --> 

<input type="image" src="graphic.gif"> 

如 果 表 单 中 有 上 述 任何 一 个 按钮 ， 且 焦点 在 表单 中 某 个 控件 上 ， 则 按 回 车 键 也 可 以 提交 表单 。 
( textarea 控件 是 个 例外 ， 当 焦点 在 它 上 面 时 ， 按 回 车 键 会 换行 。) 注意 ,没有 提交 按钮 的 表单 在 按 回 
车 键 时 不 会 提交 。 

以 这 种 方式 提交 表单 会 在 向 服务 器 发 送 请 求 之 前 触发 supmit 事件 。 这 样 就 提供 了 一 个 验证 表单 数 
据 的 机 会 , 可 以 根据 验证 结果 决定 是 否 真 的 要 提交 。 阻止 这 个 事件 的 默认 行为 可 以 取消 提交 表单 。 例如 ， 
下 面 的 代码 会 阻止 表单 提交 : 


let form = document .getElementById("myForm"); 












































form.addEventListener("submit", (event) => { 
// 阻止 表单 提交 
event .preventDefault (); 


}); 

调用 preventDefault () 方 法 可 以 阻止 表单 提交 。 通 常 ， 在 表单 数据 无 效 以 及 不 应 该 发 送 到 服务 
避 时 可 以 这 样 处 理 。 

当然 ， 也 可 以 通过 编程 方式 在 JavaScript 中 调用 submit () 方 法 来 提交 表单 。 可 以 在 任何 时 候 调 用 
这 个 方法 来 提交 表单 ， 而 且 表 单 中 不 存在 提交 按钮 也 不 影响 表单 提交 。 下 面 是 一 个 例子 : 


let form = document .getElementById("myForm"); 






































// 提交 表单 

form.submit () ; 

通过 submit () 提交 表单 时 ，submit 事件 不 会 触发 。 因 此 在 调用 这 个 方法 前 要 先 做 数据 验证 。 
表单 提交 的 一 个 最 大 的 问题 是 可 能 会 提交 两 次 表单 。 如 果 提 交 表 单 之 后 没有 什么 反应 , 那么 没有 耐 
心 的 用 户 可 能 会 多 次 点 击 提交 按钮 。 结 果 是 很 烦人 的 〈 因 为 服务 顺 要 处 理 重复 的 请 求 )， 甚 至 可 能 造成 
损失 《〈 如 果 用 户 正在 购物 ， 则 可 能 会 多 次 下 单 ) 解决 这 个 问题 主要 有 两 种 方式 : 在 表单 提交 后 禁用 提 
交 按 钮 ， 或 者 通过 onsupmit 事件 处 理 程序 取消 之 后 的 表单 提交 。 
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19.1.2” 重 置 表单 


用 户 单 击 重 置 按钮 可 以 重 置 表单 。 重 置 按 钮 可 以 使 用 type 属性 为 "reset "的 <input> 或 <button> 


元 素来 创建 ， 比 如 : 
<!-- 通用 重 置 按钮 --> 


<input type="reset" value="Reset Form"> 





























| 














<!-- 自 定义 重 置 按钮 --> 


<button type="reset">Reset Form</button> 

这 两 种 按钮 都 可 以 重 置 表单 。 表 单 重 置 后 ,所 有 表单 字段 都 会 重 置 回 页 面 第 一 次 泻 染 时 各 自 拥有 的 
值 。 如 果 字 段 原来 是 空 的 ， 就 会 变 成 空 的 ;如 果 字 段 有 默认 值 ， 则 恢复 为 默认 值 。 
用 户 单 击 重 置 按 钮 重 置 表 单 会 触发 reset 事件 。 这 个 事件 为 取消 重 置 提供 了 机 会 。 例 如 ， 以 下 代 
码 演示 了 如 何 阻止 重 置 表单 : 


let form = document .getElementById("myForm"); 


































































































form.addEventListener("reset", (event) => { 
event .preventDefault (); 


下 
与 表单 提交 一 样 ， 重 置 表单 也 可 以 通过 JavaScript 调用 reset () 方法 来 完成 ， 如 下 面 的 例子 所 示 : 


let form = document .getElementById("myForm"); 




















// 重 置 表单 


form.reset (); 


与 supmit () 方 法 的 功能 不 同 ,调用 reset () 方 法 会 像 单 击 了 重 置 按钮 一 样 触发 reset 事件 。 


注意 ”表单 设计 中 通常 不 提倡 重 置 表 单 ， 因 为 重 置 表单 经 常会 导致 用 户 迷 失 方 向 ， 如 果 意 
外 触发 则 会 令 人 感到 厌烦 。 实 践 中 几乎 没有 重 置 表单 的 需求 。 一 般 来 说 ,提供 一 个 取消 按 








钮 ， 让 用 户 点 击 返回 前 一 个 页 面 ， 而 不 是 恢复 表单 中 所 有 的 值 来 得 更 直观 。 





19.1.3 ”表单 字段 


表单 元 素 可 以 像 页 面 中 的 其 他 元 素 一 样 使 用 原生 DOM 方法 来 访问 。 此 外 ， 所 有 表单 元 素 都 是 表单 
elements 属性 (元素 集合 ) 中 包含 的 一 个 值 。 这 个 elements 集合 是 一 个 有 序列 表 ， 包 含 对 表单 中 所 
有 字段 的 引用 ,包括 所 有 <input>、<textarea>、<button>、<select> 和 <fieldset> 元 素 ,elements 
集合 中 的 每 个 字段 都 以 它们 在 HTML 标记 中 出 现 的 次 序 保存 ， 可 以 通过 索引 位 置 和 name 属性 来 访问 。 
以 下 是 几 个 例子 : 


let form = document .getElementById("forml"),; 
























































// 取得 表单 中 的 第 一 个 字段 


let fieldl1l = form.elements[0]; 


// 取得 表单 中 名 为 "textbox1l" 的 字段 
let field2 = form.elements["textboxl"]; 


// 取得 字段 的 数量 
let fieldCount = form.elements.length; 
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如 果 多 个 表单 控件 使 用 了 同一 个 name， 比 如 像 单 选 按钮 那样 ， 则 会 返回 包含 所 有 同名 元 素 的 
HTMLCollection。 比 如 ， 来 看 下 面 的 HTML 代码 片段 : 


<form method="post" id="myForm"> 
<ul> 
<li><input type="radio" name="color" value="red">Red</1i> 
<li><input type="radio" name="color" value="green">Green</1i> 
<li><input type="radio" name="color" value="blue">Blue</1i> 
</ul> 
</form> 


这 个 HTML 中 的 表单 有 3 个 单 选 按钮 的 name 是 "color", 这 个 名 字 把 它们 联系 在 了 一 起 。 在 访问 
elements["color"] 时 , 返回 的 NodeList 就 包含 这 3 个 元 素 。 而 在 访问 elements [0] 时 ， 只 会 返回 
第 一 个 元 素 。 比 如 : 


let form = document .getElementById("myForm"); 








let colorFields = form.elements["color"]; 
console.log(colorFields.length); // 3 


let firstColorField = colorFields[0]; 
Jet firstFormField = form.elements[0]; 
console.log(firstColorField === firstFormField); // true 


以 上 代码 表明 ， 使 用 form.elements [0] 获取 的 表单 的 第 一 个 字 慨 就 是 form.elements["color"] 
中 包含 的 第 一 个 元 素 。 








注意 也 可 以 通过 表单 属性 的 方式 访问 表单 字段 ， 比 如 form[0] 这 种 使 用 索引 和 form 
["color"] 这 种 使 用 字段 名 字 的 方式 ,访问 这 些 属 性 与 访问 form.elements 集合 是 一 样 


的 。 这 种 方式 是 为 向 后 兼容 旧版 本 浏览 器 而 提供 的 ， 实 际 开发 中 应 该 使 用 elements。 





1. 表单 字段 的 公共 属性 

除 <fielgdset> 元 素 以 外 ， 所 有 表单 字段 都 有 一 组 同样 的 属性 。 由 于 <input> 类 型 可 以 表示 多 种 表 

单字 段 ， 因 此 某 些 属性 只 适用 于 特定 类 型 的 字段 。 除 此 之 外 的 属性 可 以 在 任何 表单 字段 上 使 用 。 以 下 列 

出 了 这 些 表单 字段 的 公共 属性 和 方法 。 

口 aisabled: 布尔 值 ， a 

口 form: 指针 ， 指 向 表单 字段 所 属 的 表单 。 这 个 属性 是 只 读 的 。 

口 name: 字符 串 ， 这 个 字段 的 名 字 。 

口 readqonly: 布尔 值 ， 表 示 这 个 字段 是 否 只 读 。 

口 tabIndex: 数值 ， 表 示 这 个 字段 在 按 Tab 键 时 的 切换 顺序 。 

口 type: 字符 串 ， 表 示 字 段 类 型 ， 如 "checkbox"、 Wa 

口 value: 要 提交 给 服务 器 的 字段 值 。 对 文件 输入 字段 来 说 ,这 个 属性 是 只 读 的 , 仅 包含 计算 机 上 
某 个 文件 的 路 径 。 

这 里 面 除 了 form 属性 以 外 ，JavaScript 可 以 动态 修改 任何 属性 。 来 看 下 面 的 例子 : 


let form = document .getElementById("myForm"); 
let field = form.elements[0]; 






















































































// 修改 字段 的 值 
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field.value = "Another value"; 


// 检查 字段 所 属 的 表单 


console.log(field.form === form); // true 


// 给 字段 设置 焦点 
field.focus(); 


// 禁用 字段 
field.disabled = true; 


// 改变 字段 的 类 型 (不 推荐 ,但 对 <input> 来 说 是 可 能 的 ) 

field.type = "checkbox"; 

这 种 动态 修改 表单 字段 属性 的 能 力 为 任何 时 候 以 任何 方式 修改 表单 提供 了 方便 。 举 个 例子 ，Web 表 
单 的 一 个 常见 问题 是 用 户 常常 会 点 击 两 次 提交 按钮 。 在 涉及 信用 卡 扣 款 的 情况 下 ， 这 是 个 严重 的 问题 ， 
可 能 会 导致 重复 扣 款 。 对 此 ， 常 见 的 解决 方案 是 第 一 次 点 击 之 后 禁用 提交 按钮 。 可 以 通过 监听 supmit 
事件 来 实现 。 比 如 下 面 这 个 例子 : 

// 避免 多 次 提交 表单 的 代码 


let form = document .getElementByIdq("myEorm" ) ; 









































form.addEventListener("submit", (event) => { 
let target = event.target,; 


// 取得 提交 按 锂 
let btn = target.elements["submit-btn"]; 


// 禁用 提交 按钮 
btn.disabled = true; 
} 


以 上 代码 在 表单 的 submit 事件 上 注册 了 一 个 事件 处 理 程序 。 当 submit 事件 触发 时 ,代码 会 取得 
提交 按钮 ， 然 后 将 其 aisabledq 属性 设置 为 true。 注 意 ， 这 个 功能 不 能 通过 直接 给 提交 按钮 添加 
onclick 事件 处 理 程序 来 实现 ， 原 因 是 不 同 浏览 器 触发 事件 的 时 机 不 一 样 。 有 些 浏 览 器 会 在 触发 表单 
的 submit 事件 前 先 触发 提交 按钮 的 click 事件 ， 有 些 浏览 器 则 会 后 触发 cl ick 事件 。 对 于 先 触发 
click 事件 的 浏览 器 , 这 个 按钮 会 在 表单 提交 前 被 禁用 ,这 意味 着 表单 就 不 会 被 提交 了 。 因 此 最 好 使 用 
表单 的 submit 事件 来 禁用 提交 按钮 。 但 这 种 方式 不 适用 于 没有 使 用 提交 按钮 的 表单 提交 。 如 前 所 述 ， 
只 有 提交 按钮 才能 触发 submit 事件 。 

type 属性 可 以 用 于 除 <fieldqset> 之 外 的 任何 表单 字段 。 对 于 <input> 元 素 ， 这 个 值 等 于 HTML 
的 type 属性 值 。 对 于 其 他 元 素 ， 这 个 type 属性 的 值 按照 下 表 设 置 。 

















































































































描述 示例 HTML 类 型 的 值 
单 选 列表 <select>...</select> "select-one" 
多 选 列表 <select multiple>...</select> "select-multiple" 
定义 按钮 <button>...</button> "submit" 
自 定义 非 提 交 按 钮 <button type="button">...</button> "button" 
自 定义 重 置 按钮 <button type="reset">...</button> "SG 
自 定 义 提交 按钮 <button type="submit">...</button> "submit" 
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对 于 <input> 和 <button> 元 素 ， 可 以 动态 修改 其 type 属性 。 但 <select> 元 素 的 type 属性 
读 的 。 

2. 表单 字段 的 公共 方法 

每 个 表单 字段 都 有 两 个 公共 方法 : focus () 和 blur()。focus () 方 法 把 浏览 器 焦点 设置 到 表单 字 
段 ， 这 意味 着 该 字段 会 变 成 活动 字段 并 可 以 响应 键盘 事件 。 例 如 , 文本 框 在 获得 焦点 时 会 在 内 部 显示 闪 
烁 的 光标 ， 表 示 可 以 接收 输入 。focus () 方 法 主要 用 来 引起 用 户 对 页 面 中 某 个 部 分 的 注意 。 比 如 ， 在 页 
面 加 载 后 把 焦点 定位 到 表单 中 第 一 个 字段 就 是 很 常见 的 做 法 。 实 现 方 法 是 监听 1oag 事件 ， 然 后 在 第 一 
个 字段 上 调用 focus () ， 如 下 所 示 : 


window.addEventListener("load", (event) => { 
document .forms[0] .elements[0].focus(); 


反光 

注意 ， 如 果 表 单 中 第 一 个 字段 是 type 为 "hidden" 的 <input> 元 素 , 或 者 该 字段 被 CSS 后 
display 或 visibility 隐藏 了 ， 以 上 代码 就 会 出 错 。 

HTMLS5 为 表单 字段 增加 了 autofocus 属性 ， 支 持 的 浏览 器 会 自动 为 带 有 该 属性 的 元 素 设置 焦点 ， 
而 无 须 使 用 JavaScript。 比 如 : 

<input type="text" autofocus> 

为 了 让 之 前 的 代码 在 使 用 autofocus 时 也 能 正常 工作 ， 必 须 先 检测 元 素 上 是 否 设置 了 该 属性 。 如 
果 设 置 了 autofocus ， 就 不 再 调用 focus ( ) : 


window.addEventListener("load", (event) => { 
let element = document.forms[0] .elements[0]; 
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if (element.autofocus !== true) { 
element.focus(); 
console.log("JS focus"); 
} 
直人 


因为 autofocus 是 布尔 值 属性 ,所 以 在 支持 的 浏览 器 中 通过 JavaScript 访 问 表单 字段 的 autofocus 
属性 会 返回 true ( 在 不 支持 的 浏览 器 中 是 空 字符 串 )。 上面 的 代码 只 会 在 autofocus 属性 不 等 于 true 
时 调用 focus () 方法， 以 确保 向 前 兼容 。 大 多 数 现代 浏览 器 支持 autofocus 属性 ， 只 有 iOS Safari、 
Opera Mini 和 了 IE10 及 以 下 版 本 不 支持 。 



























































注意 ”默认 情况 下 只 能 给 表单 元 素 设置 焦点 。 不 过 ， 通 过 将 tabIndex 属性 设置 为 -1 再 


调用 focus () ， 也 可 以 给 任意 元 素 设 置 焦点 。 只 有 Opera 不 支持 这 个 技术 。 











focus () 的 反 向 操作 是 blur ()， 其 用 于 从 元 素 上 移 除 焦点 。 调 用 blur () 时 , 焦点 不 会 转移 到 任何 
特定 元 素 , 仅仅 只 是 从 调用 这 个 方法 的 元 素 上 移 除 了 。 在 浏览 器 支持 readonly 属性 之 前 ，Web 开发 者 
通常 会 使 用 这 个 方法 创建 只 读 字 段 。 现 在 很 少 有 用 例 需 要 调用 blur () ， 不 过 如 果 需 要 是 可 以 用 的 。 下 
面 是 一 个 例子 : 


document .forms [0] .elements[0] .blur(); 


3. 表单 字段 的 公共 事件 
除了 鼠标 、 键 盘 、 变 化 和 HTML 事件 外 ， 所 有 字段 还 支持 以 下 3 个 事件 。 
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口 blur: 在 字段 失去 焦点 时 触发 。 
口 cnange: 在 <input> 和 <textarea> 元 素 的 value 发 生变 化 且 失 去 焦点 时 和 触发， 或 者 在 
<select> 元 素 中 选中 项 发 生变 化 时 触发 。 
口 focus: 在 字段 获得 焦点 时 触发 。 
blur 和 focus 事件 会 因为 用 户 手动 改变 字段 焦点 或 者 调用 blur () 或 focus () 方 法 而 触发 。 这 两 
个 事件 对 所 有 表单 都 会 一 视 同 仁 。change 事件 则 不 然 ， 它 会 因 控 件 不 同 而 在 不 同时 机 触发 。 对 于 
<input> 和 <textarea> 元 素 ，change 事件 会 在 字段 失去 焦点 ， 同 时 value 自控 件 获得 焦点 后 发 生变 
化 时 触发 。 对 于 <select> 元 素 ，change 事件 会 在 用 户 改 变 了 选中 项 时 触发 ， 不 需要 控件 失去 焦点 。 
focus 和 blur 事件 通常 用 于 以 某 种 方式 改变 用 户 界面 ， 以 提供 可 见 的 提示 或 额外 功能 ( 例如 在 文 
本 框 下 面 显示 下 拉 菜 单 )。change 事件 通常 用 于 验证 用 户 在 字段 中 输入 的 内 容 。 比 如 , 有 的 文本 框 可 能 
只 限于 接收 数值 。focus 事件 可 以 用 来 改变 控件 的 背景 颜色 以 便 更 清楚 地 表明 当前 字段 获得 了 焦点 。 
blur 事件 可 以 用 于 去 掉 这 个 背景 颜色 。 而 change 事件 可 以 用 于 在 用 户 输入 了 非 数 值 时 把 背景 改 为 红 
色 。 以 下 代码 展示 了 上 述 操作 : 


let textbox = qocument .forms [0] .elements[0]; 












































































































































textbox.addEventListener("focus", (event) => { 
let target = event.target; 
if (target.style.backgroundColor != "red") { 
target.style.backgroundColor = "yellow"; 
} 
es 
textbox.addEventListener("blur", (event) => { 


let target = event.target,; 
target.style.backgroundColor = /[^\dl/.test(target.value) ? "red" 
}); 


textbox.addEventListener("change", (event) => { 

let target = event.target; 

target.style.backgroundColor = /[^\dl/.test(target.value) ? "red" 
j 


这 里 的 onfocus 事件 处 理 程序 会 把 文本 框 的 背景 改 为 黄色 ， i 
onblur 和 onchange 事件 处 理 程序 会 在 发 现 非 数值 字符 时 把 背景 改 为 红色 。 为 测试 非 数 值 字符 ， 
使 用 了 一 个 简单 的 正则 表达 式 来 检测 文本 框 的 value。 这 个 功能 必须 同时 在 onblur 和 onchange a 
处 理 程序 上 实现 ， 以 确保 无 论文 本 框 是 否 改变 都 能 执行 验证 。 



































注意 blur 和 change 事件 的 关系 并 没有 明确 定义 。 在 菜 些 浏览 器 中 ,blur 事件 会 先 于 
change 事件 触发 ; 在 其 他 浏览 器 中 ， 触 发 顺序 则 相反 。 因 此 不 能 依赖 这 两 个 事件 触发 的 


顺序 ， 必 须 区 分 时 要 多 加 注意 。 





19.2 文本 框 编程 


在 HIML 中 有 两 种 表示 文本 框 的 方式 : 单行 使 用 <input > 元 素 ， 多 行使 用 <textarea> 元 素 。 这 两 
个 控件 非常 相似 ， 大 多 数 时 候 行为 也 一 样 。 不 过 ， 它 们 也 有 非常 重要 的 区 别 。 
默认 情况 下 ，<input> 元 素 显 示 为 文本 框 ， 省 略 type 属性 会 以 "text "作为 默认 值 。 然 后 可 以 通过 
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size 属性 指定 文本 框 的 宽度 , 这 个 宽度 是 以 字符 数 来 计量 的 。 而 value 属性 用 于 指定 文本 框 的 初始 值 ， 




















maxLength 属性 用 于 指定 文本 框 允许 的 最 多 字符 数 。 因 此 要 创建 一 个 一 次 可 显示 25 个 字符 , 但 最 多 允 

















许 显示 50 个 字符 的 文本 框 ， 可 以 这 样 写 : 








<input type="text" size="25" maxlength="50" Value="initial Value"> 

<textarea> 元 素 总 是 会 创建 多 行文 本 框 。 可 以 使 用 rows 属性 指定 这 个 文本 框 的 高 度 ， 以 字符 数 
计量 ; 以 cols 属性 指定 以 字符 数 计量 的 文本 框 宽度 ， 类 似 于 <input> 元 素 的 size 属性 。 与 <input> 
不 同 的 是 ，<textarea> 的 初始 值 必须 包含 在 <textarea> 和 </textarea> 之 间 ， 如 下 所 示 ; 


<textarea rows="25" cols="5">initial value</textarea> 


同样 与 <input > 元 素 不 同 的 是 ，<textarea> 不 能 在 HTML 中 指定 最 大 允许 的 字符 数 。 


























除了 标记 中 的 不 同 ， 这 两 种 类 型 的 文本 框 都 
可 以 读 取 也 可 以 设置 文本 模式 的 值 ， 如 下 所 示 : 





























会 在 value 属性 中 保存 自己 的 内 容 。 通 过 这 个 属 


本 








Jet 七 extbox = document.forms[0] .elements["textbox1l"]; 


console.log(textbox.value); 


textbox.value = "Some new value"; 





应 该 使 用 value 属性 , 而 不 是 标准 DOM 方法 读 写 文本 框 的 值 。 比如 , 不 要 使 用 setAttripute 
设置 <input> 元 素 value 属性 的 值 ， 也 不 要 尝试 修改 <textarea> 元 素 的 第 一 个 子 节点 。 对 value 属 
性 的 修改 也 不 会 总 体现 在 DOM 中 ， 因 此 在 处 理 文本 框 值 的 时 候 最 好 不 要 使 用 DOM 方法 。 





























19.2.1 选择 文本 

















可 














两 种 文本 框 都 支持 一 个 名 为 select () 的 方法 ， 此 方法 用 于 全 部 选中 文本 框 中 的 文本 。 大 多 数 浏览 
器 会 在 调用 select () 方 法 后 自动 将 焦点 设置 到 文本 框 ( Opera 例外 )。 这 个 方法 不 接收 参数 ， 可 以 在 任 








何 时 候 调 用 。 下 面 来 看 一 个 例子 : 


textbox.select (); 


在 文本 框 获得 焦点 时 选中 所 有 文本 是 非常 常 











let 七 extbox = qdqocument .forms [0] .elements["textbox1l"]; 





见 的 , 特别 是 在 文本 框 有 默认 值 的 情况 下 。 这 样 做 的 出 





发 点 是 让 用 户 能 够 一 次 性 删除 所 有 默认 内 容 。 可 


event.target.select (); 


ss 

















大 提升 表单 易 用 性 。 
1. select 事件 





与 select () 方 法 相对 , 还 有 一 个 select 事件 。 当 选中 文本 框 中 的 文本 时 , 会 触发 select 事件 。 





这 个 事件 确切 的 触发 时 机 因 浏 览 絮 而 异 。 在 IE91 





以 通过 以 下 代码 来 实现 : 


textbox.addEventListener("focus", (event) => { 























把 以 上 代码 应 用 到 文本 框 之 后 ,只 要 文本 框 一 获得 焦点 就 会 自动 选中 其 中 的 所 有 文本 。 这 样 可 以 极 














+、Opera 、Firefox 、Chrome 和 Safari 中 ，select 事件 


会 在 用 户 选 择 完 文本 后 立即 触发 ; 在 IE8 及 更 早 版 本 中 ， 则 会 在 第 一 个 字符 被 选中 时 触发 。 另 外 ， 调 用 
select () 方 法 也 会 触发 select 事件 。 下 面 来 看 一 个 例子 : 


let textbox = document.forms[0] .elements["textbox1l"]; 














textbox.addEventListener("select", (event) => { 
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console.log( ` Text selected: S${textbox.value}. ); 


be 


2. 取得 选中 文本 

虽然 select 事件 能 够 表明 有 文本 被 选中 , 但 不 能 提供 选中 了 哪些 文本 的 信息 。HTMLS5 对 此 进行 了 扩 
展 , 以 方便 更 好 地 获取 选中 的 文本 。 扩 展 为 文本 框 添加 了 两 个 属性 : selectionStart 和 selectionEnd。 
这 两 个 属性 包含 基于 0 的 数值 ,分 别 表 示 文 本 选区 的 起 点 和 终点 (文本 选区 起 点 的 偏 移 量 和 文本 选区 终 
点 的 偏 移 量 )。 因 此 ， 要 取得 文本 框 中 选中 的 文本 ， 可 以 使 用 以 下 代码 : 


function getSelectedText (textbox){ 
return textbox.value.substring (textbox.selectionStart, 
textbox.selectionEnd); 










































































} 


因为 substring () 方 法 是 基于 字符 串 偏 移 量 的 ， 所 以 直接 传人 selectionstart 和 selectionEngd 
就 可 以 取得 选中 的 文本 。 

这 个 扩展 在 IE9+、Firefox、Safari、Chrome 和 Opera 中 都 可 以 使 用 。IE8 及 更 早 版 本 不 支持 这 两 个 
属性 ， 因 此 需要 使 用 其 他 方式 。 

老 版 本 IE 中 有 一 个 包含 整个 文档 中 文本 选择 信息 的 aocument .selection 对 象 , 这 意味 着 无 法 确 
定 选 中 的 文本 在 页 面 中 的 什么 位 置 。 不 过 , 在 与 select 事件 一 起 使 用 时 ， 可 以 确定 是 触发 这 个 事件 文 
本 框 中 选中 的 文本 。 为 取得 这 些 选中 的 文本 ， 必 须 先 创建 一 个 范围 ， 然 后 再 从 中 提取 文本 ， 如 下 所 示 : 


function getSelectedText (textbox){ 
if (typeof textbox.selectionStart == "number")t{ 
return textbox.value.substring (textbox.selectionStart, 
textbox.selectionEnd); 














































































































} else if (document .selection){ 
return document .selection.createRange () .text; 
} 
} 


这 个 修改 后 的 函数 兼容 在 IE 老 版 本 中 取得 选中 文本 。 注 意 document .selection 是 根本 不 需要 
textbox 参数 的 。 

3. 部 分 选中 文本 

HTML5 也 为 在 文本 框 中 选择 部 分 文本 提供 了 额外 支持 。 现 在 ,除了 select () 方 法 之 外 ，Firefox 
最 早 实现 的 setselectionRange () 方 法 也 可 以 在 所 有 文本 框 中 使 用 。 这 个 方法 接收 两 个 参数 : 要 选择 
的 第 一 个 字符 的 索引 和 停止 选择 的 字符 的 索引 ( 与 字符 串 的 substring () 方 法 一 样 )。 下 面 是 几 个 例子 : 


textbox.value = "Hello world!" 





















































// 选择 所 有 文本 


textbox.setSelectionRange(0, textbox.value.length); // "Hello world!" 


// 选择 前 3 个 字符 
textbox.setSelectionRange (0, 3); // "Hel" 








// 选择 第 4~6 个 字符 
textbox.setSelectionRange (4, 7); A "OW 

如 果 想 看 到 选择 , 则 必须 在 调用 set selectionRange () 之 前 或 之 后 给 文本 框 设置 焦点 。 这 个 方法 
在 IE9、Firefox 、Safari 、Chrome 和 Opera 中 都 可 以 使 用 。 
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IE8 及 更 早 版 本 支持 通过 范围 部 分 选中 文本 。 这 也 就 是 说 ， 要 选择 文本 框 
用 正在 文本 框 上 提供 的 createTextRange () 方 法 创建 一 个 范围 ,并 使 月 















































的 部 分 文本 ， 必 须 先 使 


有 movestart () 和 moveEna () 





范围 方法 把 这 个 范围 放 到 正确 的 位 置 上 。 不 过 , 在 调用 这 两 个 方法 前 需要 先 调用 collapse() 方 法 把 范 
































的 例子 所 示 : 


textbox.value = "Hello world!"; 
Var range = textbox.createTextRange(); 


// 选择 所 有 文本 
range.collapse (true); 
range.moveStart ("character", 0); 


range.moveEnd ("character", textbox.value.length); 


range.select (); 


// 选择 前 3 个 字符 

range.collapse (true); 
range.moveStart ("character", 0);} 
range.moveEnd ("character", 3); 
range.select(); // "Hel" 





// 选择 第 4~6 个 字符 

range.collapse (true); 
range.moveStart ("character", 4); 
range.moveEnd ("character", 6); 
range.select(); // "oO WwW" 








与 其 他 浏览 絮 一 样 ， 如 果 想 要 看 到 选中 的 效果 ， 则 必须 让 文本 框 获得 焦点 。 








部 分 选中 文本 对 自动 完成 建议 项 等 高 级 文本 输入 
19.2.2 输入 过 渡 












































围 折 鳃 到 文本 框 的 开始 。 接 着 ,movestart () 可 以 把 范围 的 起 点 和 终点 都 移动 到 相同 的 位 置 ， 再 给 


moveEnd() 传 人 要 选择 的 字符 总 数 作 为 参数 。 最 后 一 步 是 使 用 范围 的 select () 方 法 选中 文本 ,如 下 面 


不 同文 本 框 经 常 需要 保证 输入 特定 类 型 或 格式 的 数据 。 或 许 数据 需要 包含 特定 字符 或 必须 匹配 某 个 








特定 模式 。 由 于 文本 框 默认 并 未 提供 什么 验证 功能 ， 因 此 必须 通 
合 使 用 相关 事件 及 DOM 能 力 ， 可 以 把 常规 的 文本 框 转换 为 能 够 理解 自己 所 收 











1. 屏蔽 字符 





有 些 输 入 框 需要 出 现 或 不 出 现 特定 字符 。 例 如 ,让 用 户 输 入 手机 号 的 文本 机 





























符 。 我 们 知道 keypress 事件 负责 向 文本 框 搬入 字符 , 因此 可 以 通 








数字 字符 。 比 如 ， 下 面 的 代码 会 屏蔽 所 有 按键 的 输入 : 


textbox.addEventListener("keypress", (event) 


event .preventDefault (); 


有 


运行 以 上 代码 会 让 文本 框 变 成 只 读 ， 因 为 所 有 按键 都 被 屏蔽 了 。 如 细 
查 事件 的 charcode 属性 ， 以 确定 正确 的 回应 方式 。 例 如 ， 下 面 就 是 只 允许 输入 数字 的 代码 : 


textbox.addEventListener ("Kkeypress"， (event) 
if (!/\d/.test(String.fromCharCode(event.charCode)))t{ 





























event .preventDefault (); 























过 JavaScript 来 实现 这 种 输入 过 滤 。 组 
数据 的 智能 输入 框 。 


E 就 不 应 该 出 现 非 数字 字 


过 阻止 这 个 事件 的 默认 行为 来 屏蔽 非 


























屏蔽 特定 字符 ， 则 需要 检 
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} 
he 


这 个 例子 先 用 string.fromcharcode() 把 事件 的 charcode 转换 为 字符 串 ,再 用 正则 表达 式 八 G/ 
来 测试 。 这 个 正则 表达 式 匹 配 所 有 数字 字符 ， 如 果 测 试 失 败 就 调用 preventDefault () 屏蔽 事件 默认 
行为 。 这 样 就 可 以 让 文本 框 忽略 非 数字 输入 。 
虽然 keypress 事件 应 该 只 在 按 下 字符 键 时 才 触发 , 但 某 些 浏览 需 会 在 按 下 其 他 键 时 也 触发 这 个 事 
件 。Firefox 和 Safari (3.1 之 前 ) 会 在 按 下 上 、 下 箭头 键 、 退 格 键 和 删除 键 时 触发 keypress 事件 。Safari 
3.1 及 之 后 版 本 对 这 些 键 则 不 会 再 触发 keypress 事件 。 这 意味 着 简单 地 屏蔽 所 有 非 数字 字 符 还 不 够 好 ， 
因为 这 样 也 屏蔽 了 上 述 这 些 非常 有 用 的 且 必 要 的 键 。 好 在 我 们 可 以 轻松 检测 到 是 否 按 下 了 这 些 键 。 在 
Firefox 中 ， 所 有 触发 keypress 事件 的 非 字符 键 的 charcode 都 是 0， 而 在 Safari 3 之 前 这 些 键 的 
charCogde 都 是 8。 毕 合 考虑 这 些 情况 ， 就 是 不 能 屏蔽 charcoge 小 于 10 的 键 。 为 此 ， 上 面 的 函数 可 以 
改进 为 : 
textbox.addEventListener("keypress", (event) => { 
if (!/\d/.test (String.fromCharCode(event.charCode)) && 
event .charCode > 9){ 
event .preventDefault(); 


} 


这 个 事件 处 理 程序 可 以 在 所 有 浏览 
所 有 基础 按键 。 

还 有 一 个 问题 需要 处 理 : 复制 、 粘 贴 及 涉及 Ctrl 键 的 其 他 功能 。 在 除 IE 外 的 所 有 浏览 器 中 ， 前 面 
代码 会 屏蔽 快捷 键 Ctrl+C、Ctrl+V 及 其 他 使 用 Ctrl 的 组 合 键 。 因 此 ， 最 后 一 项 检测 是 确保 没有 按 下 Ctrl 
键 ， 如 下 面 的 例子 所 示 : 


textbox.addEventListener("keypress", (event) => { 
if (!/\d/.test (String.fromCharCode(event.charCode)) && 
event.charCode > 9 && 
levent .ctrlKey)t{ 
event .preventDefault(); 
} 
os 


最 后 这 个 改动 可 以 确保 所 有 默认 的 文本 框 行为 不 受 影响 。 这 个 技术 可 以 用 来 自 定义 是 否 人 允许 在 文本 
框 中 输入 某 些 字符 。 

2. 处 理 剪 贴 板 

IE 是 第 一 个 支持 剪贴 板 相关 事件 及 通过 JavaScript 访问 剪贴 板 数据 的 浏览 器 。 了 E 的 实现 成 为 了 事实 
标准 , 这 是 因为 Safari 、Chrome 、Opera 和 Firefox 都 实现 了 相同 的 事件 和 剪贴 板 访问 机 制 , 后 来 HITML5 
也 增加 了 剪贴 板 事件 。 以 下 是 与 剪贴 板 相关 的 6 个 事件 。 
口 beforecopy: 复制 操作 发 生前 触发 。 
口 copy: 复制 操作 发 生 时 触发 。 
口 peforecut: 剪 切 操作 发 生前 触发 。 
口 cut: 剪 切 操作 发 生 时 触发 。 
口 beforepaste: 粘贴 操作 发 生前 触发 。 
口 paste: 粘贴 操作 发 生 时 触发 。 






































































































































使 用 , 屏蔽 非 数 字 字 符 但 允许 同样 会 触发 keypress 事件 的 
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这 是 一 个 比较 新 的 控制 剪贴 板 访问 的 标准 ， 事 件 的 行为 及 相关 对 象 会 因 浏 览 器 而 异 。 在 Safari、 
Chrome 和 Firefox 中 ，lbeforecopy、beforecut 和 lbeforepaste 事件 只 会 在 显示 文本 框 的 上 下 文 菜 
单 〈 预期 会 发 生 剪贴 板 事件 ) 时 触发 ,但 下 不仅 在 这 种 情况 下 触发 ， 也 会 在 copy、cut 和 paste 事 
件 之 前 触发 。 无 论 是 在 上 下 文 菜单 中 做 出 选择 还 是 使 用 键盘 快捷 键 ，copy、cut 和 paste 事件 在 所 有 
浏览 器 中 都 会 按 预 期 触发 。 
通过 beforecopy、beforecut 和 beforepaste 事件 可 以 在 向 剪贴 板 发 送 或 从 中 检索 数据 前 修改 
数据 。 不 过 ， 取 消 这 些 事件 并 不 会 取消 剪贴 板 操 作 。 要 阻止 实际 的 剪贴 板 操作 ， 必 须 取 消 copy、cut 
和 paste 事件 。 

剪贴 板 上 的 数据 可 以 通过 window 对 象 (IE ) 或 event 对 象 (Firefox、Safari 和 Chrome ) 上 的 
clipboardqData 对 象 来 获取 。 在 Firefox、Safari 和 Chrome 中 ， 为 防止 未 经 授权 访问 剪贴 板 ， 只 能 在 剪 
贴 板 事件 期 间 访 问 clipboardpata 对 象 ; 正则 在 任何 时 候 都 会 暴露 clipboardData 对 象 。 为 了 跨 浏 
览 器 兼容 ， 最 好 只 在 剪贴 板 事件 期 间 使 用 这 个 对 象 。 

clipboardData 对 象 上 有 3 个 方法 : getData()、setData() 和 clearpata(), 其 中 getData() 
方法 从 剪贴 板 检 索 字符 串 数据 ， 并 接收 一 个 参数 ,该 参数 是 要 检索 的 数据 的 格式 。IE 0 
项 : "text" 和 "URL"。Firefox、Safari 和 Chrome 则 期 待 MIME 类 型 ， 不 过 会 将 "text" 视 为 等 价 于 
"text/plain"o 

setData() 方 法 也 类 似 ， 其 第 一 个 参数 用 于 指定 数据 类 型 ， 第 二 个 参数 是 要 放 到 剪贴 板 上 的 文本 。 
同样 ，IE 支持 "text" 和 "URL"，Safari 和 Chrome 则 期 待 MIME 类 型 。 不 过 , 与 getData () 不 同 的 是 ， 
Safari 和 Chrome 不 认可 "text" 类 型 。 只 有 在 IE8 及 更 早 版 本 中 调用 setData() 才 有 效 ， 其 他 浏览 器 会 
忽略 对 这 个 方法 的 调用 。 为 抹 平 差异 ， 可 以 使 用 以 下 跨 浏览 器 的 方法 : 


function getClipboardText (event ){ 
var clipboardData = (event.clipboardData || window.clipboardData); 
return clipboardData.getData("text"); 

} 
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function setClipboardText (event, value)t{ 
if (event.clipboardData)t{ 
return event.clipboardData.setData("text/plain", value); 
} else if (window.clipboardData)t{ 
return window.clipboardData.setData("text", value); 
} 
} 
这 里 的 getClipboardText () 函 它 只 需要 知道 clipboardData 然后 
便 可 以 通过 "text "类 型 调用 getData() 。 相 应 的 ，setclipboardText () 函数 则 要 复杂 。 在 确定 
clipboardData 对 象 的 位 置 之 后 ， a ( Firefox 、Safari 和 Chrome 是 
"text/plain"， 而 了 正 是 "text" ) 调用 setData()。 
如 果 文 本 框 期 待 某 些 字 符 或 某 种 格式 的 文本 , 那么 从 剪贴 板 中 读 取 文本 是 有 帮助 的 。 比 如 ， 如 果 文 
本 框 只 人 允许 输入 数字 ， 那 么 就 必须 检查 粘贴 过 来 的 值 ， 确 保 其 中 只 包含 数字 。 在 paste 事件 中 ， 可 以 
确定 剪贴 板 上 的 文本 是 否 无 效 ， 如 果 无 效 就 取消 默认 行为 ， 如 下 面 的 例子 所 示 : 


textbox.addEventListener("paste", (event) => { 
let text = getClipboardText (event); 























































































































if (!/^\d*$/.test (text))t{ 
event .preventDefault (); 
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} 
由 


这 个 onpaste 事件 处 理 程序 确保 只 有 数字 才能 粘贴 到 文本 框 中 。 如 果 剪 贴 板 中 的 值 不 符合 指定 模 
式 ， 则 取消 粘贴 操作 。Firefox 、Safari 和 Chrome 只 人 允许 在 onpaste 事件 处 理 程序 中 访问 getData() 
方法 。 

因为 不 是 所 有 浏览 器 都 支持 剪贴 板 访问 ， 所 以 有 时 候 更 容易 屏蔽 一 个 或 多 个 剪贴 板 操作 。 在 支持 
copy、cut 和 paste 事件 的 浏览 器 (IE、Safari、Chrome 和 Firefox ) 中 ,很 容易 阻止 事件 的 默认 行为 。 
在 Opera 中 ， 则 需要 屏蔽 导致 相应 事件 的 按键 ， 同 时 阻止 显示 相应 的 上 下 文 菜单 。 


19.2.3 ”自动 切换 


JavaScript 可 以 通过 很 多 方式 来 增强 表单 字段 的 易 用 性 。 最 常用 的 是 在 当前 字段 完成 时 自动 切换 到 
下 一 个 字段 。 对 于 要 收集 数据 的 长 度 已 知 ( 比如 电话 号 码 ) 的 字段 是 可 以 这 样 处 理 的 。 在 美国 ， 电 话 号 
人 码 通 常 分 为 3 个 部 分 区号、 交换 局 号 ， 外 加 4 位 数字 。 在 网 页 中 ， 可 以 通过 3 个 文本 框 来 表示 这 几 个 
部 分 ， 比 如 : 


<input type="text" name="tell" id="txtTell" maxlength="3"> 
<input type="text" name="tel2" id="txtTel2" maxlength="3"> 
<input type="text" name="tel3" id="txtTel3" maxlength="4"> 


为 增加 这 个 表单 的 易 用 性 并 ds 可 以 在 每 个 文本 框 输入 到 最 大 允许 字符 数 时 自动 把 焦点 
切换 到 下 一 个 文本 框 。 因 此 ， 当 用 户 在 第 一 个 文本 框 中 输入 3 个 字符 后 ， 就 把 焦点 移 到 第 二 个 文本 框 ， 
当 用 户 在 第 二 个 文本 框 中 输入 3 个 字 字符 后 ， 把 焦点 再 移 到 第 三 个 文本 框 。 这 种 自动 切换 文本 框 的 行为 可 
以 通过 如 下 代码 实现 : 


<script> 
function tabForward(event)t{ 
let target = event.target; 















































































































































if (target.value.length == target.maxLength)t{ 
let form = target.form; 


for (let i = 0, len = form.elements.length; i < len; i++) { 
If (form.elements[i] == target) { 
if (form.elements[i+1]) { 
form.elements[i+1] .focus(); 
} 
return; 
} 
} 
} 
} 


let inpatids. = I"txtTell", txtTel2"., "txtTel3 sl] 
for (let id of inputIds) { 

let textbox = document .getElementById(id); 
textbox.addEventListener ("keyup", tabForward); 


未 


let textboxl 
let textbox2 
let textbox3 
</script> 


document .getElementById("txtTell"),; 
document .getElementById("txtTel2"); 
document .getElementById("txtTel3"); 
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这 个 tabForward() 函数 是 实现 自动 切换 的 关键 。 它 通过 比较 用 户 输入 文本 的 长 度 与 maxlength 
属性 的 值 来 检测 输入 是 否 达 到 了 最 大 长 度 。 如 果 两 者 相等 ( 因为 浏览 器 会 强制 最 大 字符 数 ， 所 以 不 可 能 
出 现 多 的 情况 )， 那 么 就 要 通过 循环 表单 中 的 元 素 集 合 找 到 当前 文本 框 ， 并 把 焦点 设置 到 下 一 个 元 素 。 
这 个 函数 接着 给 每 一 个 文本 框 都 指定 了 onkeyup 事件 处 理 程序 。 因 为 keyup 事件 会 在 每 个 新 字符 被 插 
入 到 文本 框 中 时 触发 ,所 以 此 时 应 该 是 检测 文本 框 内 容 长 度 的 最 佳 时 机 。 在 填写 这 个 简单 的 表单 时 ,月 
户 不 用 按 Tab 键 切 换 字段 和 提交 表单 。 

不 过 要 注意 ， 上 面 的 代码 只 适用 于 之 前 既定 的 标记 ， 没 有 考虑 可 能 存在 的 隐藏 字段 。 
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19.2.4 HTML5 约束 验证 API 


HTML5 为 浏览 器 新 增 了 在 提交 表单 前 验证 数据 的 能 力 ,这 些 能 力 实现 了 基本 的 验证 ,即使 JavaScript 
不 可 用 或 加 载 失 败 也 没关系 。 这 是 因为 浏览 器 自身 会 基于 指定 的 规则 进行 验证 , 并 在 出 错时 显示 适当 的 
错误 消息 ( 无须 JavaScript )。 这 些 能 力 只 有 支持 HTMLS5 这 部 分 的 浏览 器 才 有 , 包括 所 有 现代 浏览 器 ( 除 
了 Safari ) 和 IE10+。 

验证 会 根据 某 些 条 件 应 用 到 表单 字段 。 可 以 使 用 HTML 标记 指定 对 特定 字段 的 约束 ， 然 后 浏览 
会 根据 这 些 约束 自动 执行 表单 验证 。 

1. 必 填 字段 
第 一 个 条 件 是 给 表单 字段 添加 requirea 属性 ， 如 下 所 示 : 

<input type="text" name="username" required> 

任何 带 有 required 属性 的 字段 都 必须 有 值 ， 否 则 无 法 提交 表单 。 这 个 属性 适用 于 <input>、 
<textarea> 和 <select> 字 段 (Opera 直到 版 本 11 都 不 支持 <select> 的 required 属性 )。 可 以 通过 
JavaScript 检测 对 应 元 素 的 requireg 属性 来 判断 表单 字段 是 否 为 必 填 : 

let isUsernameRequired = document.forms[0] .elements["username"] .required; 

还 可 以 使 用 下 面 的 代码 检测 浏览 器 是 否 支持 required 属性 : 

let isRequiredSupported = "required" in document.createElement ("input"); 

这 行 代码 使 用 简单 的 特性 检测 来 确定 新 创建 的 <input> 元 素 上 是 否 存在 required 属性 。 

注意 , 不 同 浏览 器 处 理 必 填 字段 的 机 制 不 同 。Firefox、Chrome、IE 和 Opera 会 阻止 表单 提交 并 在 相 
应 字段 下 面 显示 有 帮助 信息 的 弹 框 ， 而 Safari 什么 也 不 做 ， 也 不 会 阻止 提交 表单 。 

2. 更 多 输入 类 型 

HTML5 为 <input> 元 素 增加 了 几 个 新 的 type 值 。 这 些 类 型 属性 不 仅 表明 了 字段 期 待 的 数据 类 型 ， 
而 且 也 提供 了 一 些 默 认 验 证 ， 其 中 两 个 新 的 输入 类 型 是 已 经 得 到 广泛 文 持 的 "email" 和 "url"， 二 者 都 
有 浏览 器 提供 的 自 定 义 验 证 。 比 如 ; 


<input type="email" name="email"> 
<input type="url" name="homepage"> 


"email" 类 型 确保 输入 的 文本 匹配 电子 邮件 地 址 ， 而 "ur1" 类 型 确保 输入 的 文本 匹配 URL。 注 意 ， 
浏览 器 在 匹配 模式 时 都 存在 问题 。 最 明显 的 是 文本 "-e@- "会 被 认为 是 有 效 的 电子 邮件 地 址 。 浏 览 器 厂商 
仍然 在 解决 这 些 问 题 。 

要 检测 浏览 器 是 否 支持 这 些 新 类 型 ， 可 以 在 JavaScript 中 新 创建 一 个 输入 元 素 并 将 其 类 型 属性 设置 
为 "emai1" 或 "ur1l", 然后 再 读 取 该 元 素 的 值 。 老 版 本 浏览 器 会 自动 将 未 知 类 型 值 设 置 为 "text" ， 而 文 
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持 的 浏览 器 会 返回 正确 的 值 。 比 如 : 


let input = document.createElement ("input"); 
input.type = "email"; 
let isEmailSupported = (input.type == "email"); 


对 于 这 两 个 新 类 型 ， 除 非 应 用 了 required 属性 ,否则 空 字 段 是 有 效 的 。 男 外 ， 指 定 一 个 特殊 输入 

类 型 并 不 会 阻止 用 户 输入 无 效 的 值 。 新 类 型 只 是 会 应 用 一 些 默 认 验 证 。 
3. 数值 范围 
除了 "email" 和 "url"，HTML5 还 定义 了 其 他 几 种 新 的 输入 元 素 类 型 ， 它 们 都 是 期 待 某 种 数值 输 

入 的 , 包括 : "number"、"range"、"datetime"、"datetime-local"、 "date"、 "month"、"week" 

和 "time"。 并 非 所 有 主流 浏览 器 都 支持 这 些 类 型 ， 因 此 使 用 时 要 当心 。 浏 览 器 厂商 目前 正人 致力 于 解决 

兼容 性 问题 和 提供 更 逻辑 化 的 功能 。 本 节 内 容 更 多 地 是 介绍 未 来 趋势 ， 而 不 是 讨论 当前 就 能 用 的 功能 。 

对 上 述 每 种 数值 类 型 ， 都 可 以 指定 min 属性 〈 最 小 可 能 值 )、max 属性 〈 最 大 可 能 值 )， 以 及 step 

属性 (从 min 到 max 的 步 长 值 ) 例如 ， 如 果 只 允许 输入 0 到 100 中 5 的 倍数 ， 那 么 可 以 这 样 写 : 9 


<input type="number" min="0" max="100" step="5" name="count"> 









































































































































根据 浏览 器 的 不 同 ， 可 能 会 也 可 能 不 会 出 现 旋转 控件 (上 下 按钮 ) 用 于 自动 增加 和 减少 。 

上 面 每 个 属性 在 JavaScript 中 也 可 以 通过 对 应 元 素 的 DOM 属性 来 访问 和 修改 。 此 外 ,还 有 两 个 方 
法 ， 即 stepUp() 和 stepDown() 。 这 两 个 方法 都 接收 一 个 可 选 的 参数 : 要 从 当前 值 加 上 或 减 去 的 数 
值 。( 默认 情况 下 , 步 长 值 会 递增 或 递减 1。) 虽然 浏览 器 还 没有 实现 这 些 方法 , 但 可 以 先 看 一 下 它们 的 
用 法 : 


























input .stepUP () ; // 加 1 
input.stepUp(5); // 加 5 
input .stepDown () ; // 减 1 
input.stepDown(10); // 减 10 
4. 输入 模式 











HTML5 为 文本 字段 新 增 了 pattern 属性 。 这 个 属性 用 于 指定 一 个 正则 表达 式 , 用 户 输入 的 文本 必 
须 与 之 匹配 。 例 如 ， 要 限制 只 能 在 文本 字段 中 输入 数字 ， 可 以 这 样 添加 模式 : 

<input type="text" pattern="\d+" name="count"> 

注意 模式 的 开头 和 末尾 分 别 假设 有 ^ 和 $。 这 意味 着 输入 内 容 必须 从 头 到 尾 都 严格 与 模式 匹配 。 

与 新 增 的 输入 类 型 一 样 ， 指 定 pattern 属性 也 不 会 阻止 用 户 输 入 无 效 内 容 。 模 式 会 应 用 到 值 ， 然 
后 浏览 器 会 知道 值 是 否 有 效 。 通 过 访问 pattern 属性 可 以 读 取 模式 : 

let pattern = document.forms[0] .elements["count"] .pattern; 

使 用 如 下 代码 可 以 检测 浏览 器 是 否 支 持 pattern 属性 : 

let isPatternSupported = "pattern" in document.createElement ("input"); 
5. 检测 有 效 性 

使 用 checkvaligdity () 方 法 可 以 检测 表单 中 任意 给 定 字段 是 否 有 效 。 这 个 方法 在 所 有 表单 元 素 上 
都 可 以 使 用 ， 如 果 字 段 值 有 效 就 会 返回 true， 否 则 返回 false。 判 断 字段 是 否 有 效 的 依据 是 本 节 前 矣 
提 到 的 约束 条 件 ， 因 此 必 填 字段 如 果 没 有 值 就 会 被 视 为 无 效 ， 而 字段 值 不 匹配 pattern 属性 也 会 被 视 
为 无 效 。 比 如 : 
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if (document.forms[0] .elements[0] .checkValidity())t 
// 字段 有 效 ， 继 续 

} else { 
// 字段 无 效 

} 


要 检查 整个 表单 是 否 有 效 ， 可 以 直接 在 表单 上 调用 checkvalidity () 方 法 。 这 个 方法 会 在 所 有 字 
段 都 有 效 时 返回 true， 有 一 个 字段 无 效 就 会 返回 false: 


if(document.forms[0] .checkValidity())t{ 
// 表单 有 效 ， 继 续 
} else { 


// 表单 无 效 














} 


checkValigdity () 方 法 只 会 告诉 我 们 字段 是 否 有 效 ， 而 validity 属性 会 告诉 我 们 字段 为 什么 有 
效 或 无 效 。 这 个 属性 是 一 个 对 象 ， 包 含 一 系列 返回 布尔 值 的 属性 。 
口 customError: 如 果 设 置 了 setcustomValidity () 就 返回 true， 否 则 返回 false。 
口 patternMismatch: 如 果 字 段 值 不 匹配 指定 的 pattern 属性 则 返回 true。 
口 rangeOverflow: 如 果 字 段 值 大 于 max 的 值 则 返回 true。 
口 rangeUnderflow: 如 果 字 段 值 小 于 min 的 值 则 返回 true。 
口 stepMisMatch: 如 果 字 段 值 与 min、max 和 step 的 值 不 相符 则 返回 true。 
口 tooLong: 如 果 字 段 值 的 长 度 超过 了 属性 指定 的 值 则 返回 true。 某 些 浏 览 锅 ， 如 
Firefox 4 会 自动 限制 字符 数量 ， 因 此 这 个 属性 值 始终 为 false。 
口 typeMi smatch: rt Sm 回 true。 
口 valiq: 如 果 其 他 所 有 属性 的 值 都 为 false 则 返回 true。 与 checkvalidity() 的 条 件 一 致 。 
D valueMissing: 如 果 字 段 是 必 填 的 但 没有 值 则 返回 true。 
因此 , 通过 validity 属性 可 以 检查 表单 字段 的 有 效 性 , 从 而 获取 更 具体 的 信息 , 如 下 面 的 代码 所 示 : 


if (input.validity && !input.validity.validqd)t 
if (input.validity.valueMissing)t 
console.log("Please specify a value.") 
} else if (input.validity.typeMismatch)t 
console.log("Please enter an email address."); 
} else { 
console.log("Value is invalid."); 


} 
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} 


6. 荣 禁用 验 证 
通过 指定 novaliqdate 属性 可 以 禁止 对 表单 进行 任何 验证 : 


<form method="post" action="/signup" novalidate> 
<!-- 表单 元 素 --> 
</form> 
这 个 值 也 可 以 通过 JavaScript 属 性 novalidate 检索 或 设置 ,设置 为 true 表示 属性 存在 ,设置 为 
false 表示 属性 不 存在 : 


document .forms [0] .noValidate = true; // 关闭 验证 


如 果 一 个 表单 中 有 多 个 提交 按钮 ， 那 么 可 以 给 特定 的 提交 按钮 添加 formnovalidate 属性 ， 指 定 
通过 该 按钮 无 须 验 证 即 可 提交 表单 : 
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<form method="post" action="/foo"> 
<!-- 表单 元 素 --> 
<input type="submit" value="Regular Submit"> 
<input type="submit" formnovalidate name="btnNoVvalidate" 
value="Non-validating Submit"> 
</form> 


在 这 个 例子 中 ,第 一 个 提交 按钮 会 让 表单 像 往常 一 样 验证 数据 ,第 二 个 提交 按钮 则 禁用 了 验证 ， 可 
以 直接 提交 表单 。 我 们 也 可 以 使 用 JavaScript 来 设置 这 个 属性 : 


// 关闭 验证 
document .forms [0] .elements ["btnNovValiadate"] .formNoVvalidate = true; 
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选择 框 是 使 用 <select> 和 <option> 元 素 创建 的 。 为 方便 交互 ，HTMLSelectElement 类 型 在 所 有 
表单 字段 的 公共 能 力 之 外 又 提供 了 以 下 属性 和 方法 。 
口 adaq(tnewoption，reloption): 在 reloption 之 前 向 控件 中 添加 新 的 <option>。 

口 multiple: 布尔 值 ， 表 示 是 否 允 许多 选 ， 等 价 于 HTML 的 multiple 属性 。 
口 options: 控件 中 所 有 <option> 元 素 的 HTMLCollection。 
口 remove (index) : 移 除 给 定位 置 的 选项 。 
口 selectedIndex: 选中 项 基于 0 的 索引 值 ， 如 果 没 有 选中 项 则 为 -1。 对 于 允许 多 选 的 列表 ， 始 
终 是 第 一 个 选项 的 索引 。 
口 size: 选择 框 中 可 见 的 行 数 ， 等 价 于 HTML 的 size 属性 。 
选择 框 的 type 属性 可 能 是 "select-one" 或 "select-multiple"， 具体 取决 于 multiple 属性 
是 否 存在 。 当 前 选中 项 根据 以 下 规则 决定 选择 框 的 value 属性 。 
口 如 果 没 有 选中 项 ， 则 选择 框 的 值 是 空 字 符 串 。 
口 如 果 有 一 个 选中 项 ， 且 其 value 属性 有 值 ， 则 选择 框 的 值 就 是 选中 项 value 属性 的 值 。 即 使 
value 属性 的 值 是 空 字符 串 也 是 如 此 。 
口 如 果 有 一 个 选中 项 ， 且 其 value 属性 没有 指定 值 ， 则 选择 框 的 值 是 该 项 的 文本 内 容 。 
口 如 果 有 多 个 选中 项 ， 则 选择 框 的 值 根据 前 两 条 规则 取得 第 一 个 选中 项 的 值 。 
来 看 下 面 的 选择 框 : 
<select name="location" id="selLocation"> 
<option value="Sunnyvale, CA">Sunnyvale</option> 
<option value="Los Angeles, CA">Los Angeles</option> 
<option value="Mountain View, CA">Mountain View</option> 
<option value="">China</option> 


<option>Australia</option> 
</select> 


如 果 选 中 这 个 选择 框 中 的 第 一 项 ， 则 字段 的 值 就 是 "sunnyvale，CA"。 如 果 文 本 为 "china" 的 项 
被 选中 ， 则 字段 的 值 是 一 个 空 字符 串 ， 因 为 该 项 的 value 属性 是 空 字 符 串 。 如 果 选 中 最 后 一 项 ， 那 么 
字段 的 值 是 "Australia"， 因 为 该 <option> 元 素 没有 指定 value 属性 。 

每 个 <option> 元 素 在 DOM 中 都 由 一 个 HTMLOptionElement 对 象 表 示 。HTMLOptionElement 
类 型 为 方便 数据 存 取 添 加 了 以 下 属性 。 

口 index: 选项 在 options 集合 中 的 索引 。 
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口 1abel: 选项 的 标签 ， 等 价 于 HTML 的 1abel 属性 。 
口 selected: 布尔 值 ， 表 示 是 否 选 中 了 当前 选项 。 把 这 个 属性 设置 为 true 会 选中 当前 选项 。 
口 text: 选项 的 文本 。 
口 value: 选项 的 值 ( 等 价 于 HTML 的 value 属性 )。 

大 多 数 <option> 属 性 是 为 了 方便 存 取 选项 数据 。 可 以 使 用 常规 DOM 功能 存 取 这 些 信 息 ， 只 是 
率 比 较 低 ， 如 下 面 的 例子 所 示 : 
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let selectbox = dqocument .forms [0] .elements["location"]; 

// 不 推荐 

let text = selectbox.options[0] .firstChild.nodeValue; // 选项 文本 

let value = selectbox.options [0] .getAttribute("value"); // 选项 值 

以 上 代码 使 用 标准 的 DOM 技术 获取 了 选择 框 中 第 一 个 选项 的 文本 和 值 。 下 面 再 比较 一 下 使 用 特殊 
选项 属性 的 代码 : 

let selectbox = dqocument .forms [0] .elements["location"]; 

// 推荐 

let text = selectbox.options[0] .text; // 选项 文本 


let value = selectbox.options[0] .value; // 选项 值 
在 操作 选项 时 ， 最 好 使 用 特定 于 选项 的 属性 ， 因 为 这 些 属性 得 到 了 跨 浏览 器 的 良好 支持 。 在 操作 
DOM 节点 时 ,与 表单 控制 实际 的 交互 可 能 会 因 浏 览 器 而 异 。 不 推荐 使 用 标准 DOM 技术 修改 <option> 





















































元 素 的 文本 和 值 。 
最 后 强调 一 下 ,选择 框 的 change 事件 与 其 他 表单 字段 是 不 一 样 的 。 其 他 表单 字段 会 在 自己 的 值 改 
变 后 触发 change 事件 ， 然 后 字段 失去 焦点 。 而 选择 框 会 在 选中 一 项 时 立即 触发 cnange 事件 。 








注意 不同 浏览 器 返回 的 value 属性 可 能 会 有 差异 。JavaScript 中 的 value 属性 始终 等 于 
HTML 中 的 value 属性 。 但 在 HIML 中 没有 指定 value 属性 的 情况 下 ，IE8 及 早期 版 本 


会 返回 空 字符 串 ， 而 IE9 及 之 后 版 本 、Safari、Firefox、Chrome 和 Opera 会 返回 与 text 
相同 的 值 。 





19.3.1 选项 处 理 


对 于 只 允许 选择 一 项 的 选择 框 ， 
下 面 的 例子 所 示 : 

let selectedOption = selectbox.options[selectbox.selectedIindex]; 

这 样 可 以 获取 关于 选项 的 所 有 信息 ， 比 如 : 


let selectedIindex = selectbox.selectedIindex:; 

let selectedOption = selectbox.options[selectedIndex]; 

console.log( Selected index: S${selectedIndex}\n. + 
‘Selected text: S${selectedOption.text}\n + 
‘Selected value: S${selectedOption.value}.); 


以 上 代码 打印 出 了 选中 项 的 索引 及 其 文本 和 值 。 
对 于 允许 多 选 的 选择 框 ，selectedIndex 属性 就 像 只 允许 选择 一 项 一 样 。 设 置 selectedIndex 








取 选 项 最 简单 的 方式 是 使 用 选择 框 的 selecteaInaex 属性 ， 如 


潭 
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会 移 除 所 有 选项 ， 只 选择 指定 的 项 ， 而 获取 selectedIndex 只 会 返回 选中 的 第 一 项 的 索引 。 

选项 还 可 以 通过 取得 选项 的 引用 并 将 其 selected 属性 设置 为 true 来 选中 。 例如， 以 下 代码 会 选 
中 选择 框 中 的 第 一 项 : 

selectbox.options[0] .selected = true; 

与 selectedIndex 不 同 , 设置 选项 的 selected 属性 不 会 在 多 选 时 移 除 其 他 选项 ， 从 而 可 以 动态 
选择 任意 多 个 选项 。 如 果 修 改 单 选 框 中 选项 的 selected 属性 ， 则 其 他 选项 会 被 移 除 。 要 注意 的 是 , 把 
selected 属性 设置 为 false 对 单 选 框 没有 影响 。 

通过 selected 属性 可 以 确定 选择 框 中 哪个 选项 被 选中 。 要 取得 所 有 选中 项 , 需要 循环 选项 集合 逐 
一 检测 selected 属性 ， 比 如 : 


function getSelectedOptions (Selectbox) { 
let result = new Array(); 






















































































for (let option of selectbox.options) { 
if (option.selected) { 
result .push (option); 
| 
} 


return result; 


} 


这 个 函数 会 返回 给 定 选择 框 中 所 有 选中 项 的 数组 。 首 先 创建 一 个 包含 结果 的 数组 ， 然 后 通过 for 循 
迭代 所 有 选项 ， 2 selected 属性 。 如 果 选 项 被 选中 ,就 将 其 添加 到 result 数组 。 最 
后 是 返回 选中 项 数组 。 这 个 get Selectedoptions () 函数 可 以 用 于 获取 选中 项 的 信息 ， 比 如 : 


let selectbox = dqocument .getElementById("selLocation" ) ; 
let selectedOptions = getSelectedOptions (selectbox); 
let message = "" 









































for (let option of selectedOptions) { 
message += 'Selected index: S${option.index}\n' + 
'Selected text: S${option.text}\n' + 
'Selected value: S${option.value}\n' 


} 
console.log (message); 


个 例子 先 检索 了 一 个 选择 框 的 所 有 选中 项 。 然 后 通过 for 循环 构建 包含 所 有 选中 项 信息 的 字符 
串 ， an 的 索引 、 | 以 上 代码 既 适 用 于 单 选 本 也 适用 于 多 选 


19.3.2 添加 选 
可 以 使 用 JavaScript 动态 创建 选项 并 将 它们 添加 到 选择 框 。 首 先 ， 可 以 使 用 DOM 方法 ， 如 下 所 示 : 


let newOption = document.createElement ("option"); 
newOption.appendChild(document .createTextNode ("Option text")); 
newOption.setAttribute("value", "Option value"); 























TH 
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selectbox.appendChild (newOption); 


以 上 代码 创建 了 一 个 新 的 <option> 元 素 , 使 用 文本 节点 添加 文本 , 设置 其 value 属性 ， 然 后 将 3 








r 
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添加 到 选择 框 。 添 加 到 选择 框 之 后 ， 新 选项 会 立即 显示 出 来 。 

另外 ， 也 可 以 使 用 option 构造 函数 创建 新 选项 ， 这 个 构造 函数 是 DOM 出 现 之 前 就 已 经 得 到 浏览 
器 支持 的 。option 构造 聘 数 接收 两 个 参数 : text 和 value， 其 中 value 是 可 选 的 。 虽 然 这 个 构造 函 
数 通常 会 创建 opject 的 实例 , 但 DOM 合 规 的 浏览 器 都 会 返回 一 个 <option> 元 素 。 这 意味 着 仍然 可 
以 使 用 appenachila() 方 法 把 这 样 创建 的 选项 添加 到 选择 框 。 比 如 下 面 的 例子 : 


let newOption = new Option("Option text", "Option value") 
selectbox.appendChild (newOption); // 在 IE8 及 更 低 版 本 中 有 问题 


这 个 方法 在 除 IE8 及 更 低 版 本 之 外 的 所 有 浏览 器 中 都 没有 问题 。 由 于 实现 问题 ，IE8 及 更 低 版 本 在 
这 种 情况 下 不 能 正确 设置 新 选项 的 文本 。 

另 一 种 添加 新 选项 的 方式 是 使 用 选择 框 的 aaa () 方 法 。DOM 规定 这 个 方法 接收 两 个 参数 : 要 添加 
的 新 选项 和 要 添加 到 其 前 面 的 参考 选项 。 如 果 想 在 列表 末尾 添加 选项 ， 那 么 第 二 个 参数 应 该 是 nul1。 
IE8 及 更 早 版 本 对 aaa () 方 法 的 实现 稍 有 不 同 ， 其 第 二 个 参数 是 可 选 的 ， 如 果 要 传人 则 必须 是 一 个 索引 
值 ， 表 示 要 在 其 前 面 添加 新 选项 的 选项 。DOM 合 规 的 浏览 器 要 求 必 须 传人 第 二 个 参数 ， 因 此 在 跨 浏 览 
器 方法 中 不 能 只 使 用 一 个 参数 (IE9 是 符合 DOM 规范 的 ) 此 时 ， 传 人 undefined 作为 第 二 个 参数 可 
以 保证 在 所 有 浏览 器 中 都 将 选项 添加 到 列表 未 尾 。 下 面 是 一 个 例子 : 


let newOption = new Option("Option text", "Option value") 
selectbox.add (newOption, undefined); // 最 佳 方案 


以 上 代码 可 以 在 所 有 版 本 的 正 及 DOM 合 规 的 浏览 器 中 使 用 。 如 果 不 想 在 最 后 插入 新 选项 , 则 应 该 
使 用 DOM 技术 和 insertBefore()。 









































































































































注意 跟 在 HTML 中 一 样 ， 选 项 的 值 不 是 必需 的 。option 构造 函数 也 可 以 只 接收 一 个 参 


数 (选项 的 文本 )。 





19.3.3” 移 除 选项 


与 添加 选项 类 似 ， 移 除 选项 的 方法 也 不 止 一 种 。 第 一 种 方式 是 使 用 DOM 的 removechi1a() 方 法 
并 传人 要 移 除 的 选项 ， 比 如 : 




















selectbox.removeChild(selectbox.options[0]); // 移 除 第 一 项 
第 二 种 方式 是 使 用 选择 框 的 remove () 方 法 。 这 个 方法 接收 一 个 参数 , 即 要 移 除 选项 的 索引 ， 比 如 : 
selectbox.remove (0); // 移 除 第 一 项 











最 后 一 种 方式 是 直接 将 选项 设置 为 等 于 nul1。 这 同样 也 是 DOM 之 前 浏览 器 实现 的 方式 。 下 二 
一 个 例子 : 


selectbox.options[0] = null; // 移 除 第 一 项 
要 清除 选择 框 的 所 有 选项 ， 需 要 迭代 所 有 选项 并 逐一 移 除 它们 ， 如 下 面 例子 所 示 : 


function clearSelectbox(selectbox) { 
for (let option of selectbox.options) { 
selectbox.remove (0); 
} 
} 








六 
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这 个 函数 可 以 逐一 移 除 选择 框 中 的 每 一 项 。 因 为 移 除 第 一 项 会 自动 将 所 有 选项 向 前 移 一 位 ,所 以 这 


样 就 可 以 移 除 所 有 选项 。 


19.3.4 “移动 和 重 排 选 项 
在 DOM 之 前 ， 从 一 个 选择 框 向 另 一 个 选择 框 移动 选项 是 非常 麻烦 的 ， 














要 先 从 第 一 个 选择 框 移 除 选 








项 ， 然 后 以 相同 文本 和 值 创建 新 选项 ， 再 将 新 选项 添加 到 第 二 个 选择 框 。DOM 方法 则 可 以 直接 将 某 个 














选项 从 第 一 个 选择 框 移动 到 第 二 个 选择 框 ， 只 要 对 相应 选项 使 用 appenac 








hild() 方 法 即 可 。 如 果 给 这 





个 方法 传 入 文档 中 已 有 的 元 素 ， 则 该 元 素 会 先 从 其 父 元 素 中 移 除 ， 然 后 再 插入 指定 位 置 。 例 如 ， 下面 的 


代码 会 从 选择 框 中 移 除 第 一 项 并 插入 男 一 个 选择 框 : 


let selectboxl 
let selectbox2 











document .getElementById("selLocationsl1"); 
document .getElementById("selLocations2"); 


selectbox2.appendChild(selectboxl.options[0]); 


移动 选项 和 移 除 选项 都 会 导致 每 个 选项 的 index 属性 重 置 。 








重 排 选 项 非常 类 似 ，DOM 方法 同样 是 最 佳 途径 。 要 将 选项 移动 到 选择 框 中 的 特定 位 置 ， 








insertBefore() 方 法 是 最 合适 的 。 不过, 要 把 选项 移动 到 最 后 , 还 是 appendchilaqa() 方 法 比较 方便 。 





下 面 的 代码 演示 了 将 一 个 选项 在 选择 框 中 前 移 一 个 位 置 : 


let optionToMove = selectbox.options[1]; 
selectbox.insertBefore (optionToMove, 
selectbox.options[optionToMove.index- 

















1]); 


这 个 例子 首先 获得 要 移动 选项 的 索引 , 然后 将 其 插入 之 前 位 于 它 前 面 的 选项 之 前 , 其 中 第 二 行 代码 
适用 于 除 第 一 个 选项 之 外 的 所 有 选项 。 下 面 的 代码 则 可 以 将 选项 向 下 移动 一 个 位 置 : 








let optionToMove = selectbox.options[1]; 
selectbox.insertBefore (optionToMove, 
selectbox.options[optionToMove.index+ 


以 上 代码 适用 于 选择 框 中 的 所 有 选项 ， 包 括 最 后 一 
19.4 表单 序列 化 





























21); 


随 着 Ajax (第 21 章 会 进一步 讨论 ) 的 所 露 头角 ， 表 单 序列 化 〈form serialization ) 已 经 成 为 一 个 常 
需求 。 表 单 在 JavaScript 中 可 以 使 用 表单 字段 的 type 属性 连同 其 name 属性 和 value 属性 来 进行 序 
列 化 。 在 写 代码 之 前 ， 我 们 需要 理解 浏览 器 如 何 确 定 在 提交 表单 时 要 把 什么 发 送 到 服务 器 。 





























口 字段 名 和 值 是 URL 编码 的 并 以 和 号 ( & ) 分 隔 。 
口 禁用 字段 不 会 发 送 。 

口 复 选 框 或 单 选 按钮 只 在 被 选中 时 才 发 送 。 

口 类 型 为 "reset "或 "button" 的 按钮 不 会 发 送 。 
口 多 选 字段 的 每 个 选中 项 都 有 一 个 值 。 








的 <input> 元 素 视 同 提交 按钮 。 


























性 ， 则 该 值 是 它 的 文本 。 


口 <select> 元 素 的 值 是 被 选中 <option> 元 素 的 value 属性 。 如 果 <option> 元 素 没 有 value 属 








口 通过 点 击 提交 按钮 提交 表单 时 , 会 发 送 该 提交 按钮 ; 否则 ,不 会 发 送 提交 按钮 。 类 型 为 "image" 
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表单 序列 化 通常 不 包含 任何 按钮 ， 因 为 序列 化 得 到 的 字符 串 很 可 能 
规则 都 应 该 遵循 。 最 终 完 成 表单 序列 化 的 代码 如 下 : 


function serialize(form) { 
let parts = []; 
let optValue; 





for (let field of form.elements) { 
switch(field.type) { 
Case "select-one": 
case "select-multiple": 
if (field.name.length) { 
for (let option of field.options) { 
if (option.selected) { 
if (option.hasAttribute)t 








义 其 他 方式 提交 。 除 此 之 外 其 他 





optValue = (option.hasAttribute("value") ? 
option.value : option.text) ; 
} else { 
optValue = (option.attributes["value"] .specified ? 
option.value : option.text); 
} 
parts.push(encodeURIComponent (field.name)} + "=" + 
encodeURIComponent (optValue)); 
} 
} 
} 
break; 
case undefined: // 字段 集 
case "file": // 文件 输入 
case "submit": // 提交 按钮 
case "reset": // 重 置 按钮 
case "button": // 自 定义 按 鱼 
break; 
case "radio": // 单 选 按钮 
case "checkbox": // 复 选 框 
if (!field.checked) { 
break; 
} 
default: 


// 不 包含 没有 名 字 的 表单 字段 
if (field.name.length) { 
parts.push('s${encodeURIComponent (field.name)}=" 
'Ss{encodeURIComponent (field.value)}'); 
} 
} 
return parts.join("&"); 


} 


证 





这 个 serialize() 也 数 一 开始 定义 了 一 个 名 为 parts 的 数组 ,用 于 保存 要 创建 字符 串 的 各 个 部 分 。 





接 下 来 通过 for 循环 迭代 每 个 表单 字段 ， 将 字段 保存 在 fiela 变量 中 。 
过 switch 语句 检测 其 type 属性 。 最 麻烦 的 是 序列 化 <select> 元 素 ， 






































获得 一 个 字段 的 引用 后 ， 再 通 
包括 单 选 和 多 选 两 种 模式 。 在 





遍历 选择 框 的 每 个 选项 时 ， 只 要 有 选项 被 选中 ， 就 将 其 添加 到 结果 字符 串 。 单 选 控件 只 会 有 一 个 选项 被 
选中 ,多 选 控件 则 可 能 有 零 或 多 个 选项 被 选中 。 同 样 的 代码 适用 于 两 种 选择 类 型 ， 因 为 浏览 器 会 限制 可 








选项 的 数量 。 找 到 选中 项 时 ， 需 要 确定 使 用 哪个 值 。 如 果 不 存在 value 























属性 ， 则 应 该 以 选项 文本 代替 ， 


不 过 value 属性 为 空 字符 串 是 完全 有 效 的 。 为 此 需要 使 用 DOM 合 规 的 浏览 器 支持 的 hasaAttribute() 
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方法 ， 而 在 IE8 及 更 早 版 本 中 要 使 用 值 的 specified 属性 。 




















表单 中 如 果 有 <fieldset> 元 素 ， 它 就 会 出 现在 元 素 集合 中 ， 但 应 该 没有 type 属性 。 因 此 ， 如 果 








type 属性 是 undefine9G， 则 不 必 纳 入 序列 化 。 各 种 类 型 的 按钮 以 及 文件 输入 字段 也 是 如 此 。( 文件 输 





入 字段 在 提交 表单 时 包含 文件 的 内 容 ， 但 这 些 字段 通常 无 法 转换 ， 
单 选 按钮 和 复 选 框 ， 会 检测 其 checkea 属性 。 如 果 值 为 false 就 退出 switch 语句 ; 如 果 值 为 true， 
则 继续 执行 sefault 分 支 ， 将 字段 的 名 和 值 编码 后 添加 到 parts 数组 。 注 意 ， 所 有 没有 名 字 的 表单 字 


段 都 不 会 包含 在 序列 化 结果 中 以 模 # 
和 号 把 所 有 字段 的 名 值 对 拼接 起 来 。 





















































因而 也 要 排除 在 序列 化 之 外 。) 对 于 























以 浏览 器 的 表单 提交 行为 。 这 个 函数 的 最 后 一 步 是 使 用 join () 通 过 














serialize() 函数 返回 的 结果 是 查询 字符 串 格式 。 如 果 想 要 返回 其 他 格式 ， 修 改 起 来 也 很 简单 。 
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在 网 页 上 编写 富 文本 内 容 是 Web 应 用 开发 中 很 常见 的 需求 。 富 文本 编辑 也 就 是 所 谓 的 “所 见 即 所 
得 ”( WYSIWYG，What You See Is What You Get ) 编辑 。 虽 然 没 有 规范 定义 ， 但 源 自 下 的 一 套 事实 标 
准 已 经 被 Opera 、Safari 、Chrome 和 Firefox 所 支持 。 基 本 的 技术 就 是 在 空白 HTML 文件 中 能 人 一 个 
iframe。 通 过 designMode 属性 ,可 以 将 这 个 空白 文档 变 成 可 以 编辑 的 ， 实际 编辑 的 则 是 <body > 元 素 
的 HTML。gdesignMode 属性 有 两 个 可 能 的 值 : "off" (默认 值 ) 和 "on"。 设 置 为 "on" 时 ， 整 个 文档 



































都 会 变 成 可 以 编辑 

















的 ( 

















标记 为 粗 体 、 和 斜体， 等 等 。 


作为 iframe 源 的 是 一 个 非常 简单 的 空白 HTML 页 面 。 下 玫 


<!DOCTYPE html> 


<html> 
<head> 


















































显示 插入 光标 )， 从 而 可 以 像 使 用 文字 处 理 程序 一 样 编辑 文本 ， 通 过 键盘 将 文本 

















<title>Blank Page for Rich Text Editing</title> 


</head> 

<body> 

</body> 
</html> 


这 个 页 面 会 像 其 他 任何 页 面 一 样 加 载 到 iframe 里 。 为 了 可 以 编辑 , 必须 将 文档 的 designMode 属 


是 一 个 例子 : 



































性 设置 为 "on"。 不 过 ， 只 有 在 文档 完全 加 载 之 后 才 可 以 设置 。 在 这 个 包含 页 面 内 ， 需 要 使 用 onload 
事件 处 理 程序 在 适当 时 机 设置 gesignMode， 如 下 面 的 例子 所 示 : 


<iframe name="richedit" style="height: 100px; width: 











<script> 
window.addEventListener("load", () => { 
frames["richedit"] .document .designMode = "on"; 
}); 
</script> 








以 上 代码 加 载 之 后 ， 可 以 在 页 面 上 看 到 一 个 类 似 文 本 机 
不 过 可 以 通过 CSS 调整 。 











19.5.1 使 用 contenteditable 











的 区 域 。 





100px"></iframe> 


这 个 框 的 样式 具有 网 页 默认 样式 ， 











还 有 一 种 处 理 富 文本 的 方式 ， 也 是 下 最 早 实现 的 ， 即 指定 contenteditable 属性 。 可 以 给 页 面 
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1 的 任何 元 素 指定 contenteditable 属性 ， 然 后 该 元 素 会 立即 被 用 户 编 辑 。 这 种 方式 更 受 欢 迎 ， 因 为 
不 需要 额外 的 iframe 、 空 页 面 和 JavaScript， 只 给 元 素 添加 一 个 contenteditable 属性 即 可 ， 比 如 : 
<div class="editable" id="richedit" contenteditable></div> 
元 素 中 包含 的 任何 文本 都 会 自动 被 编辑 ， 元 素 本 身 类 似 于 <textarea> 元 素 。 通 过 设置 
contentEditable 属性 ， 也 可 以 随时 切换 元 素 的 可 编辑 状态 : 


let div = document .getElementById("richedit"); 
richedit.contentEditable = "true"; 






































FE 


contentEditapble 属性 有 3 个 可 能 的 值 : "true" 表 示 开 启 ，"false" 表 示 关 闭 ，"inherit" 表 示 
继承 父 元 素 的 设置 ( 因为 在 contenteditable 元 素 内 部 会 创建 和 删除 元 素 )。IE、Firefox 、Chrome、 
Safari 和 Opera 及 所 有 主流 移动 浏览 絮 都 支持 contentEditable 属性 。 


























注意 contenteditable 是 一 个 非常 多 才 多 艺 的 属性 。 上 比如, 访问 伪 URL data:text/ 


html，<html] contenteditable> 可 以 把 浏览 器 窗口 转换 为 一 个 记事 本 。 这 是 因为 这 样 
会 临时 创建 DOM 树 并 将 整个 文档 变 成 可 编辑 区 域 。 





19.5.2 与 富 文 本 交互 


与 富 文 本 编辑 带 交 互 的 主要 方法 是 使 用 document .execCommand ()。 这 个 方法 在 文档 上 执行 既定 
的 命令 ， 可 以 实现 大 多 数 格式 化 任务 。document .execCommand () 可 以 接收 3 个 参数 : 要 执行 的 命令 、 
表示 浏览 器 是 否 为 命令 提供 用 户 界 面 的 布尔 值 和 执行 命令 必需 的 值 ( 如 果 不 需 要 则 为 null )。 为 跨 浏览 
器 兼容 ， 第 二 个 参数 应 该 始终 为 false， 因 为 Firefox 会 在 其 为 true 时 抛 出 错误 。 

不 同 浏览 器 支持 的 命令 也 不 一 样 。 下 表 列 出 了 最 常用 的 命令 。 



















































































命 令 值 (第 三 个 参数 ) 说 明 
backcolor 颜色 字符 串 设置 文档 背景 颜色 
bold null 切换 选中 文本 的 粗 体 样式 
copy null 将 选中 文本 复制 到 剪贴 板 
createlink URL 字符 串 将 当前 选中 文本 转换 为 指向 给 定 URL 的 链接 
cut null 将 选中 文本 剪 切 到 剪贴 板 
delete null 删除 当前 选中 的 文本 
fontname 字体 名 将 选中 文本 改 为 使 用 指定 字体 
fontsize 1~7 将 选中 文本 改 为 指定 字体 大 小 
forecolor 颜色 字符 串 将 选中 文本 改 为 指定 颜色 
formatblock HTML 标签 ， 如 <h1> 将 选中 文本 包含 在 指定 的 HTML 标签 中 
indent null 缩 进 文 本 
inserthorizontalrule null 在 光标 位 置 插入 <hr> 元 素 
insertimage 图 片 URL 在 光标 位 置 插入 图 片 
insertorderedlist null 在 光标 位 置 插 入 <ol> 元 素 
insertparagraph null 在 光标 位 置 插入 <p> 元 素 
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人 


全 
A 令 


值 〈 第 三 个 参数 ) 


说 明 


( 续 ) 





insertunorderedlist 
talic 
justifycenter 
justifyleft 

outdent 

paste 


removeformat 


selectall 
underline 


unlink 


剪贴 板 相关 的 命令 与 浏览 器 关系 密切 。 虽 然 这 些 命令 并 不 都 可 以 通 








在 光标 位 置 插入 <ul> 元 素 
切换 选中 文本 的 斜体 样式 
在 光标 位 置 居中 文本 块 

在 光标 位 置 左 对 齐 文 本 块 


减少 缩 进 
在 选 

















文本 上 粘贴 剪贴 板 内容 


移 除 包含 光标 所 在 位 置 块 的 HTML 标签 。 这 是 formatblock 的 


反 操作 





选 吕 


中 








使 用 ， 但 相应 的 键盘 快捷 键 都 是 可 以 用 的 。 


这 些 命令 可 以 用 于 修改 内 符 窗 格 (ifame ) 中 富 文 本 区 域 的 外 观 ， 如 下 廿 


// 在 内 广 窗 格 中 切 联 粗 体 文本 样式 


frames["richedi 
// 在 内 显 窗 格 中 切 
frames["zicheqd 


// 在 内 嵌 窗 格 中 创建 指向 


frames["riched 


// 在 内 识 窗 格 中 为 内 容 添 








frames["richedqd 





LL 





.Q 


.Q 


.Q 








六 


.Q 


ocument .execCommand 


儿 体 文本 样式 


ocument .execCommangd 
WwW .Wrox.Com 的 链接 


ocument .execCommand 


加 <h1l> 标 签 
ocument .execCommand 








是 内 和 藤 窗 格 中 的 document 对 象 : 
// 切换 粗 体 文 本 样式 


document .execCommand 


// 切换 斜体 文本 样式 


document .execCommand 


(全 


// 创建 指向 www.wrox.com 的 链接 


document .execCommand 


// 为 内 容 添加 <h1> 标 签 


document .execCommand 











(" 


人 








文档 中 所 有 文本 
切换 选中 文本 的 下 划 线 样式 
移 除 文本 链接 。 这 是 createlink 的 反 操 作 


Cu 


{% 


(本 


和 
同样 的 方法 也 可 以 用 于 页 面 中 添加 了 contenteditaple 属性 的 元 素 , 只 























ij 的 例子 所 示 : 
bold", false, null); 
italic", false, null); 
createlink", false, 
"http://www.wrox.com"); 
formatblock", false, "<hl>");} 






































过 document .execCommand () 


不 过 要 使 用 当前 窗口 而 不 


bold", false, null); 
italie", false,; nuLl)s 
createlink", false, "http://www.wrox.com"); 
formatblock", false, "<hil>"); 
， 即 使 命令 是 所 有 浏览 器 都 支持 的 ， 命 令 生成 的 HTML 通常 差别 也 很 大 。 例 如 ， 为 选中 文本 
， 在 Safari 和 Chrome 中 会 使 用 <b> 标 签 ， 而 在 


bolgd 命令 在 下 和 Opera he 
Firefox 中 会 使 用 <span> 标 签 。 在 富 文本 编辑 中 


innerHTML 完成 的 。 





转换 都 是 通过 























能 依赖 济 览 器 生成 的 HIML ， 因 为 命令 今 实现 和 格式 
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还 有 与 命令 相关 的 其 他 一 些 方法 。 第 一 个 方法 是 suerycommandqEnabled(), 此 方法 用 于 确定 对 当 
前 选中 文本 或 光标 所 在 位 置 是 否 可 以 执行 相关 命令 。 它 只 接收 一 个 参数 ， 即 要 检查 的 命令 名 。 如 果 可 编 
辑 区 可 以 执行 该 命令 就 返回 true， 否 则 返回 false。 来 看 下 面 的 例子 : 

let result = frames["richedit"] .document .gqueryCommandEnabled ("bold"); 

以 上 代码 在 当前 选区 可 以 执行 "bola" 命 令 时 返回 true。 不 过 要 注意 ,queryCommandEnabled () 
返回 true 并 不 代表 允许 执行 相关 命令 ， 只 代表 当前 选区 适合 执行 相关 命令 。 在 Firefox 中 ， 
queryCommandEnablegd ("cut") 邯 使 默认 不 允许 前 切 也 会 返回 true。 

男 一 个 方法 queryCommandstate () 用 于 确定 相关 命令 是 否 应 用 到 了 当前 文本 选区 。 例如 , 要 确定 
当前 选区 的 文本 是 否 为 粗 体 ， 可 以 这 样 : 

let isBold = frames["richedit"] .document .gqueryCommandState("bold"); 

如 果 之 前 给 文本 选区 应 用 过 "bolq" 命 令 ， 则 以 上 代码 返回 true。 全 功能 富 文本 编辑 器 可 以 利用 这 
个 方法 更 新 粗 体 、 和 斜体 等 按钮。 

最 后 一 个 方法 是 querycommanavalue () ， 此 方法 可 以 返回 执行 命令 时 使 用 的 值 ( 即 前 面 示例 的 
execCommand() 中 的 第 三 个 参数 )。 如 果 对 一 段 选中 文本 应 用 了 值 为 7 的 "fontsize" 命 令 ， 则 如 下 代 
码 会 返回 7: 

let fontSize = frames["richedqit"] .dqocument .queryCommandValue ("fontsize"); 


这 个 方法 可 用 于 确定 如 何 将 命令 应 用 于 文本 选区 ， 从 而 进一步 决定 是 否 需 要 执行 下 一 个 命令 。 
19.5.3” 富 文件 选择 


在 内 舰 窗 格 中 使 用 getselection() 方 法 ， 可 以 获得 富 文本 编辑 器 的 选区 。 这 个 方法 暴露 在 
document 和 window 对 象 上 , 返回 表示 当前 选中 文本 的 Selection 对 象 。 每 个 selection 对 象 都 拥 
有 以 下 属性 。 
口 anchorNode: 选区 开始 的 节点 。 

口 anchoroffset: 在 anchorNode 中 ， 从 开头 到 选区 开始 跳 过 的 字符 数 。 
口 focusNode: 选区 结束 的 节点 。 

口 focusoffset: focusNode 中 包含 在 选区 内 的 字符 数 。 

D iscollapsed: 布尔 值 ， 表 示 选 区 起 点 和 终点 是 否 在 同一 个 地 方 。 

口 rangeCount: 选区 中 包含 的 DOM 范围 数量 。 

Selection 的 属性 并 没有 包含 很 多 有 用 的 信息 。 好 在 它 的 以 下 方法 提供 了 更 多 信息 ， 并 允许 操作 

选区 。 

口 addRange (range) : 把 给 定 的 DOM 范围 添加 到 选区 。 

口 collapse (node，offset): 将 选区 折 钱 到 给 定 节 点 中 给 定 的 文本 偏 移 处 。 
口 collapseToEnd(): 将 选区 折 县 到 终点 。 

口 collapseToStart () : 将 选区 折 对 到 起 点 。 

口 containsNode (node) : 确定 给 定 节 点 是 否 包含 在 选区 中 。 
口 deleteFromDocument () : 从 文档 中 删除 选区 文本 。 与 执行 execCcommand ("delete", false, 
nul1l) 命令 结果 相同 。 


口 extend (node，offset): 通过 将 focusNode 和 focusoffset 移动 到 指定 值 来 扩展 选区 。 
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口 getRangeAt (index) : 返回 选区 中 指定 索引 处 的 DOM 范 目 
口 removeAllRanges () : 从 选区 中 移 除 所 有 DOM 范围 。 这 实际 上 会 移 除 选 区 ， 因 为 选区 中 至 少 
要 包含 一 个 范围 。 
口 removeRange (range) : 从 选区 中 移 除 指定 的 DOM 范围 。 
口 selectAllChilgdren (node) : 清除 选区 并 选择 给 定 节点 的 所 有 子 节 点 
口 toStzing ( 返回 选区 中 的 文本 内 容 。 

Selection 昌 大 ， 充 分 利用 了 DOM 范围 来 管理 选区 。 操 纵 DOM 范围 可 以 实 
现 比 execcommand () 更 细 粒 度 的 控制 ， 因 为 可 以 直接 对 选中 文本 的 DOM 内 容 进行 操作 。 来 看 下 面 的 
例子 : 


let selection = frames["richedit"] .getSelection(); 
















































































// 取得 选中 的 文本 
let selectedText = selection.toString(); 





// 取得 表示 选区 的 范围 


let range = selection.getRangeAt (0); 





// 高 亮 选中 的 文本 

let span = frames["richedit"]l.dqocument .createElement ("span"); 
span.style.backgroundColor = "yellow"; 
range.surroundContents (span); 


以 上 代码 会 在 富 文本 编辑 器 中 给 选中 文本 添加 黄色 高 亮 背景 。 实 现 方式 是 在 默认 选区 使 用 DOM 范 
于 ,用 surroundcontents () 方 法 给 选中 文本 添加 背景 为 黄色 的 <span> 标 签 。 

getSelection() 方 法 在 HTML5 中 进行 了 标准 化 , IE9 以 及 Firefox、Safari、Chrome 和 Opera 的 所 
有 现代 版 本 中 都 实现 了 这 个 方法 。 

IE8 及 更 早 版 本 不 支持 DOM 范围 , 不 过 它们 允许 通过 专 有 的 selection 对 象 操作 选中 的 文本 。 如 
本 章 前 面 所 讨论 的 ， 这 个 selection 对 象 是 document 的 属性 。 要 取得 富 文本 编辑 器 中 选中 的 文本 ， 
必须 先 创 建 一 个 文本 范围 ， 然 后 再 访问 其 text 属性 : 


let range = frames["richedit"] .document.selection.createRange(); 
let selectedText = range.text; 


使 用 正文 本 范围 执行 HTML 操作 不 像 使 用 DOM 范围 那么 可 靠 , 不 过 也 是 可 以 做 到 的 。 要 实现 与 
使 用 DOM 范围 一 样 的 高 亮 效 果 ， 可 以 组 合 使 用 htmlText 属性 和 pasteHTML () 方 法 : 


let range = frames["richedit"] .document.selection.createRange(); 
range.pasteHTML ( 
'<span style="background-color:yellow">s${range.htmlText}</span>'); 


以 上 代码 使 用 ntmlText 取得 了 当前 选区 的 HIML ， 然 后 用 一 个 <span> 标 签 将 其 包围 起 来 并 通过 
pasteHTML () 再 把 它 插 入 选区 中 。 


19.5.4 ”通过 表单 提交 语文 本 


因为 富 文本 编辑 是 在 内 骨 窗 格 中 或 通过 为 元 素 指 定 contenteditable 属性 实现 的 , 而 不 是 在 表单 
控件 中 实现 , 所 以 富 文本 编辑 器 技术 上 与 表单 没有 关系 。 这 意味 着 要 把 寅 文本 编辑 的 结果 提交 给 服务 器 ， 
必须 手工 提取 HTML 并 自己 提交 。 通 和 常 的 解决 方案 是 在 表单 中 添加 一 个 隐藏 字段 ， 使 用 内 航 窗 格 或 
contenteditable 元 素 的 HTML 更 新 它 的 值 。 在 表单 提交 之 前 , 从 内 髓 窗 格 或 contenteditable 元 
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素 中 提取 出 HTML 并 插入 隐藏 字 段 中 。 例 如 ， 以 下 代码 在 使 用 内 髓 窗 格 实现 富 文 本 编辑 时 ， 可 以 用 在 
表单 的 onsubmit 事件 处 理 程序 中 : 


form.addEventListener("submit", (event) => { 
let target = event.target; 












































target.elements["comments"] .value = 
frames["richedit"] .document .body.innerHTML; 


过 

这 里 , 代码 使 用 文档 主体 的 innerHTML 属性 取得 了 内 衣 窗 格 的 HIML, 然后 将 其 插入 名 为 "comments" 
的 表单 字段 中 。 这 样 做 可 以 确保 在 提交 表单 之 前 给 表单 字段 赋值 。 如果 使 用 submit () 方 法 手工 提交 表单 ， 
那么 要 注意 在 提交 前 先 执行 上 述 操作 。 对 于 contenteditable 元 素 ， 执 行 这 一 操作 的 代码 是 类 似 的 : 


form.addEventListener("submit", (event) => { 
let target = event.target; 





















































target .elements["comments"] .value = 
document .getElementById("richedit").innerHTML,; 
| 


19.6 ”小结 


尽管 HTML 和 Web 应 用 自 诞生 以 来 已 经 发 生 了 天 翻 地 覆 的 变化 ， 但 Web 表单 几乎 从 来 没有 变 过 。 
JavaScript 可 以 增加 现 有 的 表单 字段 以 提供 新 功能 或 增强 易 用 性 。 为 此 ， 表 单字 段 也 暴露 了 属性 、 方 法 
和 事件 供 JavaScript 使 用 。 以 下 是 本 章 介绍 的 一 些 概 念 。 
口 可 以 使 用 标准 或 非 标准 的 方法 全 部 或 部 分 选择 文本 框 中 的 文本 。 
口 所 有 浏览 器 都 采用 了 Firefox 操作 文本 选区 的 方式 ， 使 其 成 为 真正 的 标准 。 
口 可 以 通过 监听 键盘 事件 并 检测 要 插入 的 字符 来 控制 文本 框 接受 或 不 接受 某 些 字符 。 

所 有 浏览 器 都 支持 剪贴 板 相 关 的 事件 ， 包 括 copy、cut 和 paste。 剪 贴 板 事件 在 不 同 浏览 
实现 有 很 大 差异 。 

在 文本 框 只 限 某 些 字符 时 ， 可 以 利用 剪贴 板 事件 屏幕 粘贴 事件 。 

选择 框 也 是 经 常 使 用 JavaScript 来 控制 的 一 种 表单 控件 。 借 助 DOM ,操作 选择 框 比 以 前 方便 了 很 多 。 
使 用 标准 的 DOM 技术 ， 可 以 为 选择 框 添加 或 移 除 选项 ， 也 可 以 将 选项 从 一 个 选择 框 移动 到 另 一 个 选择 
框 ， 或 者 重 排 选项 。 

富 文本 编辑 通常 以 使 用 包含 空白 HTML 文档 的 内 巷 窗 格 来 处 理 。 通 过 将 文档 的 designMoge 属性 设 
置 为 "on"， 可 以 让 整个 页 面 变 成 编辑 区 ， 就 像 文 字 处 理 软件 一 样 。 另 外 ， 给 元 素 添 加 contenteditable 
盟 性 也 可 以 将 元 素 转 换 为 可 编辑 区 。 默 认 情 况 下 ， 可 以 切换 文本 的 粗 体 、 斜 体 样 式 ， 也 可 以 使 用 剪贴 板 功 
能 。JavaScript 通过 execCcommana () 方 法 可 以 执行 一 些 富 文本 编辑 功能 , 通过 auerycommanqEnapbleq() 、 
queryCommandState() 和 cqueryCcommangvalue () 方 法 则 可 以 获取 有 关 文 本 选区 的 信息 。 由 于 富 文本 编 
辑 区 不 涉及 表单 字段 , 因此 要 将 富 文本 内 容 提交 到 服务 器 , 必须 把 HIML 从 iframe 或 contenteditable 
元 素 中 复制 到 一 个 表单 字段 。 
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0 
JavaScript API 


本 章 内 容 

口 Atomics 与 SharedArrayBuffer 
口 跨 上 下 文 消 息 
口 Encoding API 

口 File API 与 Blob API 
口 拖 放 

口 Notifications API 

口 Page Visibility API 

DQ Streams API 

口 计时 API 

口 Web 组 件 

口 Web Cryptography API 











随 着 Web 浏览 器 能 力 的 增加 ， 其 复杂 性 也 在 迅速 增加 。 从 很 多 方面 看 ， 现 代 Web 浏览 器 已 经 成 为 
构建 于 诸多 规范 之 上 、 集 不 同 API 于 一 身 的 “瑞士 军刀 ”。 浏 览 器 规范 的 生态 在 某 种 程度 上 是 混乱 而 无 
序 的 。 一 些 规范 如 HTML5， 定 义 了 一 批 增强 已 有 标准 的 API 和 浏览 器 特性 。 而 另 一 些 规范 如 Web 
Cryptography API 和 Notifications API， 只 为 一 个 特性 定义 了 一 个 API。 不同 浏览 如 实现 这 些 新 API 的 情 
况 也 不 同 ， 有 的 会 实现 其 中 一 部 分 ， 有 的 则 干脆 尚未 实现 。 

最 终 ， 是否 使 用 这 些 比 较 新 的 API 还 要 看 项 目 是 支持 更 多 浏览 器 ,还 是 要 采用 更 多 现代 特性 。 有 些 
API 可 以 通过 腻子 脚本 来 模拟 ， 但 腻子 脚本 通常 会 带 来 性 能 问题 ， 此 外 也 会 增加 网 站 JavaScript 代码 的 
体积 。 


























注意 Web API 的 数量 之 多 令 人 难以 置信 (参见 MDN 文档 的 Web APIs 词 条 )。 本 章 要 介 
绍 的 API 仅 限于 与 大 多 数 开 发 者 有 关 、 已 经 得 到 多 个 浏览 器 支持 ， 且 本 书 其 他 章节 没有 涵 


盖 的 部 分 。 





20.1 Atomics 与 sharedArrayBuffer 


多 个 上 下 文 访问 sharedArrayBuffer 时 ， 如 果 同 时 对 缓冲 区 执行 操作 ， 就 可 能 出 现 资 源 争 用 问 
题 。Atomics API 通过 强制 同一 时 刻 只 能 对 缓冲 区 执行 一 个 操作 ， 可 以 让 多 个 上 下 文安 全 地 读 写 一 个 
SharedArrayBuffer。Atomics API 是 ES2017 中 定义 的 。 

仔细 研究 会 发 现 Atomics API 非常 像 一 个 简化 版 的 指令 集 架 构 (ISA )， 这 并 非 意外 。 原 子 操作 的 本 
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质 会 排斥 操作 系统 或 计算 机 硬件 通常 会 自动 执行 的 优化 〈 比 如 指令 重新 排序 )。 原 子 操作 也 让 并 发 访问 
内 存 变 得 不 可 能 ， 如 果 应 用 不 当 就 可 能 导致 程序 执行 变 慢 。 为 此 ，Atomics API 的 设计 初衷 是 在 最 少 但 
很 稳定 的 原子 行为 基础 之 上 ， 构 建 复杂 的 多 线程 JavaScript 程序 。 




















20.1.1 sharedArrayBuffer 














SharedArrayBuffer 与 ArrayBuffer 具有 同样 的 API。 二 者 的 主要 区 别 是 ArrayBuffer 必须 
在 不 同 执行 上 下 文 间 切 换 ，sharedArrayBuffer 则 可 以 被 任意 多 个 执行 上 下 文 同时 使 用 。 

在 多 个 执行 上 下 文 间 共 享 内 存 意味 着 并 发 线程 操作 成 为 了 可 能 。 传 统 JavaScript 操作 对 于 并 发 内 存 
访问 导致 的 资源 争 用 没有 提供 保护 。 下 面 的 例子 演示 了 4 个 专用 工作 线程 访问 同一 个 
sharedArrayBuffer 导致 的 资源 争 用 问题 : 


const workerScript = . 
self.onmessage = ({data}) => { 
const view = new Uint32Array (data); 
























































// 执行 1000 000 次 加 操作 

for (let i = 0; i < 1E6; ++i) { 
// 线程 不 安全 加 操作 会 导致 资源 争 用 
view[0] += 1; 


. 


self.postMessage (null); 
多 


const workerScriptBlobUrl1l = URL.createObjectURL (new Blobl( [workerScript])); 


// 创建 容量 为 4 的 工作 线程 池 
const workers = []; 
for (let i = 0; i < 4; ++i) { 
workers.push (new Worker (workerScriptBlobUr1)); 


} 
// 在 最 后 一 个 工作 线程 完成 后 打印 出 最 终 值 


let responseCount = 0; 
for (const worker of workers) { 
worker.onmessage = () => { 
if (++responseCount == workers.length) { 
console.log( “Final buffer value: S${view[0]} ); 
} 
二 
} 


// 初始 化 SharedArrayBuffer 

const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 
view[0] = 1; 


// 把 SharedArrayBuffer 发 送 到 每 个 工作 线程 
for (const worker of workers) { 
worker.postMessage (sharedArrayBuffer); 


} 


// (期 待 结果 为 4000001。 实 际 输出 可 能 类 似 这 样 :) 
// Final buffer value: 2145106 
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为 解决 这 个 问题 ，Atomics API 应 运 而 生 。Atomics API 可 以 保证 sharedArrayBuffer 上 的 
JavaScript 操作 是 线程 安全 的 。 


注意 sharegdArrayBuffer API 等 同 于 ArrayBuffer API， 后 者 在 第 6 章 介绍 过 。 关 于 


如 何在 多 个 上 下 文中 使 用 sharedArrayBuffer， 可 以 参考 第 27 章 。 





20.1.2 ”原子 操作 基础 


任何 全 局 上 下 文中 都 有 Atomics 对 象 , 这 个 对 象 上 暴露 了 用 于 执行 线程 安全 操作 的 一 套 静 态 方法 ， 
其 中 多 数 方法 以 一 个 Typeqarray 实例 (一 个 sharedaArrayBuffez 的 引用 ) 作为 第 一 个 参数 ， 以 相 
关 操 作 数 作为 后 续 参 数 。 

1. 算术 及 位 操作 方法 

Atomics API 提供 了 一 套 简单 的 方法 用 以 执行 就 地 修改 操作 。 在 ECMA 规范 中 ， 这 些 方 法 被 定义 为 
AtomicReadModifyWrite 操作 。 在 底层 ， 这 些 方法 都 会 从 sharedArrayBuffer 中 某 个 位 置 读 取 值 ， 
然后 执行 算术 或 位 操作 ,最 后 再 把 计算 结果 写 回 相 同 的 位 置 。 这 些 操 作 的 原子 本 质 意味 着 上 述 读 取 、 修 
改 、 写 回 操作 会 按照 顺序 执行 ， 不 会 被 其 他 线程 中 断 。 

以 下 代码 演示 了 所 有 算术 方法 : 


// 创建 大 小 为 1 的 缓冲 区 
let sharedArrayBuffer = new SharedArrayBuffer(1); 

























































































// 基于 缓冲 创建 Uint8Array 
let typedArray = new Uint8Array (sharedArrayBuffer); 


// 所 有 ArrayBuffer 全 部 初始 化 为 0 
console.log(typedArray); // Uint8Array[0] 


index = 0; 
increment = 5; 


Cons 
cons 





// 对 索引 0 处 的 值 执行 原子 加 5 


Atomics.add(typedArray, index, increment); 
console.log(typedArray); // Uint8Array[5] 


// 对 索引 0 处 的 值 执行 原子 减 5 


Atomics.sub(typedArray, index, increment); 


console.log(typedArray); // Uint8Array[0] 
以 下 代码 演示 了 所 有 位 方法 : 


// 创建 大 小 为 1 的 缓冲 区 
let sharedArrayBuffer = new SharedArrayBuffer(1); 





// 基于 缓冲 创建 Uint8Array 
let typedArray = new Uint8Array (sharedArrayBuffer); 


// 所 有 ArrayBuffer 全 部 初始 化 为 0 
console.log(typedArray); // Uint8Array[0] 
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const index = 0; 


// 对 索引 0 处 的 值 执行 原子 或 0b1111 
Atomics .or (typedArray， index, 0b1111); 


console.log(typedArray); // Uint8Array[15] 


// 对 索引 0 处 的 值 执行 原子 与 0b1111 
Atomics.and(typedArray, index, 0b1100); 


console.log(typedArray); // Uint8Array[12] 


// 对 索引 0 处 的 值 执行 原子 异 或 0b1111 
Atomics.xor(typedArray, index, 0b1111); 


console.log(typedArray); // Uint8Array[3] 


前 面 线程 不 安全 的 例子 可 以 改写 为 下 面 这 样 : 


const workerScript = 
self.onmessage = ({data}) => { 




















const view = new Uint32Array (data); 


// 执行 1000 000 次 加 操作 
for Tee He, 05 站 
// 线程 安全 的 加 操作 


Atomics.add(view, 0, 1); 


self.postMessage (null); 
人 


const workerScriptBlobUrl1l = URL.createObjectURL (new Blobl( [workerScript])); 


// 创建 容量 为 4 的 工作 线程 池 
const workers = []; 
for (let i = 0; i < 4; ++i) { 
workers.push (new Worker (workerScriptBlobUr1)); 


} 


// 在 最 后 一 个 工作 线程 完成 后 打印 出 最 终 值 
let responseCount = 0; 
for (const worker of workers) { 
worker.onmessage = () => { 
if (++responseCount == workers.length) { 
console.log( ‘Final buffer value: S${view[0]} ); 
} 
党 
} 


// 初始 化 SharedArrayBuffer 

const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 
view[0] = 1; 


// 把 SharedArrayBuffer 发 送 到 每 个 工作 线程 
for (const worker of workers) { 
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worker.postMessage (sharedArrayBuffer); 


// (期 待 结果 为 4000001) 
// Final buffer value: 4000001 


2. 原子 读 和 写 

浏览 需 的 JavaScript 编译 器 和 CPU 架构 本 身 都 有 权限 重 排 指令 以 提升 程序 执行 效率 。 正 常情 况 下 ， 
JavaScript 的 单线 程 环境 是 可 以 随时 进行 这 种 优化 的 。 但 多 线程 下 的 指令 重 排 可 能 导致 资源 争 用 ， 而 且 
极 难 排 错 。 

Atomics API 通过 两 种 主要 方式 解决 了 这 个 问题 。 

口 所 有 原子 指令 相互 之 间 的 顺序 永远 不 会 重 排 。 

口 使 用 原子 读 或 原子 写 保证 所 有 指令 ( 包括 原子 和 非 原 子 指令 ) 都 不 会 相对 原子 读 / 写 重新 排序 。 
这 意味 着 位 于 原子 读 / 写 之 前 的 所 有 指令 会 在 原子 读 / 写 发 生前 完成 , 而 位 于 原子 读 / 写 之 后 的 所 有 
指令 会 在 原子 读 / 写 完成 后 才 会 开始 。 

除了 读 写 缓冲 区 的 值 , Atomics .load() 和 Atomics.store() 还 可 以 构建 “代码 围栏 ”。JavaScript 
引擎 保证 非 原 子 指令 可 以 相对 于 load () 或 store() 本 地 重 排 , 但 这 个 重 排 不 会 侵犯 原子 读 / 写 的 边界 。 

以 下 代码 演示 了 这 种 行为 : 

const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 










































































// 执行 非 原子 写 


view[0] = 1; 


// 非 原 子 写 可 以 保证 在 这 个 读 操 作 之 前 完成 ， 因 此 这 里 一 定 会 读 到 1 
console.log(Atomics.load(view, 0)); // 1 


// 执行 原子 写 


Atomics.store(view, 0, 2); 





// 非 原 子 读 可 以 保证 在 原子 写 完 成 后 发 生 ， 因 此 这 里 一 定 会 读 到 2 








console.log(view[0]); // 2 
3. 原子 交换 
为 了 保证 连续 、 不 间断 的 先 读 后 写 ，Atomics API 提供 了 两 种 方法 : exchange() 和 





compareExchange ()。Atomics.exchange() 执 行 简单 的 交换 ， 以 保证 其 他 线程 不 会 中 断 值 的 交换 : 


const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 





// 在 索引 0 处 写 入 3 


Atomics.store(view, 0, 3); 


// 从 索引 0 处 读 取 值 ， 然 后 在 索引 0 处 写 入 4 


console.log(Atomics.exchange(view, 0, 4)); // 3 


// 从 索引 0 处 读 取 值 


console.log(Atomics.load(view, 0)); // 4 


在 多 线程 程序 中 , 一 个 线程 可 能 只 希望 在 上 次 读 取 某 个 值 之 后 没有 其 他 线程 修改 该 值 的 情况 下 才 对 


共享 缓冲 区 执行 写 操作 。 如 果 这 个 值 没 有 被 修改 ， 这 个 线程 就 可 以 安全 地 写 和 更 新 后 的 值 ; 如 果 这 个 值 
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被 修改 了 ,那么 执行 写 操作 将 会 破坏 其 他 线程 计算 的 值 。 对 于 这 种 任务 ， Atomics API 提供 了 compare- 
Exchange () 方 法 。 这 个 方法 只 | 与 预期 值 匹配 时 才 会 执行 写 操作 。 来 看 下 面 这 个 例子 : 


const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 


























// 在 索引 0 处 写 入 5 
Atomics.store(view, 0, 5); 

// 从 缓冲 区 读 取 值 

let initial = Atomics.load(view, 0); 


// 对 这 个 值 执行 非 原子 操作 


let result = initial ** 2,; 


只 在 缓冲 区 未 被 修改 的 情况 下 才 会 向 缓冲 区 写 入 新 值 


A compareExchange (view, 0, initial, result); 


// 检查 写 入 成 功 
console.log(Atomics.load(view, 0)); // 25 


如 果 值 不 匹配 ，compareExchange () 调用 则 什么 也 不 做 ; 


const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 





// 在 索引 0 处 写 入 5 
Atomics.store(view, 0, 5); 

// 从 缓冲 区 读 取 值 

let :initial = Atomics.load(view, 0); 


// 对 这 个 值 执行 非 原子 操作 


let result = initial ** 2，; 


只 在 缕 冲 区 未 被 修改 的 情况 下 才 会 向 缓冲 区 写 入 新 值 


J CompareExchange (view, 0, -1, result); 


// 检查 写 入 失败 

console.log(Atomics.load(view, 0)); // 5 

4. 原子 Futex 操作 与 加 锁 

如 果 没 有 某 种 锁 机 制 , 多 线程 程序 就 无 法 支持 复杂 需求 。 为 此 , Atomics API 提供 了 模仿 Linux Futex 
(快速 用 户 空 间 互 斥 量 ，fastuser-space mutex ) 这 些 方法 本 身 虽 然 非 常 简单 ,但 可 以 作为 更 复杂 
锁 机 制 的 基本 组 件 。 




















注意 ”所 有 原子 Futex 操作 只 能 用 于 Int32Array 视图 。 而且 ,也 只 能 用 在 工作 线程 内 部 。 








Atomics .wait() 和 Atomics.notify() 通 过 示例 很 容易 理解 .下 面 这 个 简单 的 例子 创建 了 4 个 工 
作 线 程 ， 用 于 对 长 度 为 1 的 Int32Array 进行 操作 。 这 些 工作 线程 会 依次 取得 锁 并 执行 自己 的 加 操作 : 


const workerScript = . 
self.onmessage = ({data}) => { 
const view = new Int32Array (data); 








console.log('Waiting to obtain lock'); 


// 遇 到 初始 值 则 停止 ，10 000 毫秒 超时 
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Atomics.wait(view, 0, 0, 1E5); 
console.log('Obtained lock'); 


// 在 索引 0 处 加 1 


Atomics.add(view, 0, 1); 
console.log('Releasing lock'); 


// 只 允许 1 个 工作 线程 继续 执行 


Atomics.notify(view, 0, 1); 


self.postMessage (null); 
} 


const workerScriptBlobUrl1l = URL.createObjectURL (new Blobl( [workerScript])); 


const workers = []; 
for (let i = 0; 1 < 4; ++I) { 
workers.push (new Worker (workerScriptBlobUrl1)); 


} 


// 在 最 后 一 个 工作 线程 完成 后 打印 出 最 终 值 
let responseCount = 0; 
for (const worker of workers) { 
worker.onmessage = () => { 
if (++responseCount == workers.length) { 
console.log( ‘Final buffer value: S${view[0]} ); 
} 
二 
} 


// 初始 化 SharedArrayBuffer 
const sharedArrayBuffer = new SharedArrayBuffer(8); 
const view = new Int32Array (sharedArrayBuffer); 


// 把 SharedArrayBuffer 发 送 到 每 个 工作 线程 
for (const worker of workers) { 
worker.postMessage (sharedArrayBuffer); 


} 





// 1000 毫秒 后 释放 第 一 个 锁 
setTimeout(() => Atomics.notify(view, 0, 1), 1000); 


// Waiting to obtain lock 
// Waiting to obtain lock 
// Waiting to obtain lock 
// Waiting to obtain lock 
// Obtained lock 

// Releasing lock 

// Obtained lock 

// Releasing lock 

// Obtained lock 

// Releasing lock 

// Obtained lock 

// Releasing lock 

// Final buffer value: 4 
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因为 是 使 用 0 来 初始 化 sharedArrayBuffer, 所 以 每 个 工作 线程 都 会 到 达 Atomics .wait () 并 停 
止 执行 。 在 停止 状态 下 ， 执 行 线程 存在 于 一 个 等 待 队列 中 ,在 经 过 指定 时 间或 在 相应 索引 上 调用 
Atomics .notify() 之 前 ， 一 直 保 持 暂 停 状 态 。1000 毫秒 之 后 ， 项 部 执行 上 下 文 会 调用 
Atomics .notify () 释 放 其 中 一 个 等 待 的 线程 。 这 个 线程 执行 完毕 后 会 再 次 调用 Atomics .notify() 
释放 另 一 个 线程 。 这 个 过 程 会 持续 到 所 有 线程 都 执行 完毕 并 通过 postMessage () 传 出 最 终 的 值 。 
Atomics API 还 提供 了 Atomics .isLockFree () 方 法 。 不 过 我 们 基本 上 应 该 不 会 用 到 。 这 个 方法 在 
高 性 能 算法 中 可 以 用 来 确定 是 否 有 必要 获取 锁 。 规 范 中 的 介绍 如 下 : 
Atomics.isLockFree() 是 一 个 优化 原 语 。 基 本 上 ， 如 果 一 个 原子 原 语 ( compareExchange、 
load、store、add、sub、and、or、xor 或 exchange ) 在 n 字 节 大 小 的 数据 上 的 原子 步 又 
在 不 调用 代理 在 组 成 数据 的 n 字 节 之 外 获得 锁 的 情况 下 可 以 执行 , 则 Atomics.isLockFree (n) 
会 返回 true。 高 性 能 算法 会 使 用 Atomics.isLockFree 确定 是 否 在 关键 部 分 使 用 锁 或 原子 
操作 。 如 果 原 子 原 语 需要 加 锁 ， 则 算法 提供 自己 的 锁 会 更 高 效 。 
Atomics.isLockFree (4) 始终 返回 true， 因 为 在 所 有 已 知 的 相关 硬件 上 都 是 支持 的 。 
能 够 如 此 假设 通常 可 以 简化 程序 。 


20.2” 跨 上 下 文 消 息 


跨 文档 消息 ， 有 时候 也 简称 为 XDM ( cross-document messaging )， 是 一 种 在 不 同 执行 上 下 文 ( 如 不 
同 工 作 线程 或 不 同 源 的 页 面 ) 间 传 递 信息 的 能 力 。 例 如 ，www.wrox.com 上 的 页 面 想 要 与 包含 在 内 髓 窗 
格 中 的 p2p.wrox.com 上 面 的 页 面 通信 。 在 XDM 之 前 , 要 以 安全 方式 实现 这 种 通信 需要 很 多 工作 。 XDM 
以 安全 易 用 的 方式 规范 化 了 这 个 功能 。 








































































































注意 路上 下 文 消息 用 于 窗口 之 间 通 信 或 工作 线程 之 间 通 信 。 本 节 主 要 介绍 使 用 


postMessage() 与 其 他 窗口 通信 。 关 于 工作 线程 之 间 通 信 、MessageChannel 和 
BroadcastChannel， 可 以 参考 第 27 章 。 























XDM 的 核心 是 postMessage () 方 法 。 除 了 XDM， 这 个 方法 名 还 在 HTMLS5 中 很 多 地 方 用 到 过 ， 
但 目的 都 一 样 ， 都 是 把 数据 传送 到 另 一 个 位 置 。 

postMessage () 方 法 接收 3 个 参数 :消息 、 表 示 目 标 接收 源 的 字符 串 和 可 选 的 可 传输 对 象 的 数组 ( 只 
与 工作 线程 相关 )。 第 二 个 参数 对 于 安全 非常 重要 ， 其 可 以 限制 浏览 器 交付 数据 的 目标 。 下 面 来 看 一 个 
例子 : 


let iframeWindow = document .getElementById("myframe") .contentWindow; 
iframeWindow.postMessage("A secret", "http://www.wrox.com"); 


最 后 一 行 代码 尝试 向 内 骸 窗 格 中 发 送 一 条 消息 ， 而 且 指 定 了 源 必须 是 "http://www.wrox.com"。 
如 果 源 匹配 ， 那 么 消息 将 会 交付 到 内 髓 窗 格 ; 否则 ，postMessage() 什 么 也 不 做 。 这 个 限制 可 以 保护 
信息 不 会 因 地 址 改变 而 泄露 。 如 果 不 想 限 制 接收 目标 ， 则 可 以 给 postMessage () 的 第 二 个 参数 传 "*"， 
但 不 推荐 这 么 做 。 

接收 到 XDM 消息 后 ，window 对 象 上 会 触发 message 事件 。 这 个 事件 是 异步 触发 的 ， 因此 从 消息 
发 出 到 接收 到 消息 ( 接收 窗口 触发 message 事件 ) 可 能 有 延迟 , 传 给 onmessage 事件 处 理 程序 的 event 
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对 象 包含 以 下 3 方面 重要 信息 。 

口 aata: 作为 第 一 个 参数 传递 给 postMessage () 的 字符 串 数据 。 

口 origin: 发 送 消息 的 文档 源 ， 例 如 "http://www.wrox.com"。 

口 source: 发 送 消息 的 文档 中 wingdow 对 象 的 代理 。 这 个 代理 对 象 主要 用 于 在 发 送 上 一 条 消息 的 
窗口 中 执行 bostMessage () 方 法 。 如 果 发 送 窗 口 有 相同 的 源 ， 那 么 这 个 对 象 应 该 就 是 window 
对 象 。 

接收 消息 之 后 验证 发 送 窗 口 的 源 是 非常 重要 的 。 与 bostMessage () 的 第 二 个 参数 可 以 保证 数据 不 

会 意外 传 给 未 知 页 面 一 样 ， 在 onmessage 事件 处 理 程序 中 检查 发 送 窗 口 的 源 可 以 保证 数据 来 自 正确 的 

地 方 。 基 本 的 使 用 方式 如 下 所 示 : 




































































window.addEventListener("message", (event) => { 
// 确保 来 自 预 期 发 送 者 
if (event .origin == "http://www.wrox.com") { 


// 对 数据 进行 一 些 处 理 
processMessage (event .data); 
// 可 选 : 向 来 源 窗口 发 送 一 条 消息 
event.source.postMessage ("Received!", "http://p2p.wrox.com"); 
}) | 
大 多 数 情况 下 ，event .source 是 某 个 window 对 象 的 代理 ， 而 非 实际 的 window 对 象 。 因 此 不 能 
通过 它 访问 所 有 窗口 下 的 信息 。 最 好 只 使 用 postMessage () ， 这 个 方法 永远 存在 而 且 可 以 调用 。 
XDM 有 一 些 怪异 之 处 。 首先 , postMessage() 的 第 一 个 参数 的 最 初 实现 始终 是 一 个 字符 串 。 后 来 ， 
第 一 个 参数 改 为 允许 任何 结构 的 数据 传人 , 不 过 并 非 所 有 浏览 器 都 实现 了 这 个 改变 。 为 此 ， 最 好 就 是 只 
通过 postMessage() 发 送 字 符 串 。 如 果 需 要 传递 结构 化 数据 ,那么 最 好 先 对 该 数据 调用 
JSON.stringify()， 通 过 postMessage () 传 过 去 之 后 ， 再 在 onmessage 事件 处 理 程 序 中 调用 
JSON.parse()o 
在 通过 内 由 窗 格 加 载 不 同 域 时 ,使 用 XDM 是 非常 方便 的 。 这 种 方法 在 混搭 (mashup ) 和 社交 应 用 
中 非常 常用 。 通 过 使 用 XDM 与 内 艇 窗 格 中 的 网 页 通信 ， 可 以 保证 包含 页 面 的 安全 。XDM 也 可 以 用 于 
同 源 页 面 之 间 通 信 。 


20.3 Encoding API 
Encoding API 主要 用 于 实现 字符 串 与 定型 数组 之 间 的 转换 。 规 范 新 增 了 4 个 用 于 执行 转换 的 全 局 类 : 


TextEncoder、 TextEncoderStream、TextDecoder 和 TextDecoderStream。 






































































































































注意 ” 相 比 于 批量 (bulk ) 的 编 解 码 ， 对 流 (stream ) 编 解 码 的 支持 很 有 限 。 





20.3.1 文本 编码 


Encoding API 提供 了 两 种 将 字符 串 转换 为 定型 数组 二 进 制 格式 的 方法 : 批量 编码 和 流 编码 。 把 字符 
串 转换 为 定型 数组 时 ， 编 码 器 始终 使 用 UTF-8。 
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1. 批量 编码 

所 谓 批量 ， 指 的 是 JavaScript 引擎 会 同步 编码 整个 字符 串 。 对 于 非常 长 的 字符 串 ， 可 能 会 花 较 长 时 
间 。 批 量 编码 是 通过 TextEncoder 的 实例 完成 的 : 

const textEncoder = new TextEncoder(); 

这 个 实例 上 有 一 个 encode () 方 法 ,该 方法 接收 一 个 字符 串 参 数 , 并 以 Uint8Array 格式 返回 每 
字符 的 UTF-8 编码 : 


const textEncoder = new TextEncoder(); 
const decodedText = 'foo'; 
const encodedText = textEncoder.encode (decodedText ) ; 






























































// ££ 的 UTF-8 编码 是 0x66 ( 即 十 进 制 102) 
// oo 的 UTF-8 编码 是 0x6F ( 即 二 进 制 111) 
console.log(encodedText); // Uint8Array (3) [102, 111, 111] 


编码 器 是 用 于 处 理 字符 的 ， 有 些 字符 〈 如 表情 符号 ) 在 最 终 返回 的 数组 中 可 能 会 占 多 个 索引 : 


const textEncoder = new TextEncoder(); 
const decodedText OO 
const encodedText textEncoder.encode (decodedText ); 














// 的 UTF-8 编码 是 0xF0 0x9F 0x98 0x8A ( 即 十 进 制 240、159、152、138) 
console.log(encodedText); // Uint8Array (4) [240, 159, 152, 138] 


nt encodeInto() 方 法 , 该 方法 接收 一 个 字符 串 和 目标 Unit8Array, 返回 一 个 
字典 ,该 字典 包含 read 和 written 属性 ， 分 别 表示 成 功 从 源 字 符 串 读 取 了 多 少 字符 和 向 目标 数组 写 
人 了 多 少 字 符 。 如 果 定 型 数组 的 空间 不 够 ， 编 码 就 会 提前 终止 ， 返 回 的 字典 会 体现 这 个 结果 : 


const textEncoder = new TextEncoder(); 

const fooArr = new Uint8Array (3); 

const barArr = new Uint8Array (2); 

const fooResult = textEncoder.encodeInto('foo', fooArr); 
const barResult = textEncoder.encodeInto('bar', barArr); 


















































console.1log (fooArr);} // Uint8Array (3) [102, 111, 111] 
console.log(fooResult); // { read: 3, written: 3 } 


console.1log (barArr); // Uint8Array (2) [98, 97] 
console.log(barResult); // { read: 2, written: 2 } 


encode () 要 求 分 配 一 个 新 的 Unit8array，encodeInto() 则 不 需要 。 对 于 追求 性 能 的 应 用 , 这 个 
差别 可 能 会 带 来 显著 不 同 。 

















注意 文本 编码 会 始终 使 用 UTF-8 格式 ， 而 且 必 须 写 入 Unit8Array 实例 。 使 用 其 他 类 





型 数组 会 导致 encodeInto() 抛 出 错误 。 





2. 流 编码 
TextEncoderStream 其 实 就 是 TransformStream 形式 的 TextEncoder。 将 解码 后 的 文本 流通 
过 管道 输入 流 编 码 需 会 得 到 编码 后 文本 块 的 流 : 


async function* chars() { 
Const decodedText = 'foo'; 
for (let char of decodedText) { 
yield await new Promise((resolve) => setTimeout (resolve, 1000, char)); 
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} 
} 


const decodedTextStream = new Readablestream({ 
async start (controller) { 
for await (let chunk of chars()) { 
controller.enqueue (chunk) ; 


} 


controller.close(); 
} 
}); 


const encodedTextStream = decodedTextStream.pipeThrough (new TextEncoderStream()); 
const readableStreamDefaultReader = encodedTextStream.getReader(); 


(async function() { 
while(true) { 
const { done, value } = await readableStreamDefaultReader.read(); 


if (done) { 
break; 

} else { 
console.log(value); 





}) 0); 


// Uint8Array[102] 
// Uint8Array[111] 
// Uint8Array[111] 


20.3.2 ”文本 解码 


Encoding API 提供 了 两 种 将 定型 数组 转换 为 字符 串 的 方式 ， 批量 解码 和 流 解码 。 与 编码 融 类 不 同 ， 
在 将 定型 数组 转换 为 字符 串 时 ， 解 码 器 支持 非常 多 的 字符 串 编码 ， 可 以 参考 Encoding Standard 规范 的 
“Names and labels” 一 节 。 
默认 字符 编码 格式 是 UTF-8。 

1. 批量 解码 

所 谓 批量 ， 指 的 是 JavaScript 引擎 会 同步 解码 整个 字符 串 。 对 于 非常 长 的 字符 串 ， 可 
间 。 批 量 解码 是 通过 TextDecoder 的 实例 完成 的 : 


const textDecoder = new TextDecoder(); 


这 个 实例 上 有 一 个 aecode () 方 法 ， 该 方法 接收 一 个 定型 数组 参数 ， 返 回 解码 后 的 字符 串 : 


const textDecoder = new TextDecoder(); 

































































十 
峭 


会 伦 较 长 时 














// f£ 的 UTF-8 编码 是 0x66 ( 即 十 进 制 102 ) 
// 0 的 UTF-8 编码 是 0x6F ( 即 二 进 制 111) 
const encodedText = Uint8Array.of(102, 111, 111); 

const decodedText = textDecoder.decode (encodedText ) ; 








console.log(decodedText); // foo 
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解 但 需 不 关心 传人 的 是 哪 种 定型 数组 ， 它 只 会 专心 解码 整个 二 进 制 表示 。 在 下 面 这 个 例子 中 ， 只 包 


























含 8 位 字符 的 32 位 值 被 解码 为 UTF-8 格式 ， 解 码 得 到 的 字符 串 中 填充 了 空格 : 


而 非 


Const textDecoder = new TextDecoder(); 


// ££ 的 UTF-8 编码 是 0x66 ( 即 十 进 制 102) 

// 0 的 UTF-8 编码 是 0x6F ( 即 二 进 制 111) 

const encodedText = Uint32Array.of (102, 111, 111); 
const decodedText = textDecoder.decode (encodedText); 


console.log(decodedText); // "f O O " 


解码 器 是 用 于 处 理 定型 数组 中 分 散在 多 个 索引 上 的 字符 的 ， 包 括 表 情 符号 : 


const textDecoder = new TextDecoder(); 








// @ 的 UTEF-8 编码 是 0xXF0 0x9F 0x98 0x8A ( 即 十 进 制 240、159、152、138) 
const encodedText = Uint8Array.of(240, 159, 152, 138); 
const decodedText = textDecoder.decode (encodedText); 


console.log(decodedText); // © 
与 TextEncoder 不 同 ，TextDecoder 可 以 兼容 很 多 字符 编码 。 比 如 下 面 的 例子 就 使 用 了 UTF-16 
默认 的 UTF-8: 


const textDecoder = new TextDecoder('utf-16'); 












































// ££ 的 UTF-8 编码 是 0x0066 ( 即 十 进 制 102) 

// oO 的 UTF-8 编码 是 0x006F ( 即 二 进 制 111) 

const encodedText = Uintl6Array.of (102, 111, 111); 
const decodedText = textDecoder.decode (encodedText); 


console.log(decodedText); // foo 


2. 流 解码 
TextDecoderStream 其 实 就 是 TransformStream 形式 的 TextDecoder。 将 编码 后 的 文本 流通 








过 管道 输入 流 解码 絮 会 得 到 解码 后 文本 块 的 流 : 


async function* chars() { 
// 每 个 块 必须 是 一 个 定型 数组 
const encodedText = [102, 111, 111] .map((x) => Uint8Array.of (x)); 


for (let char of encodedText) { 
Yield await new Promise((resolve) => setTimeout (resolve, 1000, char)); 
} 
} 


const encodedTextStream = new ReadableSstream({ 
async start (controller) { 
for await (let chunk of chars()) { 
controller.enqueue (chunk) ; 


} 


controller.close(); 
} 
Ds 


const decodedTextStream = encodedTextStream.pipeThrough (new TextDecoderStream()); 
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符 。 


const readableStreamDefaultReader = 


(async function() { 
while(true) { 


decodedTextStream.getReader ();，; 


const { done, value } = await readableStreamDefaultReader.read(); 


if (done) { 
break; 

} else 1{ 
console.log(value); 


Cs 
// £ 


// o 
// o 


文本 解码 器 流 能 够 识别 可 能 分 散在 不 同 块 上 的 代理 对 。 解 码 需 流 会 保持 块 片段 直到 取得 完整 的 字 


比如 在 下 面 的 例子 中 ， 流 解码 器 在 解码 流 并 输出 字符 之 前 会 等 待 传人 4 个 块 : 


async function* chars() { 





// 的 UTF-8 编码 是 0xF0 0x9F 0x98 0x8A ( 即 十 进 制 240、159、152、138) 
const encodedText = [240, 159, 152, 138] .map((x) => Uint8Array.of (x)); 


for (let char of encodedText) { 


yield await new Promise((resolve) => setTimeout (resolve, 1000, char)); 


} 
} 


const encodedTextStream = new Readablestream({ 


async start (controller) { 
for await (let chunk of chars()) 
controller.enqueue (chunk) ， 
} 
controller.close(); 
} 
这 


{ 


const decodedTextStream = encodedTextStream.pipeThrough (new TextDecoderStream()); 


const readableSstreamDefaultReader = 


(async function() { 
while(true) { 


decodedTextStream.getReader (); 


const { done, value } = await readableStreamDefaultReader.read(); 


if (done) { 
break; 

} else { 
console.log(value); 


// © 


文本 解码 右 流 经 常 与 fetch ( ) 一 起 使 用 ， 





因为 响应 体 可 以 作为 ReadableStream 来 处 至 


Ha 





。 比 如 : 
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const response = await fetch(url); 
const stream = response.body.pipeThrough (new TextDecoderStream()); 
const decodedStream = stream.getReader () 


for await (let decodedChunk of decodedStream) { 


console.log(decodedChunk); 
} 


20.4 File API 与 Blob API 























Web 应 用 程序 的 一 个 主要 的 痛 点 是 无 法 操作 用 户 计算 机 上 的 文件 。 2000 年 之 前 , 处 理 文件 的 唯一 方 
式 是 把 <input type="file"> 放 到 一 个 表单 里 ， 仅 此 而 已 。File API 与 Blob API 是 为 了 让 Web 开发 者 
































能 以 安全 的 方式 访问 客户 端 机 器 上 的 文件 ， 从 而 更 好 地 与 这 些 文件 交互 而 设计 的 。 
20.4.1 File 类 型 








File API 仍然 以 表单 中 的 文件 输入 字段 为 基础 ， 但 是 增加 了 直接 访问 文件 信息 的 能 力 。HIML5 在 
DOM 上 为 文件 输入 元 素 添 加 了 files 集合 。 当 用 户 在 文件 字段 中 选择 一 个 或 多 个 文件 时 , 这 个 files 



































集合 中 会 包含 一 组 File 对 象 ， 表 示 被 选中 的 文件 。 每 个 File 对 象 都 有 一 些 只 读 属 性 。 

口 name: 本 地 系统 中 的 文件 名 。 

口 size: 以 字 节 计 的 文件 大 小 。 

D type: 包含 文件 MIME 类 型 的 字符 串 。 

口 lastModifiedqDate: 表示 文件 最 后 修改 时 间 的 字符 串 。 这 个 属性 只 有 Chome 实现 了 。 
例如 ， 通 过 监听 change 事件 然后 遍历 files 集合 可 以 取得 每 个 选中 文件 的 信息 : 


let filesList = qdqocument .getElementById("files-1ist")， 


























filesList.addEventListener("change", (event) => { 
let files = event.target.files, 
0 


len = files.length; 


while (i < len) { 
const f = files[il]; 
console.log(‘s$s{f.name} (${f.type}, S${f.size} bytes).); 
工 + 二 7 

} 














这 个 例子 简单 地 在 控制 台 输出 了 每 个 文件 的 信息 。 仅 就 这 个 能 力 而 言 ， 已 经 可 以 说 是 Web 应 用 向 


前 迈进 的 一 大 步 了 。 不 过 ，File API 还 提供 了 FileReader 类 型 ， 让 我 们 可 以 实际 从 文件 中 读 取 数据 。 


20.4.2 FileReader 类 型 




















FileReader 类 型 表示 一 种 异步 文件 读 取 机 制 , 可 以 把 FileReader 想象 成 类 似 于 XMLHEttpReduest， 


只 不 过 是 用 于 从 文件 系统 读 取 文件 ,而 不 是 从 服务 器 读 取 数 据 。FileReader 类 型 提供 了 儿 个 读 取 文件 








数据 的 方法 。 


























参数 表示 编码 ， 是 可 选 的 。 














口 readAsText (file, encoding): 从 文件 中 读 取 纯 文本 内 容 并 保存 在 result 属性 中 。 第 二 个 
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口 reagdAsDataURL (file): 读 取 文件 并 将 内 容 的 数据 URI 保存 在 result 属性 中 。 
口 reagdAsBinaryString (file): 读 取 文 件 并 将 每 个 字符 的 二 进 制 数据 保存 在 result 属性 中 。 
口 reagAsArrayBuffer (file) : 读 取 文件 并 将 文件 内 容 以 ArrayBuffer 形式 保存 在 result 属性 。 
这 些 读 取 数 据 的 方法 为 处 理 文件 数据 提供 了 极 大 的 灵活 性 。 例 如 ， 为 了 向 用 户 显 示 图 片 ， 可 以 将 图 
片 读 取 为 数据 URI， 而 为 了 解析 文件 内 容 ， 可 以 将 文件 读 取 为 文本 。 
因为 这 些 读 取 方法 是 异步 的 ， 所 以 每 个 FileReader 会 发 布 几 个 事件 ， 其 中 3 个 最 有 用 的 事件 是 
progress、error 和 load， 分 别 表 示 还 有 更 多 数据 、 发 生 了 错误 和 读 取 完成 。 
progress 事件 每 50 毫秒 就 会 触发 一 次 ， 其 与 XHR 的 progress 事件 具有 相同 的 信息 : 
lengthComputable、loaded 和 total。 此 外 ,在 progress 事件 中 可 以 读 取 FileReader 的 result 
属性 ， 即 使 其 中 尚未 包含 全 部 数据 。 
rror 事件 会 在 由 于 某 种 原因 无 法 读 取 文件 时 触发 。 触 发 error 事件 时 ，FileReader 的 error 
属性 会 包含 错误 信息 。 这 个 属性 是 一 个 对 象 ， 只 包含 一 个 属性 : code。 这 个 错误 码 的 值 可 能 是 1 (未 找 
到 文件 )、2 (安全 错误 )、3 〈 读 取 被 中 断 )、4 (文件 不 可 读 ) 或 5 (编码 错误 )。 
load 事件 会 在 文件 成 功 加 载 后 触发 。 如 果 error 事件 被 触发 ， 则 不 会 再 触发 10ag 事件 。 下 面 的 
例子 演示 了 所 有 这 3 个 事件 : 


let filesList = document .getElementById("files-list"); 
filesList.addEventListener("change", (event) => { 
Tot -Eo 

output = document .getElementById("output"), 
progress = document .getElementByIlId("progress"), 
files = event.target.files, 
type = "default", 
reader = new FileReader (); 
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if (/image/.test(files[0] .type)) { 
reader.readAsDataURL (files[0]); 


type = "image"; 
} else { 
reader.readAsText (files{[0]); 
type = "text"; 
} 
reader.onerror = function() { 
output.innerHTML = "Could not read file, error code is " + 


reader .error.code; 


}; 


reader.onprogress = function(event) { 
if (event.lengthComputable) { 
progress.innerHTML = ‘S${event.loaded}/s{event.total}.; 
} 
} 
reader.onload = function() { 
Tet itm SS 


switch(type) { 
case "image": 
html = ‘<img src="${reader.result}">.，} 
break; 
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Case "text": 
html = reader.result; 
break; 
} 
output.innerHTML = html; 
> 
bs 
以 上 代码 从 表单 字段 中 读 取 一 个 文件 , 并 将 其 内 容 显 示 在 了 网 页 上 。 如 果 文 件 的 MIME 类 型 表示 它 
是 一 个 图 片 , 那么 就 将 其 读 取 后 保存 为 数据 URI, 在 1o0ad 事件 触发 时 将 数据 URI 作为 图 片 插入 页 面 中 。 
如 果 文 件 不 是 图 片 ， 则 读 取 后 将 其 保存 为 文本 并 原样 输出 到 网 页 上 。progress 事件 用 于 跟踪 和 显示 读 
取 文 件 的 进度 ， 而 error 事件 用 于 监控 错误 。 
如 果 想 提前 结束 文件 读 取 ， 则 可 以 在 过 程 中 调用 abort () 方 法 ， 从 而 触发 abort 事件 。 在 10ad、 
error 和 abort 事件 触发 后 , 还 会 触发 1]oadend 事件 。loadeng 事件 表示 在 上 述 3 种 情况 下 , 所 有 读 
取 操 作 都 已 经 结束 。readAsText () 和 readAsDataURL() 方 法 已 经 得 到 了 所 有 主流 浏览 器 支持 。 











































































































20.4.3 FileReaderSync 类 型 























顾名思义 ，FileReaderSync 类 型 就 是 FileReader 的 同步 版 本 。 这 个 类 型 拥有 与 FileReader 
相同 的 方法 ,只 有 在 整个 文件 都 加 载 到 内 存 之 后 才 会 继续 执行 FileReadersync 只 在 工作 线程 中 可 用 ， 
为 如 果 读 取 整 个 文件 耗 时 太 长 则 会 影响 全 局 。 

假设 通过 postMessage() 向 工作 线程 发 送 了 一 个 File 对 象 。 以 下 代码 会 让 工作 线程 同步 将 文件 
读 取 到 内 存 中 ， 然 后 将 文件 的 数据 URL 发 回来 : 


// worker.js 








self.omessage = (messageEvent) => { 
const syncReader = new FileReaderSync(); 
console.log(syncReader); // FileReaderSync {} 


// 读 取 文件 时 阻塞 工作 线程 


const result = syncReader.readAsDataUrl (messageEvent .data); 


// PDF 文件 的 示例 响应 
console.log(result); // data:application/pdf;base64,JVBERi0xLjQK... 


// 把 URL 发 回去 
self.postMessage (result); 


过 


20.4.4 Blopb 与 部 分 读 取 


某 些 情况 下 ， 可 能 需要 读 取 部 分 文件 而 不 是 整个 文件 。 为 此 ，File 对 象 提供 了 一 个 名 为 slice () 
的 方法 。slice() 方 法 接收 两 个 参数 : 起 始 字 节 和 要 读 取 的 字 节 数 。 这 个 方法 返回 一 个 Blop 的 实例 ， 
而 Blob 实际 上 是 File 的 超 类 。 

blob 表示 二 进 制 大 对 象 (binary larget object )， 是 JavaScript 对 不 可 修改 二 进 制 数据 的 封装 类 型 。 包 
含 字符 串 的 数组 、ArrayBuffers、ArrayBufferViews， 甚 至 其 他 Blob 都 可 以 用 来 创建 blob。Blob 
构造 函数 可 以 接收 一 个 options 参数 ， 并 在 其 中 指定 MIME 类 型 ; 
































20.4 File API 与 Blob API 625 





console.log(new Blob(['foo'])); 
/A BLObB (Sizes 3 TYPes 


console.log(new Blob(['{"a": "b"}'], { type: 'application/json' })); 
// {size: 10, type: "application/json"} 


console.log(new Blob(['<p>Foo</p>', '<p>Bar</p>'], { type: 'text/html' })); 
// {size: 20, type: "text/html"} 


Blob 对 象 有 一 个 size 属性 和 一 个 type 属性 ， 还 有 一 个 slice () 方 法 用 于 进一步 切 分 数据 。 另 
外 也 可 以 使 用 FileReader 从 Blob 中 读 取 数 据 。 下 面 的 例子 只 会 读 取 文 件 的 前 32 字 闻 : 


let filesList = qocument .getBElementById("files-1ist") ; 
filesList.addEventListener("change", (event) => { 
let "Tnto. ew 
output = document .getElementById("output"), 
progress = document .getElementById("progress"), 
files = event.target.files, 
reader = new FileReader(), 
blob = blobslice(files[0], 0, 32); 
if (blob) { 
reader .readAsText (blob); 














reader.onerror = function() { 
output.innerHTML = "Could not read file, error code is " + 
reader .error.code; 
上 
reader.onload = function() { 
output . innerHTML = reader.result; 
二 过 
} else 1{ 
console.log("Your browser doesn't support slice()."); 


3 
只 读 取 部 分 文件 可 以 节省 时 间 ， 特 别 是 在 只 需要 数据 特定 部 分 比如 文件 头 的 时 候 。 











20.4.5 ”对象 URL 与 Blob 


对 象 URL 有 时 候 也 称 作 Blob URL, 是 指引 用 存储 在 File 或 Blop 中 数据 的 URL。 对象 URL 的 优 
点 是 不 用 把 文件 内 容 读 取 到 JavaScript 也 可 以 使 用 文件 。 只 要 在 适当 位 置 提供 对 象 URL 即 可 。 要 创建 对 
象 URL, 可 以 使 用 window.URL.createObjectURL() 方 法 并 传人 人 File 或 Blob 对 象 。 这 个 函数 返回 
的 值 是 一 个 指向 内 存 中 地 址 的 字符 串 。 因 为 这 个 字符 串 是 URL， 所 以 可 以 在 DOM 中 直接 使 用 。 例 如 ， 
以 下 代码 使 用 对 象 URL 在 页 面 中 显示 了 一 张 图 片 : 


let filesList = document .getElementById("files-list"); 
filesList.addEventListener("change", (event) => { 
Tet: TNEO. = » 
output = document .getElementById("output"), 
progress = document .getElementById("progress"), 
files = event.target.files, 
reader = new FileReader(), 
Url = window.URL.createObjectURL(files[0]); 
TE (ELEY 挝 
if (/image/.test(files[0] .type)) { 
output.innerHTML = ‘<img src="${url}">.，; 
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} else { 
output.innerHTML = "Not an image."; 
} 
} else { 
output.innerHTML = "Your browser doesn't support object URLs."; 


} 
Dy) 


如 果 把 对 象 URL 直接 放 到 <img> 标 签 ， 就 不 需要 把 数据 先 读 到 JavaScript 中 了 。<img> 标 签 可 以 直 
接 从 相应 的 内 存 位 置 把 数据 读 取 到 页 面 上 。 

使 用 完 数据 之 后 ， 最 好 能 释放 与 之 关联 的 内 存 。 只 要 对 象 URL 在 使 用 中 ， 就 不 能 释放 内 存 。 如 曙 
想 表明 不 再 使 用 某 个 对 象 URL， 则 可 以 把 它 传 给 window.URL.revokeObjectURL()。 页 面 印 载 时 ， 
所 有 对 象 URL 占用 的 内 存 都 会 被 释放 。 不 过 ， 最 好 在 不 使 用 时 就 立即 释放 内 存 ， 以 便 尽 可 能 保持 页 面 
占用 最 少 资源 。 


20.4.6 ” 读 取 拖 放 文件 


组 合 使 用 HTMLS5 拖 放 API 与 File API 可 以 创建 读 取 文件 信息 的 有 趣 功能 。 在 页 面 上 创建 放置 目标 
后 ,可 以 从 桌面 上 把 文件 拖 动 并 放 到 放置 目标 。 这 样 会 像 拖 放 图片 或 链接 一 样 触发 arop 事件 。 被 放置 
的 文件 可 以 通过 事件 的 event .dataTransfer.files 属性 读 到 ,这 个 属性 保存 着 一 组 File 对 象 ,就 
像 文本 输入 字段 一 样 。 

下 面 的 例子 会 把 拖 放 到 页 面 放置 目标 上 的 文件 信息 打印 出 来 : 


let droptarget = document .getElementById("droptarget"); 
function handleEvent (event) { 
let info = "" 
output = document .getElementById("output"), 
ffi]es,, TT Lenls 
event .preventDefault (); 
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if (event.type == "drop") { 
files = event.dataTransfer.files; 
.0s 


len = files.length; 


while (i < len) { 
info += ‘S${files[il].name} (${files[i].type}, S${files[i].size} bytes)<br>，} 
工 + 二 7 


} 


output.innerHTML = info; 
} 
} 
droptarget .addEventListener("dragenter", handleEvent); 
droptarget .addEventListener("dragover", handleEvent); 
droptarget .addEventListener("drop", handleEvent); 


与 后 面 要 介绍 的 拖 放 的 例子 一 样 ， 必 须 取消 aragenter、dragover 和 drop 的 默认 行为 。 在 


drop 事件 处 理 程序 中 ， 可 以 通过 event .dataTransfer.files 读 到 文件 ， 此 时 可 以 获取 文件 的 相关 
这 自 


信 心 \ oO 
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20.5 ”媒体 元 素 


随 着 租 入 音频 和 视频 元 素 在 Web 应 用 上 的 流行 ,大 多 数 内 容 提供 商会 强迫 使 用 Flash 以 便 达 到 最 佳 
的 跨 浏 览 器 兼容 性 。HTMLS5 新 增 了 两 个 与 媒体 相关 的 元 素 ， 即 <audio> 和 <video>， 从 而 为 浏览 器 提 
供 了 艇 人 音频 和 视频 的 统一 解决 方案 。 

这 两 个 元 素 既 支持 Web 开发 者 在 页 面 中 髓 入 媒体 文件 ,也 支持 JavaScript 实现 对 媒体 的 自 定义 控制 
以 下 是 它们 的 用 法 : 



























































[e) 





<!-- 谋 入 视频 --> 
<video src="conference.mpg" id="myVideo">Video player not available.</video> 
<!-- 嵌入 音频 --> 


<audio src="song.mp3" id="myAudio">Audio player not available.</audio> 


每 个 元 素 至 少 要 求 有 一 个 src 属性 , 以 表示 要 加 载 的 媒体 文件 。 我 们 也 可 以 指定 表示 视频 播放 器 大 
小 的 wiath 和 heignt 属性 ， 以 及 在 视频 加 载 期 间 显 示 图 片 URI 的 poster 属性 。 另 外 ，controls 
届 性 如 果 存在 ， 则 表示 浏览 器 应 该 显示 播放 界面 ， 让 用 户 可 以 直接 控制 媒体 。 开 始 和 结束 标签 之 间 的 内 
容 是 在 媒体 播放 器 不 可 用 时 显示 的 替代 内 容 。 

由 于 浏览 器 支持 的 媒体 格式 不 同 ， 因 此 可 以 指定 多 个 不 同 的 媒体 源 。 为 此 ， 需 要 从 元 素 中 删除 src 
属性 ， 使 用 一 个 或 多 个 <source> 元 素 代替 ， 如 下 面 的 例子 所 示 : 

<!-- 嵌入 视频 --> 

<Video id="myVideo"> 
<source src="conference.webm" type="video/webm; codecs='vp8, vorbis'"> 
<Source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'"> 
<source src="conference.mpg"> 

Video player not available. 

</video> 

<!-- 眶 入 音频 --> 

<audio id="myAudio"> 
<source src="song.ogg" type="audio/ogg"> 
<source src="song.mp3" type="audio/mpeg"> 


Audio player not available. 
</audio> 


讨论 不 同音 频 和 视频 的 编 解码 器 超出 了 本 书 范畴 , 但 浏览 器 支持 的 编 解码 器 确实 可 能 有 所 不 同 ， 
此 指定 多 个 源 文件 通常 是 必需 的 。 


20.5.1 属性 


<video> 和 <audio> 元 素 提 供 了 稳健 的 JavaScript 接口 。 这 两 个 元 素 有 很 多 共有 属性 ， 可 以 用 于 确 
定 媒体 的 当前 状态 ， 如 下 表 所 示 。 
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属 性 数据 类 型 说 明 
autoplay Boolean 取得 或 设置 autoplay 标签 
buffered TimeRanges 对 象 ， 表 示 已 下 载 缓冲 的 时 间 范 围 
bufferedBytes ByteRanges 对 象 ， 表 示 已 下 载 缓冲 的 字 节 范围 
bufferingRate Integer 平均 每 秒 下 载 的 位 数 








bufferingThrottled Boolean 表示 缓冲 是 否 被 浏览 器 截流 
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( 续 ) 
属 性 数据 类 型 说 明 

controls Boolean 取得 或 设置 controls 属性 ， 用 于 显示 或 隐藏 浏览 器 内 置 控件 

currentLoop Integer 媒体 已 经 播放 的 循环 次 数 

currentSrc String 当前 播放 媒体 的 URL 

currentTime Float 已 经 播放 的 秒 数 

defaultPlaybackRate Float 取得 或 设置 默认 回放 速率 。 默 认为 1.0 秒 

duration Float 媒体 的 总 秒 数 

ended Boolean 表示 媒体 是 否 播 放 完 成 

loop Boolean 取得 或 设置 媒体 是 否 应 该 在 播放 完 再 循环 开始 

muted Boolean 取得 或 设置 媒体 是 否 静音 

DetworkState IntegeL 表示 媒体 当前 网 络 连 接 状 态 。0 表示 空 ，1 表示 加 载 中 ，2 表示 加 载 元 数据 ， 
3 表示 加 载 了 第 一 帧 ，4 表示 加 载 完成 

paused Boolean 表示 播放 髓 是 否 暂 停 

playbackRate Float 取得 或 设置 当前 播放 速率 。 用 户 可 能 会 让 媒体 播放 快 一 些 或 慢 一 些 。 与 
defaultPlaybackRate 不 同 ， 该 属性 会 保持 不 变 ， 除 非 开 发 者 修改 

played TimeRanges 到 目前 为 止 已 经 播放 的 时 间 范 围 

readyState Integer 表示 媒体 是 否 已 经 准备 就 绪 。0 表示 媒体 不 可 用 ，1 表示 可 以 显示 当前 帧 ， 





2 表示 媒体 可 以 开始 播放 ，3 表示 媒体 可 以 从 头 播 到 尾 

































































seekable TimeRanges 可 以 跳 转 的 时 间 范 置 

seeking Boolean 表示 播放 器 是 否 正 移动 到 媒体 文件 的 新 位 置 

src String 媒体 文件 源 。 可 以 在 任何 时 候 重 写 

start Float 取得 或 设置 媒体 文件 中 的 位 置 ， 以 秒 为 单位 ， 从 该 处 开始 播放 
totalBytes Integer 资源 需要 的 字 节 总 数 ( 如 果 知 道 的 话 ) 

videoHeight Integer 返回 视频 (不 一 定 是 元 素 ) 的 高 度 。 只 适用 于 <video> 
videoWidth Integer 返回 视频 (不 一 定 是 元 素 ) 的 宽度 。 只 适用 于 <video> 


























volume Float 取得 或 设置 当前 音量 ， 值 为 0.0 到 1.0 
上 述 很 多 属性 也 可 以 在 <audio> 或 <video> 标 签 上 设置 。 
20.5.2 事件 


除了 有 很 多 属性 , 媒体 元 素 还 有 很 多 事件 。 这些 事件 会 监控 由 于 媒体 回放 或 用 户 交 互 导致 的 不 同属 
性 的 变化 。 下 表 列 出 了 这 些 事件 。 

































































事 件 何 时 触发 
abort 下 载 被 中 晰 
canplay 可 放 可 以 开始 ，reaqystate 为 2 
canplaythrough 可 放 可 以 继续 ， 不 应 该 中 断 ，reaqstate 为 3 














canshowcurrentframe 已 经 下 载 当前 帧 ，readystate 为 1 
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( 续 ) 
事 件 何 时 触发 
dataunavailable 不 能 回放 ， 因 为 没有 数据 ，readystate 为 0 
durationchange duration 属性 的 值 发 生变 化 
emptied 网 络 连 接 关 闭 了 
empty 发 生 了 错误 ,阻止 媒体 下 载 
enged 媒体 已 经 播放 完 一 遍 ， 且 停止 了 
error 下 载 期 间 发 生 了 网 络 错误 
load 所 有 媒体 已 经 下 载 完 毕 。 这 个 事件 已 被 废弃 ， 使 用 canplaythrough 代替 
loadeddata 媒体 的 第 一 帧 已 经 下 载 
loadedmetadata 媒体 的 元 数据 已 经 下 载 
loadstart 下 载 已 经 开始 
pause 回放 已 经 暂停 
play 媒体 已 经 收 到 开始 播放 的 请 求 
playing 媒体 已 经 实际 开始 播放 J 
progress 下 载 中 
ratechange 媒体 播放 速率 发 生变 化 
seeked 跳 转 已 结束 
seeking 回放 已 移动 到 新 位 置 
stalled 浏览 器 尝试 下 载 ， 但 尚未 收 到 数据 
timeupdate currentTime 被 非常 规 或 意外 地 更 改 了 
volumechange volume 或 muted 属性 值 发 生 了 变化 
waiting 回放 和 暂停， 以 下 载 更 多 数据 






























































这 些 事件 被 设计 得 尽 可 能 具体 , 以 便 Web 开发 者 能 够 使 用 较 少 的 HTML 和 JavaScript 创建 自 定义 的 
音频 /视频 播放 器 〈 而 不 是 创建 新 Flash 影片 )。 


20.5.3 自 定 义 媒体 播放 器 
使 用 <audio> 和 <video> 的 play () 和 pause() 方 法 ,可 以 手动 控制 媒体 文件 的 播放 。 综 合 使 用 属 














性 、 


山中 














和 件 和 这 些 方 法 ， 可 以 方便 地 创建 自 定义 的 媒体 播放 器 ， 如 下 面 的 例子 所 示 : 











<div class="mediaplayer"> 


<div class="video"> 


<video id="player" src="movie.mov" poster="mymovie.jpg" 
width="300" height="200"> 
Video player not available. 


</video> 
</div> 


<div class="controls"> 
<input type="button" value="Play" id="video-pbtn"> 
<span id="curtime">0</span>/<span id="duration">0</span> 


</div> 
</div> 
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同样 的 代码 也 可 以 用 于 <auaio> 元 素 以 创 


20.5.4 检测 编 解码 器 


如 前 所 述 ， 并 不 是 所 有 浏览 器 都 支持 <video> 和 <audio> 的 所 有 编 解码 器 ， 这 通常 意味 着 必须 提供 
也 有 JavaScript API 可 以 用 来 检测 浏览 
体 元 素 都 有 一 个 名 为 canPlayType () 的 方法 ,该 方法 接收 一 个 格式 / 纺 
值 : 


多 个 媒体 源 。 为 此 ， 


同时 提供 MIME 类 型 和 编 解码 器 的 情况 下 ， 返 回 值 的 可 能 怕 




















通过 使 用 JavaScript 创建 一 个 简单 的 视频 播放 器 , 上 面 这 个 基本 的 HIML 就 可 以 被 激活 了 , 如 下 所 示 : 





// 取得 元 素 的 引用 


let player = Qocument .getElementById("player"), 
btn = document .getElementById("video-btn"), 
curtime = document .getElementById("curtime"), 
duration = document .getElementById("duration"); 





// 更 新 时 长 


duration.innerHTML = 


// 为 按钮 添加 事件 处 理 程序 
btn.addEventListener!( 


if (player.paused) 
player.play (); 


btn.value = "Pause"; 


} else { 
player.pause(); 


btn.value = "Play"; 


} 
过 


// 周期 性 更 新 当前 时 间 
setInterval(() => { 

curtime.innerHTML 
ya 80); 


player.duration; 


(event) => { 


player.currentTime; 





这 里 的 JavaScript 代码 简单 地 为 按钮 添加 了 事件 处 理 程序 ， 可 以 根据 当前 状态 播放 和 和 暂停 视频 。 此 
外 ， 还 给 <video> 元 素 的 10ad 事件 添加 了 事件 处 理 程序 ， 以 便 显示 视频 的 时 长 。 最 后 ， 重 复 的 计时 器 
用 于 更 新 当前 时 间 。 通 过 监听 更 多 事件 以 及 使 用 更 多 属性 ， 可 以 进一步 扩展 这 个 自 定义 的 视频 播放 器 。 





























E 自 定义 的 音频 播放 右 。 








是 否 支 持 


给 定格 式 和 编 解码 器 。 这 两 个 媒 






































"probably" 、"maybe" 或 ""( 空 字符 串 )， 其 中 空 字符 吓 
样 使 用 canPlayType () : 


if (audio.canPlayType("audio/mpeg")) { 





// 执行 某 些 操作 
} 


"probably" 和 "maybe" 都 是 真 值 ， 在 if 语句 的 上 下 文中 可 以 转型 为 true。 





























解码 器 字符 串 ， 返 回 一 个 字符 串 
就 是 假 值 ， 意 味 着 可 以 在 if 语句 中 像 这 





在 只 给 canPlayType () 提供 一 个 MIME 类 型 的 情况 下 ， 最 可 能 返回 的 值 是 "maybe" 和 空 字符 串 。 
这 是 因为 文件 实际 上 只 是 一 个 包装 音频 和 视频 数据 的 容器 ， 而 真正 决定 文件 是 否 可 以 播放 的 是 编码 。 在 




















let audio = document .getElementById("audio-player"); 


// 很 可 能 是 "maybe" 


if (audio.canplayType("audio/mpeg")) { 


// 执行 某 些 操作 
} 
// 可 能 是 "probably" 











FE 会 提高 到 "probably"。 下 面 是 几 个 例子 : 
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if (audio.canplayType("audio/ogg; codecs=\"vorbis\"")) { 


// 执行 某 些 操作 





注意 ， 编 解码 器 必须 放 到 引号 中 。 同 样 ， 也 可 以 在 视频 元 素 上 使 用 canPlayType () 检测 视频 格式 。 


20.5.5 “音频 类 型 


<audio> 元 素 还 有 一 个 名 为 Audio 的 原生 JavaScript 构造 函数 ， 支 持 在 任何 时 候 播 放 音 频 。Audio 
类 型 与 Image 类 似 ， 都 是 DOM 元 素 的 对 等 体 ， 只 是 不 需 搬 入 文档 即 可 工作 。 要 通过 Audio 播放 音频 ， 
只 需 创建 一 个 新 实例 并 传人 音频 源 文件 : 


let audio = new Audio("sound.mp3"); 

EventUtil.addHandler (audio, "canplaythrough", function(event) { 
audio.play (); 

有 


创建 Audio 的 新 实例 就 会 开始 下 载 指 定 的 文件 。 下 载 完 毕 后 ， 可 以 调用 play () 来 播放 音频 。 
在 iOS 中 调用 play () 方 法 会 弹出 一 个 对 话 框 ， 请 求 用 户 授权 播放 声音 。 为 了 连续 播放 ， 必 须 在 
onfinish 事件 处 理 程序 中 立即 调用 play () 。 


20.6 原生 拖 放 


IE4 最 早 在 网 页 中 为 JavaScript 引入 了 对 拖 放 功 能 的 支持 。 当 时 ， 网 页 中 只 有 两 样 东 西 可 以 触发 拖 
放 : 图 片 和 文本 。 拖 动 图 片 就 是 简单 地 在 图 片上 按 住 鼠 标 不 放 然 后 移动 鼠标 。 而 对 于 文本 ,必须 先 选 中 ， 
然后 再 以 同样 的 方式 拖 动 。 在 IE4 中 ， 唯 一 有 效 的 放置 目标 是 文本 框 。IE5 扩展 了 拖 放 人 能力， 添加 了 新 
的 事件 ， 让 网 页 中 几乎 一 切 都 可 以 成 为 放置 目标 。IE5.5 又 进一步 ,允许 几乎 一 切 都 可 以 拖 动 (IE6 也 支 
持 这 个 功能 ), HTML5 在 下 的 拖 放 实 现 基础 上 标准 化 了 拖 放 功 能 。 所 有 主流 浏览 器 都 根据 HIML5 规范 
实现 了 原生 的 拖 放 。 

关于 拖 放 最 有 意思 的 可 能 就 是 可 以 跨 窗 格 、 跨 浏览 器 容器 ， 有 时 候 甚至 可 以 跨 应 用 程序 拖 动 元 素 。 
浏览 器 对 拖 放 的 支持 可 以 让 我 们 实现 这 些 功 能 。 


20.6.1 ” 拖 放 事件 


拖 放 事件 几乎 可 以 让 开发 者 控制 拖 放 操作 的 方方面面 。 关 键 的 部 分 是 确定 每 个 事件 是 在 哪里 触发 
的 。 有 的 事件 在 被 拖 放 元 素 上 触发 , 有 的 事件 则 在 放置 目标 上 和 触发。 在 某 个 元 素 被 拖 动 时 , 会 ( 按 顺序 ) 
触发 以 下 事件 : 

(1) dragstart 

(2) drag 

(3) dragend 

在 按 住 鼠 标 键 不 放 并 开始 移动 鼠标 的 那 一 刻 ， 被 拖 动 元 素 上 会 触发 aragstart 事件 。 此 时 光标 会 
变 成 非 放置 符号 ( 圆 环 中 间 一 条 斜 杠 )， 表 示 元 素 不 能 放 到 自身 上 。 拖 动 开始 时 ,可 以 在 ondragstart 
事件 处 理 程序 中 通过 JavaScript 执行 某 些 操 作 。 
dragstart 事件 触发 后 ,只 要 目标 还 被 拖 动 就 会 持续 触发 arag 事件 ,这 个 事件 类 似 于 mousemove， 
即 随 着 鼠标 移动 而 不 断 触发 。 当 拖 动 停止 时 ( 把 元 素 放 到 有 效 或 无 效 的 放置 目标 上 ), 会 触发 aragend 
事件 。 
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所 有 这 3 个 事件 的 目标 都 是 被 拖 动 的 元 素 。 默 认 情 况 下 ,浏览 絮 在 拖 动 开 始 后 不 会 改变 被 拖 动 元 素 
的 外 观 ， 因 此 是 否 改变 外 观 由 你 来 决定 。 不 过 , 大 多 数 浏览 器 此 时 会 创建 元 素 的 一 个 半 透 明 副 本 ， 始 终 
跟随 在 光标 下 方 。 

在 把 元 素 拖 动 到 一 个 有 效 的 放置 目标 上 时 ， 会 依次 触发 以 下 事件 : 


(1) dragenter 









































(2) dragover 

(3) dragleave 或 drop 

只 要 一 把 元 素 拖 动 到 放置 日 标 上 ，gdragenter 事件 (类似 于 mouseover 事件 ) 就 会 触发 。dragenter 
事件 触发 之 后 ,会 立即 触发 aragover 事件 ,并 且 元 素 在 放置 日 标 范围 内 被 拖 动 期 间 此 事件 会 持续 触发 。 
当 元 素 被 拖 动 到 放置 目标 之 外 ，dragover 事件 停止 触发 ，dragleave 事件 触发 (类似 于 mouseout 
事件 )。 如 果 被 拖 动 元 素 被 放 到 了 目标 上 ， 则 会 触发 arop 事件 而 不 是 aragleave 事件 。 这 些 事件 的 目 
标 是 放置 目标 元 素 。 


20.6.2” 自 定义 放置 目标 


在 把 某 个 元 素 拖 动 到 无 效 放 置 目标 上 时 , 会 看 到 一 个 特殊 光标 ( 圆 环 中 间 一 条 和 斜 杠 ) 表示 不 能 放下 。 
即使 所 有 元 素 都 支持 放置 目标 事件 ,这些 元 素 默 认 也 是 不 允许 放置 的 。 如 果 把 元 素 拖 动 到 不 允许 放置 的 
目标 上 ， 无 论 用 户 动作 是 什么 都 不 会 触发 arop 事件 。 不 过 ， 通 过 履 盖 dragenter 和 dragover 事件 
的 默认 行为 , 可 以 把 任何 元 素 转换 为 有 效 的 放置 目标 。 例 如 ,如 果 有 一 个 ID 为 "daroptarget "的 <dqiv> 
元 素 ， 那 么 可 以 使 用 以 下 代码 把 它 转换 成 一 个 放置 目标 : 


let droptarget = document .getElementById("droptarget"); 



























































































































































droptarget .addEventListener("dragover", (event) => { 
event .preventDefault (); 


}); 


droptarget .addEventListener("dragenter", (event) => { 
event .preventDefault (); 


] 

执行 上 面 的 代码 之 后 , 把 元 素 拖 动 到 这 个 <aiv> 上 应 该 可 以 看 到 光标 变 成 了 允许 放置 的 样子 。 另 外 ， 
drop 事件 也 会 触发 。 

在 Firefox 中 ， 放 置 事件 的 默认 行为 是 导航 到 放 在 放置 目标 上 的 URL。 这 意味 着 把 图 片 拖 动 到 放置 
目标 上 会 导致 页 面 导航 到 图 片 文件 ， 把 文本 拖 动 到 放置 目标 上 会 导致 无 效 URL 错误 。 为 阻止 这 个 行为 ， 
在 Firefox 中 必须 取消 arop 事件 的 默认 行为 : 


droptarget .addEventListener("drop", (event) => { 
event .preventDefault (); 


}); 









































20.6.3 dataTransfer 对 象 


除非 数据 受 影响 ， 否 则 简单 的 拖 放 并 没有 实际 意义 。 为 实现 拖 动 操作 中 的 数据 传输 ，IE5 在 event 
对 象 上 暴露 了 dataTransfer 对 象 ， 用 于 从 被 拖 动 元 素 向 放置 目标 传递 字符 串 数 据 。 因 为 这 个 对 象 是 
event 的 属性 ， 所 以 在 拖 放 事件 的 事件 处 理 程序 外 部 无 法 访问 dataTransfer。 在 事件 处 理 程序 内 部 ， 
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可 以 使 用 这 个 对 象 的 属性 和 方法 实现 拖 放 功 能 ,dataTransfer 对 象 现在 已 经 纳入 了 HTML5 工作 草案 。 
dataTransfer 对 象 有 两 个 主要 方法 : getData() 和 setData() 。 顾 名 思 义 ，getData() 用 于 获 
取 setData() 存 储 的 值 。setData() 的 第 一 个 参数 以 及 getData() 的 唯一 参数 是 一 个 字符 串 ， 表 示 要 
设置 的 数据 类 型 : "text "或 "URL"， 如 下 所 示 : 
// 传递 文本 
event .dataTransfer.setData("text", "some text"); 
let text = event.dataTransfer.getData("text"); 




















// 传递 URL 
event .dataTransfer.setData("URL", "http://www.wrox.com/"); 
let url = event.dataTransfer.getData ("URL"); 


虽然 这 两 种 数据 类 型 是 正 最 初 引 入 的 , 但 HTMLS5 已 经 将 其 扩展 为 允许 任何 MIME 类 型 。 为 向 后 
兼容 ，HIML5 还 会 继续 支持 "text" 和 "URL"， 但 它们 会 分 别 被 映射 到 "text/plain" 和 "text/uri-list"。 

dataTransfer 对 象 实际 上 可 以 包含 每 种 MIME 类 型 的 一 个 值 ， 也 就 是 说 可 以 同时 保存 文本 和 
URL， 两 者 不 会 相互 覆盖 。 存 储 在 dataTransfer 对 象 中 的 数据 只 能 在 放置 事件 中 读 取 。 如 果 没 有 在 
ondrop 事件 处 理 程序 中 取得 这 些 数据 ，dataTransfer 对 象 就 会 被 销毁 ， 数 据 也 会 丢失 。 

在 从 文本 框 拖 动 文本 时 ,浏览 器 会 调用 setData() 并 将 拖 动 的 文本 以 "text "格式 存储 起 来 。 类 似 
地 ， 在 拖 动 链接 或 图 片 时 ， 浏览 絮 会 调用 setpata () 并 把 URL 存储 起 来 。 当 数据 被 放置 在 日 标 上 时 ， 
可 以 使 用 getData() 获取 这 些 数据 。 当 然 ， 可 以 在 aragstart 事件 中 手动 调用 setData() 存 储 自 定 
义 数据 ， 以 便 将 来 使 用 。 

作为 文本 的 数据 和 作为 URL 的 数据 有 一 个 区 别 。 当 把 数据 作为 文本 存储 时 ,数据 不 会 被 特殊 对 待 。 
而 当 把 数据 作为 URL 存储 时 ， 数 据 会 被 作为 网 页 中 的 一 个 链接 ， 意 味 着 如 果 把 它 放 到 另 一 个 浏览 器 窗 
口 ， 浏 览 器 会 导航 到 该 URL。 
直到 版 本 5，Firefox 都 不 能 正确 地 把 "uri" 上 映射 为 "text /uri-1list" 或 把 "text "映射 为 "text /plain"。 
不 过 ， 它 可 以 把 "Text" (第 一 个 字母 大 写 ) 正确 映射 为 "text /plain"。 在 通过 dataTransfer 获取 
数据 时 ， 为 保持 最 大 兼容 性 ， 需 要 对 URL 检测 两 个 值 并 对 文本 使 用 "Text": 


let dataTransfer = event.dataTransfer; 

// 读 取 URL 

let url = dataTransfer.getData("url") || dataTransfer.getDatal("text/uri-list"),; 
// 读 取 文本 

let text = dataTransfer.getData("Text"); 


这 里 要 注意 ， 首 先 应 该 尝试 短 数据 名 。 这 是 因为 直到 版 本 10，IE 都 不 支持 扩展 的 类 型 名 ， 而 且 会 
在 遇 到 无 法 识别 的 类 型 名 时 抛 出 错误 。 




















































































































20.6.4 dropEffect 与 effectAllowed 


dataTransfer 对 象 不 仅 可 以 用 于 实现 简单 的 数据 传输 , 还 可 以 用 于 确定 能 够 对 被 拖 动 元 素 和 放置 
目标 执行 什么 操作 。 为 此 ， 可 以 使 用 两 个 属性 : dropEffect 与 effectAllowed。 

dropEffect 属性 可 以 告诉 浏览 器 允许 哪 种 放置 行为 。 这 个 属性 有 以 下 4 种 可 能 的 值 。 
口 "none" : 被 拖 动 元 素 不 能 放 到 这 里 。 这 是 除 文本 框 之 外 所 有 元 素 的 默认 值 。 
口 "move": 被 拖 动 元 素 应 该 移动 到 放置 目标 。 
口 "copy": 被 拖 动 元 素 应 该 复制 到 放置 目标 。 
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口 "1ink": 表示 放置 目标 会 导航 到 被 拖 动 元 素 ( 仅 在 它 是 URL 的 情况 下 )。 

在 把 元 素 拖 动 到 放置 目标 上 时 ， 上 述 每 种 值 都 会 导致 显示 一 种 不 同 的 光标 。 不 过 ， 是否 导 致 光标 示 
意 的 动作 还 要 取决 于 开发 者 。 换 句 话 说 ， 如 果 没 有 代码 参与 ， 则 没有 什么 会 自动 移动 、 复 制 或 链接 。 唯 
一 不 用 考虑 的 就 是 光标 自己 会 变 。 为 了 使 用 aropEffect 属性 , 必须 在 放置 目标 的 ondragenter 事件 
处 理 程序 中 设置 它 。 
除非 同时 设置 effectAllowed， 耕 则 aropEffect 属性 也 没有 用 。effectAllowed 属性 表示 对 
被 拖 动 元 素 是 否 人 允许 dropEffect。 这 个 属性 有 如 下 几 个 可 能 的 值 。 
口 "uninitialized": 没有 给 被 拖 动 元 素 设置 动作 。 
"none" : 被 拖 动 元 素 上 没有 允许 的 操作 。 
"copy": 只 人 允许 "copy" 这 种 dropEffect。 
"Link": 只 人 允许 "1ink" 这 种 dropEffect。 
"move" : 只 人 允许 "move" 这 种 dropEffect。 
"copyLink" : 人 允许 "copy" 和 "1Link" 两 种 dropEffect。 
"copyMove" : 人 允许 "copy" 和 "move" 两 种 dropEffect。 
"LinkMove"， 人 允许 "Link" 和 "move" 两 种 aropEffect。 
"all": 允许 所 有 dropEffect。 
必须 在 ondragstart 事件 处 理 程序 中 设置 这 个 属性 。 
眼 设 我 们 想 允 许 用 户 把 文本 从 一 个 文本 框 拖 动 到 一 个 <aiv> 元 素 。 那么 必须 同时 把 aropEffect 和 
effectAllowed 属性 设置 为 "move"。 因 为 <dQiv> 元 素 上 放置 事件 的 默认 行为 是 什么 也 不 做 ， 所 以 文本 
不 会 自动 地 移动 自己 。 如 果 覆 盖 这 个 默认 行为 ,文本 就 会 自动 从 文本 框 中 被 移 除 。 然 后 是 否 把 文本 插入 
<div> 元 素 就 取决 于 你 了 。 如 果 是 把 dropEffect 和 effectAllowed 属性 设置 为 "copy" ， 那 么 文本 
框 中 的 文本 不 会 自动 被 移 除 。 


20.6.5 ”可 拖 动 能 


默认 情况 下 ， 图片、 链接 和 文本 是 可 拖 动 的 ,这 意味 着 无 须 额外 代码 用 户 便 可 以 拖 动 它们 。 文 本 只 
有 在 被 选中 后 才 可 以 拖 动 ， 而 图 片 和 链接 在 任意 时 候 都 是 可 以 拖 动 的 。 

我 们 也 可 以 让 其 他 元 素 变 得 可 以 拖 动 。HTML5 在 所 有 HTML 元 素 上 规定 了 一 个 araggable 属性 ， 
表示 元 素 是 否 可 以 拖 动 。 图 片 和 链接 的 draggable 属性 自动 被 设置 为 true, 而 其 他 所 有 元 素 此 属性 
的 默认 值 为 false。 如 果 想 让 其 他 元 素 可 拖 动 ， 或 者 不 允许 图 片 和 链接 被 拖 动 ， 都 可 以 设置 这 个 属性 。 
例如 : 


<!-- 禁止 拖 动 图 片 --> 

<img src="smile.gif" draggable="false" alt="Smiley face"> 
<!-- 让 元 素 可 以 拖 动 --> 

<div draggable="true">...</div> 
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20.6.6 ”其 他 成 员 


HTMLS 规范 还 为 daataTransfer 对 象 定义 了 下 列 方法 。 
口 addElement (element): 为 拖 动 操作 添加 元 素 。 这 纯粹 是 为 了 传输 数据 ,不 会 影响 拖 动 操 作 的 
外 观 。 在 本 书写 作 时 ， 还 没有 浏览 器 实现 这 个 方法 。 
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口 clearpata (format) : 清除 以 特定 格式 存储 的 数据 。 

口 setDragImage (element，x，y): 允许 指定 拖 动 发 生 时 显示 在 光标 下 面 的 图 片 。 这 个 方法 接 
收 3 个 参数 : 要 显示 的 HTML 元 素 及 标识 4 光标 位 置 的 图 片上 的 x 和 了 坐标 。 这 里 的 HTML 元 素 
可 以 是 一 张 图 片 ， 此 时 显示 图 片 ; 也 可 以 是 其 他 任何 元 素 ， 此 时 显示 泻 染 后 的 元 素 。 

口 types: 当前 存储 的 数据 类 型 列表 。 这 个 集合 类 似 数 组 , 以 字符 串 形 式 保 存 数 据 类 型 ,比如 "text"。 


20.7 Notifications API 


Notifications API 用 于 向 用 户 显示 通知 。 无 论 从 哪个 角度 看 ,这 里 的 通知 都 很 类 似 alert () 对 话 框 : 
都 使 用 JavaScript API 触发 页 面 外 部 的 浏览 器 行为 ， 而 且 都 允许 页 面 处 理 用 户 与 对 话 框 或 通知 弹 层 的 交 
互 。 不 过 ,通知 提供 更 灵活 的 自 定义 能 

Notifications API 在 Service Worker 中 非常 有 用 。 渐进 Web 应 用 (PWA , Progressive Web Application ) 
通过 触发 通知 可 以 在 页 面 不 活跃 时 向 用 户 显 示 消 息 ， 看 起 来 就 像 原 生 应 用 。 


20.7.1 通知 权限 


Notifications API 有 被 滥用 的 可 能 ， 因 此 默认 会 开启 两 项 安全 措施 : 
口 通知 只 能 在 运行 在 安全 上 下 文 的 代码 中 被 触发 ; 
口 通知 必须 按照 每 个 源 的 原则 明确 得 到 用 户 允 许 。 
用 户 授 权 显 示 通 知 是 通过 浏览 絮 内 部 的 一 个 对 话 框 完成 的 。 除 非 用 户 没 有 明确 给 出 允许 或 拒绝 的 管 
， 否 则 这 个 权限 请 求 对 每 个 域 只 会 出 现 一 次 。 浏 览 带 会 记 住 用户 的 选择 ， 如 果 被 拒绝 则 无 法 重 来 。 
页 面 可 以 使 用 全 局 对 象 Notification 向 用 户 请 求 通知 权限 。 这 个 对 象 有 一 个 requestPemi ssion() 
方法 ， 该 方法 返回 一 个 期 约 ， 用 户 在 授权 对 话 框 上 执行 操作 后 这 个 期 约会 解决 。 
Notification.requestPermission!() 
.then((permission) => { 


console.log('User responded to permission request:', permission); 


未 


"granted" 值 意味 着 用 户 明确 授权 了 显示 通知 的 权限 。 除 此 之 外 的 其 他 值 意味 着 显示 通知 会 静默 失 
败 。 如 果 用 户 拒 绝 授 权 ， 这 个 值 就 是 "denied"。 一 旦 拒绝 ， 就 无 法 通过 编程 方式 挽回 ， 因 为 不 可 能 
触发 授权 提示 。 


20.7.2 ”显示 和 隐藏 通知 


Notification 构造 函数 用 于 创建 和 显示 通知 。 最 简单 的 通知 形式 是 只 显示 一 个 标题 , 这 个 标题 内 
容 可 以 作为 第 一 个 参数 传 给 Notification 构造 函数 。 以 下 面 这 种 方式 调用 Notification， 应 该 会 
立即 显示 通知 : 

new Notification('Title text!'); 


可 以 通过 options 参数 对 通知 进行 自 定义 ， 包 括 设置 通知 的 主体 、 图 片 和 振动 等 : 


new Notification('Title text!', { 
body: 'Body text!', 
image: 'path/to/image.png', 
Vibrate: true 
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调用 这 个 构造 函数 返回 的 Notification 对 象 的 close() 方 法 可 以 关闭 显示 的 通知 。 下 硬 

















展示 了 显示 通知 后 1000 毫秒 再 关闭 它 : 























const n = new Notification('I will close in 1000ms'); 


setTimeout (() 


=> n.close(), 1000); 


20.7.3 ”通知 生命 周期 回调 


























生命 周期 方法 : 





DQ onclic 


口 onclos 





DQ onerro 


通知 并 非 只 用 











于 显示 文本 字符 串 , 也 可 

















口 onshovw 在 通知 显示 时 触发 ; 


i 


k 在 通 
在 通 
r 在 发 生 错 误 阻 止 通知 显示 时 触发 。 








知 被 点 击 时 触发 ; 
知 消 



































的 例子 























用 于 实现 交互 。Notifications API 提供 了 4 个 








j 于 添加 回调 的 





f 失 或 通过 close () 关闭 时 触发 ; 


下 面 的 代码 将 每 个 生命 周期 事件 都 通过 日 志 打 印 了 出 来 : 


本 


.onclick 
.onclose 
.Onerror 


二 


.Onshow = ( 





new Notification('foo'); 


) 
( 
( 
( 


ie 


20.8 ”Page Visibility API 














Web 开发 


一 个 常见 的 问题 是 开发 者 不 知道 用 户 什么 





藏 在 其 他 标签 页 后 务 


=> console.log('Notification was Shownl! ') 

) => console.log('Notification was clicked!'); 
) => console.log('Notification was closed! 
) => console.log('Notification experienced an error!'); 


则 后 














时 候 真 正在 使 用 页 也 


页 





] 。 如 及 




















ij， 那么 轮 询 有 

















开发 者 提供 页 本 








j 对 用 户 是 否 可 见 的 信息 。 





这 个 API 本 身 非 常 简单 ， 由 3 部 分 构成 。 


口 document .visibilityState 值 ， 表示 下 面 








加 页 面 在 后 台 标 签 


页 或 浏览 名 中 最 小 化 了 。 





加 页 面 在 前 台 标 签 





页 中 。 





量 实际 页 面 隐 藏 了 , 但 对 页 首 


览 





i 的 预览 是 可 见 的 ( 例 














上 会 显示 网 页 预览 )。 


加 页 面 在 
口 visibilitychange 事件 ， 该 事件 会 在 文档 从 隐藏 变 可 见 (或 反之 ) 时 触发 。 
是否 隐藏 。 这 可 能 意味 着 页 面 在 后 台 标 签 页 或 浏览 器 中 被 最 小 
容 才 继续 被 浏览 器 支持 的 ， 应 该 优先 使 用 document .visibilityState 





口 document .higdgden 布尔 值 ， 表示 页 首 
化 了 。 这 个 值 是 为 了 向 后 兼 





屏 外 预 泻 染 。 


4 种 状态 之 一 。 





如 在 Windows7 上 , 用 























检测 页 面 可 见 性 。 











要 想 在 页 国 





j 从 可 见 变 为 隐藏 或 从 隐藏 变 为 可 见 时 得 到 











SEE 


地 























document .visibilityState 的 值 是 以 下 三 个 字符 串 之 





口 "hidden" 
口 "visible" 
口 "prerender" 











可 被 最 小 化 或 隐 





户 鼠 标 移 到 任务 栏 


民 务 器 或 更 新 动画 等 功能 可 能 就 没有 必要 了 。Page Visibility API 旨 在 为 





A 





标 








知 ， 需 要 监听 visipbilitychange 事件 。 
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20.9 Streams API 


Streams API 是 为 了 解决 一 个 简单 但 又 基础 的 问题 而 生 的 : Web 应 用 如 何 消费 有 序 的 小 信 
息 块 而 不 是 大 块 信息 ?这 种 能 力主 要 有 两 种 应 用 场景 。 
口 大 块 数据 可 能 不 会 一 次 性 都 可 用 。 网 络 请 求 的 响应 就 是 一 个 典型 的 例子 。 网 络 负载 是 以 连续 信 
息 包 形 式 交 付 的， 而 流 式 处 理 可 以 让 应 用 在 数据 一 到 达 就 能 使 用 ， 而 不 必 等 到 所 有 数据 都 加 载 
完毕 。 
口 大 块 数据 可 能 需要 分 小 部 分 处 理 。 视 频 处 理 、 数 据 压缩 、 图 像 编 码 和 JSON 解析 都 是 可 以 分 成 小 
部 分 进行 处 理 ， 而 不 必 等 到 所 有 数据 都 在 内 存 中 时 再 处 理 的 例子 。 
第 24 章 在 讨论 网 络 请 求 和 远程 资源 时 会 介绍 Streams API 在 fetch () 中 的 应 用 ， 不 过 Streams API 
本 身 是 通用 的 。 实 现 Observable 接口 的 JavaScript 库 共 享 了 很 多 流 的 基础 概念 。 





小 
eol; 
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注意 虽然 Fetch API 已 经 得 到 所 有 主流 浏览 器 支持 ,但 Streams API 则 没有 那么 快 得 到 支持 。 





20.9.1 理解 流 


提 到 流 ， 可 以 把 数据 想像 成 某 种 通过 管道 输送 的 液体 。JavaScript 中 的 流 借用 了 管道 相关 的 概念 ， 
因为 原理 是 相通 的 。 根 据 规 范 ,“ 这 些 API 实际 是 为 映射 低级 WO 原 语 而 设计 ， 包 括 适 当时 候 对 字 节 流 
的 规范 化 ”。Stream API 直接 解决 的 问题 是 处 理 网 络 请 求 和 读 写 磁盘 。 

Stream API 定 义 了 三 种 流 。 

口 可 读 流 : 可 以 通过 某 个 公共 接口 读 取 数 据 块 的 流 。 数 据 在 内 部 从 底层 源 进 入 流 ， 然 后 由 消费 者 

(consumer ) 进行 处 理 。 

口 可 写 流 : 可 以 通过 某 个 公共 接口 写 入 数据 块 的 流 。 生 产 者 (producer ) 将 数据 写 入 流 ， 数 据 在 内 

部 传 和 底层 数据 模 ( sink )。 

口 转换 流 : 由 两 种 流 组 成 ， 可 写 流 用 于 接收 数据 ( 可 写 端 )， 可 读 流 用 于 输出 数据 ( 可 读 端 )。 这 
两 个 流 之 间 是 转换 程序 (transformer )， 可 以 根据 需要 检查 和 修改 流 内 容 。 

块 、 内 部 队列 和 反 讨 

流 的 基本 单位 是 块 (chunk )。 块 可 是 任意 数据 类 型 , 但 通常 是 定型 数组 。 每 个 块 都 是 离散 的 流 片 段 ， 
可 以 作为 一 个 整体 来 处 理 。 更 重要 的 是 , 块 不 是 固定 大 小 的 ， 也 不 一 定 按 固定 间隔 到 达 。 在 理想 的 流 当 
中 ， 块 的 大 小 通常 近似 相同 ， 到 达 间 隔 也 近似 相等 。 不 过 好 的 流 实现 需要 考虑 边界 情况 。 

前 面 提 到 的 各 种 类 型 的 流 都 有 入 口 和 出 口 的 概念 。 有 时 候 ， 由 于 数据 进出 速率 不 同 ， 可 能 会 出 现 不 

匹配 的 情况 。 为 此 流 平衡 可 能 出 现 如 下 三 种 情形 。 

口 流出 口 处 理 数据 的 速度 比 入 口 提 供 数 据 的 速度 快 。 流 出 口 经 常 空闲 〈 可 能 意味 着 流入 口 效 率 较 

低 )， 但 只 会 浪费 一 点 内 存 或 计算 资源 ， 因 此 这 种 流 的 不 平衡 是 可 以 接受 的 。 

口 流入 和 流出 均衡 。 这 是 理想 状态 。 

口 流入 口 提供 数据 的 速度 比 出 口 处 理 数据 的 速度 快 。 这 种 流 不 平衡 是 固有 的 问题 。 此 时 一 定 会 在 
某 个 地 方 出 现 数据 积压 ， 流 必须 相应 做 出 处 理 。 

流 不 平衡 是 常见 问题 , 但 流 也 提供 了 解决 这 个 问题 的 工具 。 所 有 流 都 会 为 已 进入 流 但 尚未 离开 流 的 
块 提 供 一 个 内 部 队列 。 对 于 均衡 流 ， 这 个 内 部 队列 中 会 有 零 个 或 少量 排队 的 块 ， 因 为 流出 口 块 出 列 的 速 
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度 与 流入 口 块 人 列 的 速度 近似 相等 。 这 种 流 的 内 部 队列 所 占用 的 内 存 相对 比较 小 。 

如 果 块 入 列 速度 快 于 出 列 速度 ， 则 内 部 队列 会 不 断 增 大 。 流 不 能 允许 其 内 部 队列 无 限 增 大 ， 因 此 它 
会 使 用 反 压 (backpressure ) 通知 流入 口 停止 发 送 数 据 ， 直 到 队列 大 小 降 到 某 个 既定 的 阔 值 之 下 。 这 个 阐 
值 由 排列 策略 决定 ， 这 个 策略 定义 了 内 部 队列 可 以 占用 的 最 大 内 存 ， 即 高 水 位 线 ( high water mark )。 


20.9.2 ”可 读 流 


可 读 流 是 对 底层 数据 源 的 封装 。 底 层 数据 源 可 以 将 数据 填充 到 流 中 ， 人 允许 消费 者 通过 流 的 公共 接口 
读 取 数 据 。 

1. ReadableStreamDefaultController 

来 看 下 面 的 生成 库 ， 它 每 1000 毫秒 就 会 生成 一 个 递增 的 整数 : 

async function* ints() { 

// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 

yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 
} 

} 

这 个 生成 器 的 值 可 以 通过 可 读 流 的 控制 器 传人 可 读 流 。 访 问 这 个 控制 器 最 简单 的 方式 就 是 创建 
ReadableStream 的 一 个 实例 ， 并 在 这 个 构造 函数 的 underlyingSource 参数 (第 一 个 参数 ) 中 定义 
start () 方 法 ,然后 在 这 个 方法 中 使 用 作为 参数 传人 的 controller。 默 认 情 况 下 ， 这 个 控制 器 参数 是 
ReadableStreamDefaultController 的 一 个 实例 : 





































































































const readableStream = new ReadableStream({ 
start (controller) { 
console.log(controller); // ReadableStreamDefaultController {} 
} 
es 


调用 控制 器 的 enqueue () 方 法 可 以 把 值 传人 控制 器 。 所 有 值 都 传 完 之 后 ， 调 用 close () 关闭 流 : 
async function* ints() { 
// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 
yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 
} 


























const readableStream = new ReadableStream({ 
async start (controller) { 
for await (let chunk of ints()) { 
controller.enqueue (chunk); 
} 


controller.close(); 
} 
Fs 


2. ReadableStreamDefaultReader 

前 面 的 例子 把 5 个 值 加 入 了 流 的 队列 , 但 没有 把 它们 从 队列 中 读 出 来 。 为 此 , 需要 一 个 Readable- 
StreamDefaultReader 的 实例 ， 该 实例 可 以 通过 流 的 getReader () 方 法 获取 。 调 用 这 个 方法 会 获得 
流 的 锁 ， 保 证 只 有 这 个 读 取 器 可 以 从 流 中 读 取 值 : 
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async function* ints() { 
// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5» ++i) { 
yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 
} 
} 


const readableStream = new ReadableSstream({ 
async start (controller) { 
for await (let chunk of ints()) { 
controller.enqueue (chunk) ; 


} 


controller.close(); 
ns 


console.log(readableStream.locked); // false 
const readableStreamDefaultReader = readableStream.getReader(); 
console.log(readableStream.locked); // true 


消费 者 使 用 这 个 读 取 器 实例 的 read() 方 法 可 以 读 出 值 : 
asyvne function. Tnte:() 4 
// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 
yield await new Promise( (resolve) => setTimeout (resolve, 1000, i)); 








} 
} 


const readableStream = new ReadableStream({ 
async start (controller) { 
for await (let chunk of ints()) { 
controller.enqueue (chunk) ; 


} 


controller.close(); 
} 
Fa) 
console.log(readableStream.locked); // false 
const readableStreamDefaultReader = readableStream.getReader (); 
console.log(readableStream.locked); // true 


// 消费 者 
(async function() { 
while(true) { 
const { done, value } = await readableStreamDefaultReader.read(); 
if (done) { 
break; 
} else { 
console.log(value); 


// 0 
大计 
// 2 
// 3 
// 4 
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20.9.3 ”可 写 流 


可 写 流 是 底层 数据 槽 的 封装 。 底 层 数据 槽 处 理 通 过 流 的 公共 接口 写 和 人 的 数据 。 
1. 创建 Writablestream 
来 看 下 面 的 生成 器 ， 它 每 1000 毫秒 就 会 生成 一 个 递增 的 整数 . 
async function* ints() { 

// 每 1000 毫秒 生成 一 个 递增 的 整数 

于 四 站 (下村 0 


yield await new Promise( (resolve) => setTimeout (resolve, 1000, i)); 















































出 

















Nh 








这 些 值 通过 可 写 流 的 公共 接口 可 以 写 人 流 。 在 传 给 WritableStream 构造 函数 的 underlyingsSink 
1， 通 过 实现 write() 方 法 可 以 获得 写 人 的 数据 : 


const readableStream = new ReadableStream({ 
write(value) { 
console.log(value); 
} 
}) 3 

















参数 


2. WritableStreamDefaultWriter 
要 把 获得 的 数据 写 入 流 , 可 以 通过 流 的 getWriter () 方 法 获取 WritablesStreamDefaultWriter 
的 实例 。 这 样 会 获得 流 的 锁 ， 确 保 只 有 一 个 写 人 器 可 以 向 流 中 写 入 数据 : 
async function* ints() { 
// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 
yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 


} 


























} 


const writableStream = new WritableStream(t{ 
write(value) { 
console.log(value); 
} 
} 


console.log (writableStream.locked); // false 
const writableStreamDefaultWriter = writableStream.getWriter(); 
console.log (writableStream.locked); // true 


在 向 流 中 写 入 数据 前 ， 生 产 者 必须 确保 写 人 器 可 以 接收 值 。writablestreamDefaultWriter .ready 
返回 一 个 期 约 ， 此 期 约会 在 能 够 向 流 中 写 人 数据 时 解决 。 然 后 ， 就 可 以 把 值 传 给 writablestream- 
DefaultWriter.write() 方 法 。 写 人 数据 之 后 ， 调 用 writablesStreamDefaultWriter.close() 
将 流 关闭 : 

async function* ints() { 

// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 


Yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 


} 























} 


const writableStream = new WritableStream(t{ 
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write(value) { 
console.log(value); 
} 
}) 


console.log (writableStream.locked); // false 
const writableStreamDefaultWriter = writableStream.getWriter(); 
console.log (writableStream.locked); // true 


// 生产 者 
(async function() { 
for await (let chunk of ints()) { 
await writableStreamDefaultWriter.ready; 
writableStreamDefaultWriter.write(chunk); 
} 


writableStreamDefaultWriter.close(); 
}) (); 


20.9.4 ”转换 流 


转换 流 用 于 组 合 可 读 流 和 可 写 流 。 数 据 块 在 两 个 流 之 间 的 转换 是 通过 transform() 方 法 完成 的 。 20 
来 看 下 面 的 生成 器 ， 它 每 1000 毫秒 就 会 生成 一 个 递增 的 整数 : 
async function* ints() { 

// 每 1000 毫秒 生成 一 个 递增 的 整数 

for (let i = 0; i < 5; ++i) { 


yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 
} 


























} 
下 面 的 代码 创建 了 一 个 Transformstreanm 的 实例 ， 通 过 transform() 方 法 将 每 个 值 翻 倍 : 


async function* ints() { 
// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) 1{ 
yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 
} 





} 


const { writable, readable } = new TransformStream({ 
transform(chunk, controller) { 
controller.enqueue(chunk * 2);，; 








} 
}); 
向 转换 流 的 组 件 流 ( 可 读 流 和 可 写 流 ) 传人 数据 和 从 中 获取 数据 ， 与 本 章 前 面 介 绍 的 方法 相同 : 
async function* ints() { 


// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 
yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 
} 
} 


const { writable, readable } = 
transform(chunk, controller) 
controller.enqueue (chunk * 


new TransformStream({ 


{ 
2 
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const readableStreamDefaultReader = teadable.getReader () 
const writableStreamDefaultWriter = writable.getWriter(); 


// 消费 者 
(async function() { 
while (true) { 
const { done, value } = await readableStreamDefaultReader.read(); 


if (done) { 
break; 
} else { 
console.log(value); 
} 
} 
}) (); 


// 生产 者 
(async function() { 
for await (let chunk of ints()) { 
await writableStreamDefaultWriter.ready; 
writableStreamDefaultWriter.write(chunk); 


} 


writableStreamDefaultWriter.close(); 
}) (); 


20.9.5 ”通过 管道 连接 流 


流 可 以 通过 管道 连接 成 一 串 。 最 常见 的 用 例 是 使 用 pipeThrough () 方 法 把 ReadableStream 接 入 
TransformStream。 从 内 部 看 ，ReadableStream 先 把 自己 的 值 传 给 Transformstream 内 部 的 
WritableStream， 然 后 执行 转换 ， 接 着 转换 后 的 值 又 在 新 的 ReadableStream 上 出 现 。 下 面 的 例子 
将 一 个 整数 的 ReadableStream 传 人 TransformStream，Transformstream 对 每 个 值 做 加 倍 处 理 : 

async function* ints() { 

// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 
yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 


} 
; 


















































const integerStream = new ReadableStream(t{ 
async start (controller) { 
for await (let chunk of ints()) { 
controller.enqueue (chunk) ; 


} 


controller.close(); 
} 
人 


const doublingStream = new TransformStream({ 
transform(chunk, controller) { 
controller.enqueue(chunk * 2);，; 
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} 
}); 


// 通过 管道 连接 流 
const pipedStream = integerStream.pipeThrough (doublingStream); 


// 从 连接 流 的 输出 获得 读 取 器 
const pipedStreamDefaultReader = pipedSstream.getReader(); 


// 消费 者 
(async function() { 
while(true) { 
const { done, value } = await pipedStreamDefaultReader.read(); 


if (done) { 
break; 

} else { 
console.log(value); 





另外 ,使 用 pipeTo () 方 法 也 可 以 将 ReadableStream 连接 到 WritableStream。 整 个 过 程 与 使 








用 pipeThrouogn () 类 似 : 


async function* ints() { 
// 每 1000 毫秒 生成 一 个 递增 的 整数 
for (let i = 0; i < 5; ++i) { 
yield await new Promise((resolve) => setTimeout (resolve, 1000, i)); 
} 
} 


const integerStream = new ReadableStream({ 
async start (controller) { 
for await (let chunk of ints()) { 
controller.enqueue (chunk) ; 


} 


controller.close(); 
} 
ns 


const writableStream = new WritableSstream({ 
write(value) { 
console.log(value); 
} 
}); 


const pipedStream = integerStream.pipeTo(writableSstream); 
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// 2 
a 
// 4 


注意 ， 这 里 的 管道 连接 操作 隐 式 从 Readablestream 获得 了 一 个 读 取 器 ， 并 把 产生 的 值 填充 到 


WritableStreamo 


20.10 计时 API 


页 面 性 能 始终 是 Web 开发 者 关心 的 话题 Performance 接口 通过 JavaScriptAPI 暴 露 了 浏览 需 内 部 
的 度量 指标 ， 人 允许 开发 者 直接 访问 这 些 信息 并 基于 这 些 信息 实现 自己 想 要 的 功能 。 这 个 接口 暴露 在 
window.performance 对 象 上 。 所 有 与 页 面相 关 的 指标 ， 包 括 已 经 定义 和 将 来 会 定义 的 ， 都 会 存在 于 
这 个 对 象 上 。 

Performance 接口 由 多 个 API 构成 : 
口 High Resolution Time API 
DQ Performance Timeline API 















































口 Navigation Timing API 
口 User Timing API 
DQ Resource Timing API 
口 Paint Timing API 
有 关 这 些 规范 的 更 多 信息 以 及 新 增 的 性 能 相关 规范 ， 可 以 关注 W3C 性 能 工作 组 的 GitHub 项 目 
页 面 。 














注意 浏览 器 通常 支持 被 废弃 的 Level 1 和 作为 替代 的 Level2。 本 节 尽 量 介绍 Level 2 级 


规范 。 





20.10.1 High Resolution Time API 


Date.now() 方 法 只 适用 于 日 期 时 间 相 关 操作 ， 而 且 是 不 要 求 计时 精度 的 操作 。 在 下 面 的 例子 中 ， 
函数 foo () 调用 前 后 分 别 记 录 了 一 个 时 间 戳 : 


const t0 = Date.now() 
foo () ; 
const t1 = Date.now(); 








Gonst uratlion stl- 0 


console.log(duration); 


考虑 如 下 auration 会 包含 意外 值 的 情况 。 
口 auration 是 0.Date.now() 只 有 毫秒 级 精度 , 如 果 foo () 执行 足够 快 , 则 两 个 时 间 戳 的 值 会 相等 。 
Dauration 是 负 值 或 极 大 值 。 如 果 在 foo () 执行 时 ,系统 时 钟 被 向 后 或 向 前 调整 了 (如 切换 到 夏 
令 时 )， 则 捕获 的 时 间 戳 不 会 考虑 这 种 情况 ， 因 此 时 间 差 中 会 包含 这 些 调整 。 
为 此 ， 必 须 使 用 不 同 的 计时 API 来 精确 且 准 确 地 度量 时 间 的 流逝 。HighResolution Time API 定 义 了 
window.performance.now()， 这 个 方法 返回 一 个 微 秒 精度 的 浮 点 值 。 因 此 ， 使 用 这 个 方法 先后 捕获 
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的 时 间 截 更 不 可 能 出 现 相等 的 情况 。 而 且 这 个 方法 可 以 保证 时 间 戳 单调 增长 。 
Const 七 0 
const t1 





performance.now(); 
performance.now(); 


console.log(t0); // 1768.625000026077 
console.log(t1); // 1768.6300000059418 


eonst "durat lon,s Cl tO 


console.log(duration); // 0.004999979864805937 


performance.now() 计 时 器 采用 相对 度量 。 这 个 计时 器 在 执行 上 下 文 创建 时 从 0 开始 计时 。 例如 ， 
打开 页 面 或 创建 工作 线程 时 ，performance.now() 就 会 从 0 开始 计时 。 由 于 这 个 计时 器 在 不 同上 下 文中 初 
始 化 时 可 能 存在 时 间 差 , 因此 不 同上 下 文 之 间 如 果 没 有 共享 参照 点 则 不 可 能 直接 比较 performance.now() 。 
performance.timeorigin 属性 返回 计时 需 初 始 化 时 全 局 系统 时 钟 的 值 。 


const relativeTimestamp = performance.now(); 
































const absoluteTimestamp = performance.timeOrigin + relativeTimestamp; 


console.log(relativeTimestamp); // 244.43500000052154 
console.log(absoluteTimestamp); // 1561926208892.4001 


注意 ”通过 使 用 performance.now() 测 量 Ll 缓存 与 主 内 存 的 延迟 差 ， 曲 灵 汤 洞 ( Spectre ) 
可 以 执行 缓存 推断 攻击 。 为 弥补 这 个 安全 漏洞 ， 所 有 的 主流 浏览 器 有 的 选择 降低 


performance.now() 的 精度 ， 有 的 选择 在 时 间 惟 里 混入 一 些 随 机 性 。WebKit 博客 上 有 一 篇 
相关 主题 的 不 错 的 文章 “What Spectre and Meltdown Mean For WebKit " ， 作 者 是 Filip Pizlo。 





20.10.2 Performance Timeline API 


Performance Timeline API 使 用 一 套用 于 度量 客户 端 延 迟 的 工具 扩展 了 Performance 接口 。 性 能 度 
量 将 会 采用 计算 结束 与 开始 时 间 差 的 形式 。 这 些 开始 和 结束 时 间 会 被 记录 为 DOMHighResTimeStamp 
值 ， 而 封装 这 个 时 间 惟 的 对 象 是 PerformanceEntry 的 实例 。 

浏览 器 会 自动 记录 各 种 PerformanceEntry 对 象 , 而 使 用 performance.mark() 也 可 以 记录 自 定 
义 的 PerformanceEntry 对 象 。 在 一 个 执行 上 下 文中 被 记录 的 所 有 性 能 条 目 可 以 通过 performance . 
getEntries() 获 取 : 


console.log (performance.getEntries()); 




































































// [PerformanceNavigationTiming, PerformanceResourceTiming, ... | 


这 个 返回 的 集合 代表 浏览 吉 的 性 能 时 间 线 ( performance timeline )。 每 个 PerformanceEntry 对 象 
都 有 name 、entryType、startTime 和 auration 属性 : 











const entry = performance.getEntries()[0]; 


console.log(entry.name); // "https://foo.com" 
console.log(entry.entryType); // navigation 
console.log(entry.startTime); // 0 
console.log(entry.duration); // 182.36500001512468 
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不 过 ，PerformanceEntry 实际 上 是 一 个 抽象 基 类 。 所 有 记录 条 
但 最 终 还 是 如 下 某 个 具体 类 的 实例 : 


D PerformanceMark 








D PerformanceMeasure 
DQ PerformanceFrameTiming 

D PerformanceNavigationTiming 
D PerformanceResourceTiming 








D PerformancePaintTiming 


Le 
虽然 


日 都 继承 Performance 











Entry, 





上 面 每 
性 会 因为 各 自 的 类 不 同 而 不 同 。 

1. User Timing API 

User Timing API 用 于 记录 和 分 析 自 定义 性 外 


performance.mark() 方 法 : 

















E 条 








He 














performance.mark('foo'); 


console.log(performance.getEntriesByType('mark' 
// PerformanceMark { 


) [QD.)s 








个 类 都 会 增加 大 量 属性 , 用 于 描述 与 相应 条 目 有 关 的 元 数据 。 每 


目 。 如 前 所 述 


性 个 实例 的 name 和 entryType 





， 记 录 自 定义 性 能 条 目 要 使 用 




















// name: "foo", 

A entryType: "mark", 

// startTime: 269.8800000362098, 

Ly duration: 0 

A 

在 计算 开始 前 和 结束 后 各 创建 一 个 自 定义 性 能 
getEntriesByType() 返 回 数组 的 开始 : 

performance.mark('foo'); 

for (let i = 0; i < 1E6; ++i) {} 


performance.mark('bar'); 


const [endMark, startMark] performance.getEntriesByT 
console.log(startMark.startTime - endMark.startTime); 


除了 自 定义 性 能 条 目 ， 





还 可 以 生成 PerformanceMeasure ( 全 




















E 条 目 可 以 计算 时 间 差 。 最 新 的 标记 ( mark ) 会 被 推 到 


ype(l'mark'); 
// 1.3299999991431832 
能 度量 ) 条 目 ， 对 应 由 名 字 作 为 标 











识 的 两 个 标记 之 间 的 持续 时 间 。PerformanceMeasure 的 实例 由 performance.measure() 方 法 生成 : 
performance.mark('foo'); 
for (let i = 0; i < 1E6; ++i) {} 
performance.mark('bar'); 
performance.measure('baz', 'foo', 'bar'); 
const [differenceMark] = performance.getEntriesByType('measure'); 
console.log(differenceMark); 
// PerformanceMeasure { 
A name: "baz", 
/7 entryType: "measure", 
4 startTime: 298.9800000214018, 
// duration: 1.349999976810068 
/1 
2. Navigation Timing API 
Navigation Timing API 提供 了 高 精度 时 间 戳 ， 用 于 度量 当前 页 面 加 载 速 度 。 浏 览 器 会 在 导航 事件 发 
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生 时 自动 记录 PerformanceNavigationTiming 条 目 。 这 个 对 象 会 捕获 大 量 时 间 戳 ， 用 于 描述 页 面 是 
何 时 以 及 如 何 加 载 的 。 
下 面 的 例子 计算 了 loadqEventStart 和 1loadEventEnd 时 间 戳 之 间 的 差 : 


const [performanceNavigationTimingEntry] = performance.getEntriesByType('navigation'); 




















console.log(performanceNavigationTimingEntry); 
// PerformanceNavigationTiming { 

A connectEnd: 2.259999979287386 

// connectStart: 2.259999979287386 

yy decodedBodySize: 122314 

ZA domComplete: 631.9899999652989 

// domContentLoadedEventEnd: 300.92499998863786 
// domContentLoadedEventStart: 298.8950000144541 
A domInteractive: 298.88499999651685 
// domainLookupEnd: 2.259999979287386 
// domainLookupStart: 2.259999979287386 
ZA duration: 632.819999998901 

wy encodedBodySize: 21107 

// entryType: "navigation" 

X 这 fetchStart: 2.259999979287386 

// initiatorType: "navigation" 

// loadEventEnd: 632.819999998901 

PA loadEventStart: 632.0149999810383 

// name: " https://foo.com " 

// nextHopProtocol: "h2" 

A redirectCount: 0 

类 redirectEnd: 0 

// redirectSstart: 0 

YW requestStart: 7.7099999762140214 

A responseEnd: 130.50999998813495 

4 responseStart: 127.16999999247491 

PsA SecureConnectionStart: 0 

A serverTiming: [] 

p04 startTime: 0 

// transferSize: 21806 

A type: "navigate" 

// unloadEventEnd: 132.73999997181818 
// unloadEventStart: 132.41999997990206 
// workerStart: 0 

// } 











console.log(performanceNavigationTimingEntry.loadEventEnd 一 
performanceNavigationTimingEntry.loadEventStart); 
// 0.805000017862767 


3. Resource Timing API 

Resource Timing API 提供 了 高 精度 时 间 稚 ， 用 于 度量 当前 页 面 加 载 时 请 求 资源 的 速度 。 浏 览 器 会 在 
加 载 资源 时 自动 记录 PerformanceResourceTiming。 这 个 对 象 会 捕获 大 量 时 间 惟 ， 用 于 描述 资源 加 
载 的 速度 。 

下 面 的 例子 计算 了 加 载 一 个 特定 资源 所 花 的 时 间 : 


const performanceResourceTimingEntry = performance.getEntriesByType('resource') [0]; 

















console.log(performanceResourceTimingEntry); 
// PerformanceResourceTiming { 
4 connectEnd: 138.11499997973442 
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// connectSstart: 138.11499997973442 

// decodedBodySize: 33808 

// domainLookupEnd: 138.11499997973442 
// domainLookupStart: 138.11499997973442 
fA duration: 0 

// encodedBodySize: 33808 

/以 entryType: "resource" 

VA fetchStart: 138.11499997973442 

// initiatorType: "link" 

// name: "https://static.foo.com/bar.png", 
/4 nextHopProtocol: "h2" 

// redirectEnd: 0 

// redirectSstart: 0 

// requestStart: 138.11499997973442 

// responseEnd: 138.11499997973442 

A responseStart: 138.11499997973442 
// secureConnectionSstart: 0 

jl serverTiming: [] 

// startTime: 138.11499997973442 

// transferSize: 0 

// workerStart: 0 

// } 








console.log(performanceResourceTimingEntry.responseEnd — 
performanceResourceTimingEntry.requestStart); 
// 493.9600000507198 


通过 计算 并 分 析 不 同时 间 的 差 , 可 以 更 全 面 地 审视 浏览 器 加 载 页 面 的 过 程 , 发 现 可 能 存在 的 性 能 瓶颈 。 
20.11 Web 组 件 


这 里 所 说 的 Web 组 件 指 的 是 一 套用 于 增强 DOM 行为 的 工具 ， 包 括 影子 DOM、 自 定义 
元 素 和 HTML 模板 。 这 一 套 浏览 器 API 特别 混乱 。 
口 并 没有 统一 的 “Web Components” 规 范 : 每 个 Web 组 件 都 在 一 个 不 同 的 规范 中 定义 。 
口 有 些 Web 组 件 如 影子 DOM 和 自 定义 元 素 ， 已 经 出 现 了 向 后 不 兼容 的 版 本 问题 。 
口 浏览 器 实现 极其 不 一 致 。 
由 于 存在 这 些 问 题 , 因此 使 用 Web 组 件 通常 需要 引入 一 个 Web 组 件 库 ， 比 如 Polymer。 这 种 库 可 以 
作为 腻子 和 脚本， 模拟 浏览 器 中 缺失 的 Web 组 件 。 

































































注意 ”本章 只 介绍 Web 组 件 的 最 新 版 本 。 


20.11.1 HTML 模板 


在 Web 组 件 之 前 ， 一 直 缺 少 基于 HTML 解析 构建 DOM 子 树 ， 然 后 在 需要 时 再 把 这 个 子 树 泻 染 出 
来 的 机 制 。 一 种 间接 方案 是 使 用 innerHTML 把 标记 字符 串 转 换 为 DOM 元 素 , 但 这 种 方式 存在 严重 的 
安全 隐患 。 男 一 种 间接 方案 是 使 用 document .createElement () 构建 每 个 元 素 ， 然 后 逐个 把 它们 添加 
到 孤儿 根 节点 (不 是 添加 到 DOM )， 但 这 样 做 特别 麻烦 ， 完 全 与 标记 无 关 。 

相反 ， 更 好 的 方式 是 提前 在 页 面 中 写 出 特殊 标记 ， 让 浏览 器 自动 将 其 解析 为 DOM 子 树 ， 但 跳 过 泻 
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染 。 这 正 是 HTML 模板 的 核心 思想 ， 而 <template> 标 签 正 是 为 这 个 目的 而 生 的 。 下 面 是 一 个 简单 的 
HTML 模板 的 例子 : 


<template id="foo"> 
<p>I'm inside a template!</p> 
</template> 








1. 使 用 DocumentFragment 


在 浏览 器 中 演 染 时 ， 上 面 例子 中 的 文本 不 会 被 演 染 到 页 面 上 。 因 为 <template> 的 内 容 不 属于 活动 
文档 ， 所 以 document .querySelector() 等 DOM 查询 方法 不 会 发 现 其 中 的 <zp> 标 签 。 这 是 因为 <p> 
存在 于 一 个 包含 在 HTML 模板 中 的 DocumentFragment 节点 内 。 

在 浏览 絮 中 通过 开发 者 工具 检查 网 页 内 容 时 ， 可 以 看 到 <template> 中 的 DocumentFragment: 


<template id="foo"> 
#document -fragment 
<p>I'm inside a template!</p> 
</template> 


























通过 <template> 元 素 的 content 属性 可 以 取得 这 个 DocumentFragment 的 引用 : 

console.log(document .querySelector('#foo0o') .content); // #document-fragment 

此 时 的 DocumentFragment 就 像 一 个 对 应 子 树 的 最 小 化 document 对 象 。 换 句 话 说 ， 
DocumentFragment 上 的 DOM 匹配 方法 可 以 查询 其 子 树 中 的 节点 : 


const fragment = document .querySelector('#foo0o') .content; 











console.log(document .querySelector('p')); // null 
console.log (fragment .querySelector('p')); // <p>...<p> 


DocumentFragment 也 是 批量 向 HTML 中 添加 元 素 的 高 效 工 具 。 比 如 ， 我 们 想 以 最 ' 快 的 方式 给 菜 
个 HTML 元 素 添 加 多 个 子 元 素 。 如 果 连 续 调 用 aocument .appendchi1iqd()， 则 不 仅 费 事 , 还 会 导致 多 
次 布局 重 排 。 而 使 用 DocumentFragment 可 以 一 次 性 添加 所 有 子 节 点 ， 最 多 只 会 有 次 布局 重 排 : 


// 开始 状态 : 
// <div id="foo"></div> 




















// 期 待 的 最 终 状 态 : 

// <div id="foo"> 

yh <p></p> 

yp <p></p> 

六 大 <p></p> 

/di 

// 也 可 以 使 用 document .createDocumentFragment () 
const fragment = new DocumentFragment ();} 


const foo = document .querySelector('#foo'); 
// 为 DocumentFragment 添加 子 元 素 不 会 导致 布局 重 排 
fragment .appendChild(document.createElement ('P 
fragment .appendChild(document.createElement ('p 
fragment .appendChild(document.createElement ('p 


console.log(fragment.children.length); // 3 


foo.appendChild (fragment); 
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console.log(fragment.children.length); // 0 


console.log(document .body.innerHTML); 


/7 <div" id="foo"s 
// <p></p> 

// <p></p> 

7% <p></p> 

// </div> 


2. 使 用 <template> 标 签 

















注意 ， 在 前 面 的 例子 


1，DocumentFragment 的 所 有 子 节 点 都 高 效 地 转移 到 了 foo 元 素 上 ， 转 移 











之 后 DocumentFragment 变 空 了 。 同 样 的 过 程 也 可 以 使 用 <template> 标 签 重 现 : 


const fooElement = 


const barTemplate 





document .guerySelector('#foo');} 
document .guerySelector('#bar'); 


const barFragment = barTemplate.content,; 


console.log(document .body.innerHTML); 


/<div id=s"fod"> 
// </div> 


// <template id="bar"> 


// <p></p> 
// <p></p> 
// <p></p> 
// </template> 


fooElement .appendChild (barFragment); 


console.log (document .body.innerHTML); 


// <div id="foo"> 
// <p></p> 

// <p></p> 

// <p></p> 

// </div> 


// <tempate id="bar"></template> 


如 果 想 要 复制 模板 ， 可 以 使 用 importNode () 方 法 克隆 DocumentFragment: 





const fooElement = 


const barTemplate 
const barFragment 





document .guerySelector('#foo');} 
document .guerySelector('#bar'); 


= barTemplate.content; 


console.log(document .body.innerHTML); 


// <div id="foo"> 
// </div> 


// <template id="bar"> 


ZU <p></p> 
$f <p></p> 
Nb/ <p></p> 
// </template> 


fooElement .appendChild(document .importNode (barFragment, true)); 


console.log(document .body.innerHTML); 


A/ <div d= "foo .> 
// <p></p> 
// <p></p> 
// <p></p> 
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// </div> 

// <template id="bar"> 
// <p></p> 

// <p></p> 

// <p></p> 

// </template> 








3. 模板 脚本 

脚本 执行 可 以 推迟 到 将 DocumentFragment 的 内 容 实际 添加 到 DOM 树 。 下 面 的 例子 演示 了 这 个 
过 程 : 

// 页 面 HTML: 

// 


// <div id="foo"></div> 

// <template id="bar"> 

Bh <script>console.log('Template Script executed');</script> 
// </template> 


const fooElement = document .querySelector('#foo'); 
const barTemplate = document .querySelector('#bar'); 
const barFragment = barTemplate.content,; 
console.log('About to add template'); 

fooElement .appendChild(barFragment); 
console.log('Added template'); 


// About to add template 
// Template script executed 
// Added template 


如 果 新 添加 的 元 素 需 要 进行 某 些 初始 化 ， 这 种 延迟 执行 是 有 用 的 。 





20.11.2 影子 DOM 











概念 上 讲 , 影子 DOM ( shadow DOM ) Web 组 件 相 当 直 观 , 通过 它 可 以 将 一 个 完整 的 DOM 树 作为 

















节点 添加 到 父 DOM 树 。 这 样 可 以 实现 DOM 封装 ,意味 着 CSS 样式 和 CSS 选择 符 可 以 限 
子 树 而 不 是 整个 顶级 DOM 树 中 。 








央 在 影子 DOM 


影子 DOM 与 HTML 模板 很 相似 ， 因 为 它们 都 是 类 似 aocument 的 结构 ， 并 允许 与 顶级 DOM 有 一 
定 程 度 的 分 离 。 不 过 ， 影 子 DOM 与 HTML 模板 还 是 有 区 别 的 ， 主 要 表现 在 影子 DOM 的 内 容 会 实际 演 











染 到 页 面 上 ， 而 HTML 模板 的 内 容 不 会 。 


1. 理解 影子 DOM 
假设 有 以 下 HTML 标记 ， 其 中 包含 多 个 类 似 的 DOM 子 树 ， 
<div> 

<p>Make me red!</p> 
</div> 
<div> 

<p>Make me blue!</p> 
</div> 
<div> 

<p>Make me green!</p> 
</div> 























从 其 中 的 文本 节点 可 以 推断 出 ， 这 3 个 DOM 子 树 会 分 别 演 染 为 不 同 的 颜色 。 常 规 情况 下 ,为 了 给 
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每 个 子 树 应 用 唯一 的 样式 ， 又 不 使 用 style 属性 ， 就 需要 给 每 个 子 树 添加 一 个 唯一 的 类 名 ， 然 后 通过 
相应 的 选择 符 为 它们 添加 样式 : 


<div class="red-text"> 
<p>Make me red!</p> 

</div> 

<div class="green-text"> 
<p>Make me green!</p> 

</div> 

<div class="blue-text"> 
<p>Make me blue!</p> 

</div> 




















<style> 

.red-text { 
Color: red; 

} 

.green-text { 
Color: green; 

} 

.blue-text { 
Color: blue; 


} 
</style> 


当然 ， 这 个 方案 也 不 是 十 分 理想 ， 因 为 这 跟 在 全 局 命名 空间 中 定义 变量 没有 太 大 区 别 。 尽 管 知 道 这 
些 样式 与 其 他 地 方 无 关 ， 所 有 CSS 样式 还 会 应 用 到 整个 DOM。 为 此 ， 就 要 保持 CSS 选择 符 足 够 特别 ， 
以 防 这 些 样 式 渗透 到 其 他 地 方 。 但 这 也 仅 是 一 个 折 中 的 办 法 而 已 。 理 想 情 况 下 , 应 该 能 够 把 CSS 限制 在 
使 用 它们 的 DOM 上 : 这 正 是 影子 DOM 最 初 的 使 用 场景 。 


2. 创建 影子 DOM 
考虑 到 安全 及 避免 影子 DOM 冲突， 并 非 所 有 元 素 都 可 以 包含 影子 DOM。 尝 试 给 无 效 元 素 或 者 已 
经 有 了 影子 DOM 的 元 素 添加 影子 DOM 会 导致 抛 出 错误 。 
以 下 是 可 以 容纳 影子 DOM 的 元 素 。 
口 任何 以 有 效 名 称 创建 的 自 定义 元 素 (参见 HTML 规范 中 相关 的 定义 ) 
D <article> 
口 <aside> 
D <blockquote> 
D <body> 
D <div> 
D <footer> 
D <h1> 
D <h2> 
D <h3> 
D <h4> 
D <h5> 
D <h6> 
D <header> 
D <main> 




































































D <nav> 
D <p> 
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口 <section> 
口 <span> 


影子 DOM 是 通过 attachshadow() 方 法 创建 并 添加 给 有 效 HTML 元 素 的 。 容纳 影子 DOM 的 元 素 
被 称 为 影子 宿主 ( shadow host )。 影 子 DOM 的 根 节 点 被 称 为 影子 根 ( shadow root )。 

attachSshadovw() 方 法 需要 一 个 shaqowRootInit 对 象 ,返回 影子 DOM 的 实例 ,snadowRootInit 
对 象 必 须 包 含 一 个 moge 属性 ， nt 对 "open" 影 子 DOM 的 引用 可 以 通过 shadowRoot 
属性 在 HTML 元 素 上 获得 ， 而 对 "closed" 影 子 DOM 的 引用 无 法 这 样 获取 。 

下 面 的 代码 演示 了 不 同 mode 的 区 别 : 


document .body.innerHTML = 、 
«div id="fO0></ Qi 
<div id="bar"></div> 






































’ 


const foo 
const bar 


= document .querySelector('#foo'); 

= document .querySelector('#bar'); 

const openShadowDOM = foo.attachShadow({ mode: 'open' });，; 
const closedShadowDOM = bar.attachShadow({ mode: 'closed' }); 





console.log (openShadowDOM); // #shadow-root (open) 
console.log(closedShadowDOM); // #shadow-root (closed) 


console.log(foo.shadowRoot); // #shadow-root (open) 
console.log(bar.shadowRoot); // null 


一 般 来 说 ， 需 要 创建 保密 (closed ) 最 影子 DOM 的 场景 很 少 。 虽 然 这 可 以 限制 通过 影子 宿主 访问 影 
子 DOM， 但 恶意 代码 有 很 多 方法 绕 过 这 个 限制 ， 恢 复 对 影子 DOM 的 访问 。 简 言 之 ， 不 能 为 了 安全 而 
创建 保密 影子 DOM。 











注意 ”如果 想 保 护 独 立 的 DOM 树 不 受 未 信任 代码 影响 ， 影 子 DOM 并 不 适合 这 


对 <iframe> 施 加 的 跨 源 限制 更 可 靠 。 





3. 使 用 影子 DOM 
把 影子 DOM 添加 到 元 素 之 后 ,可 以 像 使 用 常规 DOM 一 样 使 用 影子 DOM。 来 看 下 面 的 例子 , 这 里 
重新 创建 了 前 面 红 / 绿 / 蓝 子 树 的 示例 : 


for (let color of ['red', 'green', 'blue']) { 
const div = document.createElement ('div'); 
const shadowDOM = div.attachShadow({ mode: 'open' }); 




















document .body .appendChild(div); 
shadowDOM.innerHTML = 、 
<p>Make me S${color}</p> 


<style> 
pl 
color: S${color}; 
} 
</style> 


’ 
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中 
=y 





子 DOM 上 。 为 此 ，3 个 <p> 元 素 会 出 现 3 种 不 同 的 颜色 。 
可 以 这 样 验证 这 些 元 素 分 别 位 于 它们 自己 的 影子 DOM 中 : 


for (let color of ['red', 'green', 'blue']) { 
const div = document .createElement ('div'); 
const shadowDOM = div.attachShadow({ mode: 'open' }); 














document .body .appendChild(div); 


shadowDOM.innerHTML = 、 
<p>Make me S${color}</p> 


<style> 
ot 
color: S${color}; 
} 
</style> 


} 


function countP(node) { 
console.log(node.querySelectorAll('p').length); 
} 


countP(document); // 0 


for (let element of document .querySelectorAll('div')) { 
countP (element .shadowRoot); 


} 


// 1 
// 1 
// 1 


在 浏览 器 开发 者 工具 中 可 以 更 清楚 地 看 到 影子 DOM。 例 如， 前 面 的 例子 在 浏览 器 检查 窗口 中 
<body> 
<div> 
#shadow-root (open) 
<p>Make me red!</p> 
<style> 
pl 
Color: red; 
} 
</style> 
</div> 
<div> 
#shadow-root (open) 
<p>Make me green!</p> 




















人 





<style> 
ot 
Color: green; 


} 
</style> 


类 这 里 使 用 相同 的 选择 符 应 用 了 3 种 不 同 的 颜色 , 但 每 个 选择 符 只 会 把 样式 应 用 到 它们 所 在 的 影 
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</div> 
<div> 
#shadow-root (open) 
<p>Make me blue!</p> 


<style> 
这 :并 
color: blue; 
} 
</style> 
</div> 
</body> 


影子 DOM 并 非 铁 板 一 块 。HTML 元 素 可 以 在 DOM 树 间 无 限制 移动 : 


document .body.innerHTML = 、 
<div></div> 
<p id="foo">Move me</p> 





’ 


const divElement = document .querySelector('div'); 
const pElement = document .querySelector('p'); 


const shadowDOM = divElement.attachShadow({ mode: 'open' }); 





// 从 父 DOM 中 移 除 元 素 
divElement .parentElement .removeChild(pElement); 


// 把 元 素 添加 到 影子 DOM 
shadowDOM.appendChild(pElement); 


// 检查 元 素 是 否 移动 到 了 影子 DOM 中 
console.log(shadowDOM.innerHTML); // <p id="foo">Move me</p> 


4. 合成 与 影子 DOM 槽 位 

影子 DOM 是 为 自 定 义 Web 组 件 设 计 的 ， 为 此 需要 支持 般 套 DOM 片段 。 从 概念 上 讲 ， 可 以 这 么 说 : 
位 于 影子 宿主 中 的 HTML 需要 一 种 机 制 以 泻 染 到 影子 DOM 中 去 ,但 这 些 HTML 又 不 必 属 于 影子 DOM 树 。 
默认 情况 下 ， 符 套 内 容 会 隐藏 。 来 看 下 面 的 例子 ， 其 中 的 文本 在 1000 毫秒 后 会 被 隐藏 


document .bodqy . innerHTML = 、 
<div> 

<p>Foo</p> 
</div> 


























setTimeout(() => document .querySelector('div') .attachShadow({ mode: 'open' }), 1000); 


影子 DOM 一 添加 到 元 素 中 , 浏览 带 就 会 赋予 它 最 高 优先 级 , 优先 演 染 它 的 内 容 而 不 是 原来 的 文本 。 
在 这 个 例子 中 ， 由 于 影子 DOM 是 空 的 ， 因 此 <aiv> 会 在 1000 毫秒 后 变 成 空 的 。 

0 需要 使 用 <slot> 标 签 指示 浏览 器 在 哪里 放置 原来 的 HTML。 下 面 的 代码 修改 
了 前 面 的 例子 ， 宿主 中 的 文本 出 现在 了 影子 DOM 中 : 


document .bodqy . innerHTML = 、 
<divy id= "fo0O" 

<p>Foo</p> 
</div> 


























’ 
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document .querySelector('div') 
.attachShadow({ mode: 'open' 
.innerHTML <div id="bar"> 
<slot></slot> 
<div>. 


} 








2 


现在 ， 投 射 进 


的 内 容 就 像 自己 存在 于 影子 DOM 中 一 样 。 检 查 页 1 





j 会 发 现 原来 的 内 容 实际 上 替代 











了 <slot>: 


<body> 
<div id="foo"> 
#shadow-root (open) 
div Ld="Dat .> 
<P>Eoo</P> 

</div> 

</div> 

</body> 


注意 ， 虽 然 在 页 画 





i 检查 窗口 中 看 到 内 容 在 影子 DOM 中 ,但 这 实际 上 
实际 的 元 素 仍然 处 于 外 部 DOM 中 : 
document .body .innerHTML 
<div id="foo"> 


<P>Eoo</P> 
</div> 











了 


document .querySelector('div') 
.attachShadow({ mode: 'open' 
.innerHTML 
<div id="bar"> 
<slot></slot> 
</div>. 


} 


console.log(document .querySelector('p') .parentElement); 
// <div id="foo"></div> 


下 面 是 使 用 槽 位 ( slot ) 改写 的 前 面 红 / 绿 / 蓝 子 树 的 例子 : 


for (let color of ['red', 'green', 'blue']) { 
const divElement document .createElement ('div'); 
divElement.innerText ‘Make me Sf{tcolor) 
document .body .appendChild(divElement) 




















] 
三 





divElement 
.attachShadow({ mode: 
.innerHTML 
<p><slot></slot></p> 


} 


'Open' 




















<style> 
ot 
GOLOF: SS {GOLOr}: 
} 
</style> 
, ; 
除了 默认 槽 位 ， 还 可 以 使 用 命名 模 位 (named slot ) 实现 多 个 投射 


口 


2 


是 DOM 内 容 的 投射 ( projection )。 


ot 


J 




















过 匹配 的 slot /name 属 








。 这 是 
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性 对 实现 的 。 带 有 slot="foo" 
示 了 如 何 改变 影子 宿主 子 元 素 的 泻 染 顺序 : 


之 不 /人 
document .body .innerHTML 
<div> 

<p slot="foo0o">Foo</p> 
<p slot="bar">Bar</p> 
</div> 








document .querySelector('div') 
.attachShadow({ mode: 'open' 
.innerHTML 
<slot name="bar"></slot> 
<slot name="foo"></slot> 


}) 


// Renders: 
// Bar 
// Foo 


5. 事件 重 定向 
如 果 影 子 DOM 中 发 生 了 浏览 器 事 件 ( 如 cl 


不 过 ,实现 也 必须 考虑 影子 DOM 的 边界 ,为 此 ,事件 会 逃 出 





属性 的 元 素 会 被 投射 到 带 有 name="foo" 的 <slot> 上 。 下 面 的 例子 演 





ick ), 那 么 浏览 器 需要 一 种 方式 以 让 父 


roast EN 


DOM 并 经 过 事件 重 定向 ( event retarget ) 





= Pr 
永 乡 





在 外 部 被 处 理 。 逃 出 后 , 事件 就 好 像 是 由 影 
示 了 这 个 过 程 : 
// 创建 一 个 元 素 作 为 影子 宿主 


document .body.innerHTML = 、 
<QiV Cncnick= "ednsoles og 





// 添加 影子 DOM 并 向 其 中 插入 HTML 

document .querySelector('div') 
‘attachShadow({ mode: 'open' 
.innerHTML 

<button onclick="console.log(' 


}) 


// 点 击 按钮 时 : 
// Handled inside: <button onclick=".. 
// Handled outside: <div onclick=".. 


宿主 本 身 而 非 真正 的 包装 元 素 触 发 的 一 样 


'Handled outside:', 


Handled inside:', 





。 下面 的 代码 演 





event .target)"></div> 


event .target)">Foo</button> 


."></button> 


."></div> 











意 , 事件 重 定向 只 会 发 生 在 影子 DOM 中 实际 存在 的 元 素 上 。 使 





i 会 发 生 事件 重 定 向 ， 因 为 从 技术 上 讲 


20.11.3” 自 定义 元 素 
如 果 你 使 用 JavaScript 框架 ， 那 么 很 可 能 熟悉 























j<slot> 标 签 从 外 部 投射 进来 的 








， 这 些 元 素 仍 然 存在 于 影子 DOM 外 部 。 


自 定义 元 素 的 概念 。 这 是 因为 所 有 主流 框架 都 以 某 种 








形式 提供 了 


这 个 特性 。 自 定义 元 素 为 HTML 元 素 引 入 了 








ji 向 对 象 编程 的 风格 。 基 于 这 种 风格 ， 可 以 创 








建 自 定 义 的 、 复 杂 的 和 可 重用 的 元 素 ， 而 且 只 要 使 用 简单 的 HTML 标签 或 属性 就 可 以 创建 相应 的 实例 。 


1. 创建 自 正信 元 于 
浏览 器 会 尝试 将 无 法 识别 的 元 素 作为 通 




















元素 整合 进 DOM。 当 然 ， 这 些 元 素 默 认 也 不 会 做 任何 通 


658 第 20 章 JavaScript API 








用 HTML 元 素 不 能 做 的 事 。 来 看 下 面 的 例子 ,其 中 胡乱 编 的 HTML 标签 会 变 成 一 个 HTMLElement 实例 : 


document .bodqy . innerHTML = 、 
<x-foo >I'm inside a nonsense element.</x-foo > 














console.log(document .querySelector('x-foo') instanceof HTMLElement); // true 


自 定义 元 素 在 此 基础 上 更 进一步 。 利 用 自 定义 元 素 , 可 以 在 <x-foo> 标 签 出 现时 为 它 定义 复杂 的 行 
为 ,同样 也 可 以 在 DOM 中 将 其 纳入 元 素 生 命 周 期 管理 。 自 定义 元 素 要 使 用 全 局 属性 customElements， 
这 个 属性 会 返回 customElementRegistry 对 象 。 

















console.log(customElements); // CustomElementRegistry {} 
调用 customElements.define() 方 法 可 以 创建 自 定 义 元 素 。 下 面 的 代码 创建 了 一 个 简单 的 自 定 
义 元 素 ， 这 个 元 素 继 承 HTMLElement: 


class FooElement extends HTMLElement {} 
customElements.define('x-foo', FooElement); 











document .body.innerHTML = 、 
<x-foo >I'm inside a nonsense element .</x-foo > 


’ 


console.log(document .querySelector('x-foo') instanceof FooElement); // true 


注意 ” 自 定义 元 素 名 必须 至 少 包 含 一 个 不 在 名 称 开 头 和 末尾 的 连 字 符 , 而且 元 素 标签 不 能 


自 关闭 。 





自 定义 元 素 的 威力 源 自 类 定义 。 例 如 ， 可 以 通过 调用 自 定义 元 素 的 构造 函数 来 控制 这 个 类 在 DOM 
中 每 个 实例 的 行为 : 


class FooElement extends HTMLElement { 
constructor() { 
super (); 
console.log('x-foo') 
} 
} 


customElements.define('x-foo', FooElement); 


document .body.innerHTML = 、 
<x-foo></x-foo> 
<x-foo></x-foo> 
<x-foo></x-foo> 


’ 


// x-foo 
// x-foo 
// x-foo 


注意 在 自 定义 元 素 的 构造 函数 中 必须 始终 先 调 用 super () 。 如 果 元 素 继承 了 HIMLElement 
或 相似 类 型 而 不 会 履 盖 构造 函数 , 则 没有 必要 调用 super () ,因为 原型 构造 函数 默认 会 做 





这 件 事 。 很 少 有 创建 自 定义 元 素 而 不 继承 HTMLElement 的 。 
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如 果 自 定义 元 素 继承 了 一 个 元 素 类 ,那么 可 以 使 用 is 属性 和 extengs 选项 将 标签 指定 为 该 自 定义 
元 素 的 实例 : 


class FooElement extends HTMLDivElement { 
constructor() { 
super (); 
console.log('x-foo') 
} 
} 


customElements.define('x-foo', FooElement, { extends: 'div' }); 





document .body.innerHTML = 、 
<div is="x-foo"></div> 
<div is="x-foo"></div> 
<div is="x-foo"></div> 


’ 


// X-foo 
/XR-£66 
le 


2. 添加 Web 组 件 内 容 
因为 每 次 将 自 定 义 元 素 添 加 到 DOM 中 都 会 调用 其 类 构造 函数 ， 所 以 很 容易 自动 给 自 定义 元 素 添加 20 

子 DOM 内 容 。 虽然 不 能 在 构造 函数 中 添加 子 DOM (会 抛 出 DOMException )， 但 可 以 为 自 定义 元 素 添 
加 影子 DOM 并 将 内 容 添 加 到 这 个 影子 DOM 中 : 


Class FooElement extends HTMLElement { 
constructor() { 
super (); 




















// this 引用 Web 组 件 节 点 
this.attachShadow({ mode: 'open' }); 


this.shadowRoot.innerHTML = 、 
<p>I'm inside a custom element!</p> 
} 
} 


customElements.define('x-foo', FooElement); 
document .body.innerHTML += “<x-foo></x-foo.; 


// 结果 DOM: 

// <body> 

// <X-foo> 

// #shadow-root (open) 

// <p>I'm inside a custom element!</p> 
// <X-foo> 

// </body> 


为 避免 字符 串 模板 和 ijnnerHTML 不 干净， 可 以 使 用 HTML 模板 和 document .createElement () 
重 构 这 个 例子 

// (初始 的 HTML) 

// <template id="x-foo-tpl"> 

// <p>I'm inside a custom element template!</p> 

// </template> 
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const template = document .querySelector('#x-foo-tpl'); 


class FooElement extends HTMLElement { 
constructor() { 
super (); 


this.attachShadow({ mode: 'open' }); 


this .shadowRoot .appendChild(template.content.cloneNode (true)); 
} 
} 


customElements.define('x-foo', FooElement); 
document .body.innerHTML += <x-foo></x-foo.; 


// 结果 DOM: 

// <body> 

// <template id="x-foo-tpl"> 

// <p>I'm inside a custom element template!</p> 
// </template> 

/REO 

// #shadow-root (open) 

// <p>I'm inside a custom element template!</p> 
// <x-foo> 

// </body> 


这 样 可 以 在 自 定义 元 素 中 实现 高 度 的 HTML 和 代码 重用 , 以 及 DOM 封装 。 使 用 这 种 模式 能 够 自由 
创建 可 重用 的 组 件 而 不 必 担 心 外 部 CSS 污染 组 件 的 样式 。 

3. 使 用 自 定义 元 素 生 命 周 期 方法 

可 以 在 自 定义 元 素 的 不 同 生 命 周期 执行 代码 。 带 有 相应 名 称 的 自 定 义 元 素 类 的 实例 方法 会 在 不 同 生 
命 周期 阶段 被 调用 。 自 定义 元 素 有 以 下 5 个 生命 周期 方法 。 
口 constructor () : 在 创建 元 素 实例 或 将 已 有 DOM 元 素 升 级 为 自 定义 元 素 时 调用 。 
口 connecteqcallback() : 在 每 次 将 这 个 自 定义 元 素 实例 添加 到 DOM 中 时 调用 。 
Daisconnecteqcallback() : 在 每 次 将 这 个 自 定 义 元 素 实例 从 DOM 中 移 除 时 调用 。 
D attributechangedcallback() : 在 每 次 可 观察 属性 的 值 发 生变 化 时 调用 。 在 元 素 实例 初始 化 
时 ， 初 始 值 的 定义 也 算 一 次 变化 。 
口 adoptedCallback(): 在 通过 document .adoptNode () 将 这 个 自 定 义 元 素 实 例 移动 到 新 文档 

对 象 时 调用 。 

下 面 的 例子 演示 了 这 些 构建 、 连 接 和 上 断 开 连接 的 回调 : 


class FooElement extends HTMLElement { 
constructor() { 
super (); 
console.log('ctor');} 


. 









































































































































connectedCallback() { 
console.log('connected'); 


} 


disconnectedCallback() { 
console.log('disconnected'); 


} 
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} 


customElements.define('x-foo', FooElement); 


const fooElement = document .createElement ('x-foo'); 
// ctor 


document .body .appendChild(fooElement); 
// connected 


document .body .removeChild(fooElement); 
// disconnected 


4. 反射 自 定义 元 素 属性 
自 定义 元 素 既 是 DOM 实体 又 是 JavaScript 对 象 ， 因 此 两 者 之 间 应 该 同步 变化 。 换 句 话 说， 对 DOM 
的 修改 应 该 反映 到 JavaScript 对 象 ， 反 之 亦 然 。 要 从 JavaScript 对 象 反 射 到 DOM， 常 见 的 方式 是 使 用 获 
取 函 数 和 设置 函数 。 下 面 的 例子 演示 了 在 JavaScript 对 象 和 DOM 之 间 反 射 bar 属性 的 过 程 : 


document .bodqy . innerHTML = “<X-foo></Xx-foo> 、: 















































Class FooElement extends HTMLElement { 
constructor() { 
super (); 





this.bar = true; 


} 


get bar() { 
return this.getAttribute('bar'); 
} 


set bar(value) { 
this.setAttribute('bar', value) 
} 
} 


customElements.define('x-foo', FooElement); 


console.log(document .body.innerHTML); 
// <x-foo bar="true"></x-foo> 


男 一 个 方向 的 反射 (从 DOM 到 JavaScript 对 象 ) 需要 给 相应 的 属性 添加 监听 器 。 为 此 ， 可 以 使 用 
observedqAtttributes () 获 取 函 数 让 自 定义 元 素 的 属性 值 每 次 改变 时 都 调用 attributechanged- 
Callback() : 


Class FooElement extends HTMLElement { 
static get observedAttributes() { 
// 返回 应 该 触发 attributechangedCcallback() 执 行 的 属性 
return ['bar']; 


} 


























get bar() { 
return this.getAttribute('bar'); 


} 


Set bar(value) { 
this.setAttribute('bar', value) 


} 
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attributeChangedCallback (name，oldvalue，newvVvalue) { 
if (oldvalue !== newValue) { 
console.log(‘${oldValue} -> ${newValue}. ); 


this[name] = newValue; 
} 
} 
} 


customElements.define('x-foo', FooElement); 


document .body.innerHTML = “<x-foo bar="false"></x-foo>; 
// null -> false 


document .querySelector('x-foo') .setAttribute('bar', true); 
// false -> true 


5. 升级 自 定义 元 素 
并 非 始终 可 以 先 定义 自 定 义 元 素 ， 然 后 再 在 DOM 中 使 用 相应 的 元 素 标签 。 为 解决 这 个 先后 次 序 问 
题 ，Web 组 件 在 customElementRegistry 上 额外 暴露 了 一 些 方法 。 这 些 方法 可 以 用 来 检测 自 定义 元 
素 是 否定 义 完成 ， 然 后 可 以 用 它 来 升级 已 有 元 素 。 
如 果 自 定义 元 素 已 经 有 定义 ， 那么 customElementRegisttry.get() 方 法 会 返回 相应 自 定义 元 素 
类 。 类 似 地 ，customElementRegistry .whenDefined() 方 法 会 返回 一 个 期 约 ， 当 相应 自 定义 元 素 
有 定义 之 后 解决 : 


customElements.whenDefined('x-foo').then(() => console.log('defined!')); 



































console.log(customElements.get('x-foo')); 
// undefined 


customElements.define('x-foo', class {}); 
// defined! 


console.log(customElements.get('x-foo')); 
// class FooElement {} 


连接 到 DOM 的 元 素 在 自 定义 元 素 有 定义 时 会 自动 升级 。 如 果 想 在 元 素 连 接 到 DOM 之 前 强制 升级 ， 
可 以 使 用 customElementRegistry.upgrade() 方 法 : 


// 在 自 定 义 元 素 有 定义 之 前 会 创建 HTMLUnknownElement 对 象 
const fooElement = qocument .createElement ('x-foo'); 
































// 创建 自 定义 元 素 
class FooElement extends HTMLElement {} 
customElements.define('x-foo', FooElement); 


console.log(fooElement instanceof FooElement); // false 


// 强制 升级 


customElements.upgrade (fooElement); 


console.log(fooElement instanceof FooElement); // true 


I 区 


还 有 一 个 HTML Imports Web 组 件 ， 但 这 个 规范 目前 还 是 草案 ,没有 主要 浏览 器 支 


最 终 是 否 会 支持 这 个 规范 目前 还 是 未 知 数 。 





20.12 Web Cryptography API 663 





20.12 Web Cryptography API 


Web Cryptography API 描述 了 一 套 密码 学 工具 ,规范 了 JavaScript 如 何以 安全 和 符合 惯例 的 方式 实现 
加 密 。 这 些 工具 包括 生成 、 使 用 和 应 用 加 密 密 钥 对 ， 加 密 和 解密 消息 ， 以 及 可 靠 地 生成 随机 数 。 








注意 加密 接口 的 组 织 方 式 有 点 奇怪 ,其 外 部 是 一 个 Crypto 对 象 ,内 部 是 一 个 Suptlecrypto 


对 象 。 在 Web Cryptography API 标准 化 之 前 ，window.crypto 属性 在 不 同 浏览 器 中 的 实 
现 差 异 非常 大 。 为 实现 跨 浏览 器 兼容 ， 标 准 API 都 暴露 在 SubtleCrypto 对 象 上 。 





20.12.1 生成 随机 数 


在 需要 生成 随机 值 时 ， 很 多 人 会 使 用 Math .random()。 这 个 方法 在 浏览 器 中 是 以 盆 随 机 数 生成 器 
( PRNG, PseudoRandom Number Generator ) 方式 实现 的 。 所谓“ 伪 ” 指 的 是 生成 值 的 过 程 不 是 真 的 随机 。 
E 成 的 值 只 是 模拟 了 随机 的 特性 。 浏览 器 的 PRNG 并 未 使 用 真正 的 随机 源 ， 只 是 对 一 个 内 部 状态 


PRNG 





应 用 了 固定 的 算法 。 每 次 调 
为 一 个 新 的 随机 值 。 例 如 ，V8 引擎 使 





由 于 算法 本 身 是 固定 的 ， 其 输入 只 是 之 前 的 状态 ， 因 此 随机 数 顺序 也 是 确 
128 位 内 部 状态 ， 而 算法 的 设计 让 任何 初始 状态 在 重复 自身 之 前 都 会 产生 2 































































































用 Math.zrandom() ， 这 个 内 部 状态 都 会 被 一 个 算法 修改 ， 而 结果 会 被 转换 
用 了 一 个 名 为 xorshift128+ 的 算法 来 执行 这 种 修改 。 









































定 的 。xorshift128+ 使 用 








“1 个 伪 随 机 值 。 这 种 循环 


被 称 为 置换 循环 (permnutation cycle )， 而 这 个 循环 的 长 度 被 称 为 一 个 周期 (period )。 很 明显 ， 如 果 攻 击 


者 知道 PRNG 的 内 部 状态 , 就 可 以 预测 后 续 生 成 的 伪 随 机 值 。 如 果 开 发 者 无 意 




















密 钥 用 于 加 密 ， 则 攻击 者 就 可 以 利用 PRNG 的 这 个 特性 算出 私有 密 钥 。 


伪 随 机 数 生成 器 主要 用 于 快速 计算 出 看 起 来 随机 的 值 。 不 过 并 不 适合 




















1 使 用 PRNG 生成 了 私有 


用 于 加 密 计算 。 为 解决 这 个 问 


题 ， 密 码 学 安全 伪 随 机 数 生成 器 ( CSPRNG ，Cryptographically Secure PseudoRandom Number Generator ) 
额外 增加 了 一 个 箭 作 为 输入 ， 例 如 测试 硬件 时 间或 其 他 无 法 预计 行为 的 系统 特性 。 这 样 一 来 ， 计 算 速 度 








位 填充 。 











下 本 








i 的 例子 展示 了 生成 5 个 8 位 随机 值 : 








const array = new Uint8Array (1); 


for (let i=0; i<5; ++i) { 
console.log(crypto.getRandomValues (array)); 


Uint8Array 
Uint8Array 


[41] 

[ 
Uint8Array [ 
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4 
250] 
SL] 
129] 
59 


Uint8Array 
Uint8Array 











明显 比 常规 PRNG 慢 很 多 ,但 CSPRNG 生成 的 值 就 很 难 预测 ， 可 以 用 于 加 密 了 。 
Web Cryptography API 引 入 了 CSPRNG ， 这 个 CSPRNG 可 以 通过 crypto.getRandomValues () 在 全 
局 crypto 对 象 上 访问 。 与 Math.random() 返 回 一 个 介 于 0 和 1 之 间 的 浮 点 数 不 同 , getRandomValues () 


会 把 随机 值 写 入 作为 参数 传 给 它 的 定型 数组 。 定 型 数组 的 类 不 重要 ,因为 底层 缓冲 区 会 被 随机 的 二 进 制 


getRandomValues () 最 多 可 以 生成 25 (65 536 ) 字 节 ， 超 出 则 会 抛 出 错误 : 
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const fooArray = new Uint8Array (2 ** 16) 


console.log(window.crypto.getRandomValues (fooArray)); // Uint32Array (16384) [...] 


const barArray = new Uint8Array ((2 ** 16) + 1); 
console.log(window.crypto.getRandomValues (barArray)); // Error 





要 使 用 CSPRNG 重新 实现 Math.random()， 可 以 通过 生成 一 个 随机 的 32 位 数值 ， 然 后 用 它 去 除 


最 大 的 可 能 值 0xFFFFFFFF。 这 样 就 会 得 到 一 个 介 于 0 和 1 之 间 的 值 : 


function randomFloat() { 
// 生成 32 位 随机 值 


const fooArray = new Uint32Array (1); 








// 最 大 值 是 2^32 -1 
const maxUint32 = OxFFFFFFFF; 


// 用 最 大 可 能 的 值 来 除 
return crypto.getRandomValues (fooArray) [0] / maxUint32; 


} 


console.log(randomFloat ()); // 0.5033651619458955 


20.12.2 使 用 subtlecrypto 对 象 


Web Cryptography API 重头 特性 都 暴露 在 了 suptlecrypto 对 象 上 ， 可 以 通过 window.crypto. 


subtle 访问 : 

console.log(crypto.subtle); // SubtleCrypto {} 

这 个 对 象 包含 一 组 方法 ， 用 于 执行 常见 的 密码 学 功能 ， 如 加 密 、 散 列 、 签 名 和 4 
密码 学 操作 都 在 原始 二 进 制 数据 上 执行 ， 所 以 Suptlecrypto 的 每 个 方法 都 要 用 至 
ArrayBufferView 类 型 。 由 于 字符 串 是 密码 学 操作 的 重要 应 用 场景 ， 此 
TextDecoder 是 经 常 与 Subtlecrypto 一 起 使 用 的 类 ,用 于 实现 二 进 制 数据 与 字符 























E 成 密 钥 。 因 为 所 有 


中 ArrayBuffer 和 








TextEncoder 和 


串 之 间 的 相互 转换 。 





注意 subtleCrypto 对 象 只 能 在 安全 上 下 文 ( https ) 中 使 用 。 在 不 安全 的 上 下 文中 ， 


subtle 属性 是 undefined。 





1. 生成 密码 学 摘要 




















计算 数据 的 密码 学 摘要 是 非常 常用 的 密码 学 操作 。 这 个 规范 支持 4 种 摘要 算法 : SHA-1 和 3 种 





SHA-2。 














160 位 消息 散 列 。 由 于 容易 受到 碰撞 攻击 ， 这 个 算法 已 经 不 再 安全 。 
































范 支持 其 中 3 种 : SHA-256、SHA-384 和 SHA-512。 生 成 的 消息 摘要 可 以 是 


口 SHA-1 (Secure Hash Algorithm 1): 架构 类 似 MD5 的 散 列 函数 。 接 收 任意 大 小 的 输入 ， 生 成 


口 SHA-2 (Secure Hash Algorithm 2): 构建 于 相同 耐 碰撞 单 向 压缩 函数 之 上 的 一 套 散 列 函 数 。 规 


256 位 (SHA-256 )、 


384 位 (SHA-384 ) 或 512 位 (SHA-512 )。 这 个 算法 被 认为 是 安全 的 , 广泛 应 用 于 很 多 领域 和 协 


议 , 包括 TLS、PGP 和 加 密 货币 〈 如 比特 币 )。 


























Subtlecrypto.digest () 方 法 用 于 生成 消息 摘要 。 要 使 用 的 散 列 算法 通过 字符 串 "SHA-1"、 
"SHA-256"、"SHA-384" 或 "SHA-512" 指 定 。 下 面 的 代码 展示 了 一 个 使 用 SHA-256 为 字符 串 "foo" 生 
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成 消息 摘要 的 例子 : 


(async function() { 
const textEncoder = new TextEncoder () ; 
const message = textEncoder.encode('foo'); 
Const messageDigest = await crypto.subtle.digest('SHA-256', message); 


console.log (new Uint32Array (messageDigest)); 
(es 


// Uint32Array(8) [1806968364, 2412183400, 1011194873, 876687389, 
// 1882014227, 2696905572, 2287897337, 2934400610] 


通常 ,在 使 用 时 ,二 进 制 的 消息 摘要 会 转换 为 十 六 进 制 字符 串 格式 。 通 过 将 二 进 制 数据 按 8 位 进行 
分 割 ， 然 后 再 调用 toString(16) 就 可 以 把 任何 数组 缓冲 区 转换 为 十 六 进 制 字符 串 : 


(async function() { 
const textEncoder = new TextEncoder () ; 
const message = textEncoder.encode('foo'); 
const messageDigest = await crypto.subtle.digest('SHA-256', message); 
































const hexDigest = Array.from(new Uint8Array (messageDigest)) 
.map((x) => x.toString(16) .padStart (2, '0')) 
.join(''); 





console.1log (hexDigest); 
}) (7 


// 2c26b46b68ffc68ff99b453c1d30413413422d706483bfa0f98a5e886266e7ae 

软件 公司 通常 会 公开 自己 软件 二 进 制 安装 包 的 摘要 , 以 便 用 户 验证 自己 下 载 到 的 确实 是 该 公司 发 布 
的 版 本 ( 而 不 是 被 恶意 软件 算 改 过 的 版 本 )。 下 面 的 例子 演示 了 下 载 Firefox v67.0， 通 过 SHA-512 计算 
其 散 列 ， 再 下载 其 SHA-512 二 进 制 验 证 摘要 ， 最 后 检查 两 个 十 六 进 制 字符 串 匹 配 : 


(async function() { 
const mozillaCdnUrl = '// download- 
origin.cdn.mozilla.net/pub/firefox/releases/67.0 /'; 
const firefoxBinaryFilename = 'linux-x86_64/en-US/firefox-67.0.tar.bz2'; 
const firefoxShaFilename = 'SHA512SUMS'; 


























console.log('Fetching Firefox binary...'); 
const fileArrayBuffer = await (await fetch(mozillaCdnUr]l + firefoxBinaryFilename)) 
.arrayBuffer(); 


console.log('Calculating Firefox digest...'); 
const firefoxBinaryDigest = await crypto.subtle.digest('SHA-512', fileArrayBuffer); 
const firefoxHexDigest = Array.from(new Uint8Array (firefoxBinaryDigest)) 

.map((x) => x.toString(16) .padqStart (2, '0')) 

:OL 





console.log('Fetching published binary digests...'); 

// SHA 文件 包含 此 次 发 布 的 所 有 Firefox 二 进 制 文件 的 摘要 ， 

// 因此 要 根据 其 格式 进 制 拆 分 

const shaPairs = (await (await fetch(mozillaCdnUr]l + firefoxShaFilename)) .text()) 
.Split(/\n/) .map((X) => x.split(/\s+/)); 


let verified = false; 
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console.log('Checking calculated digest against published digests...'); 
for (const [sha, filename] of shaPairs) { 
if (filename === firefoxBinaryFilename) { 
if (sha === firefoxHexDigest) { 
verified = true; 
break; 
} 
} 
} 


console.log('Verified:', verified); 


}) 0); 


// Fetching Firefox binary... 

// Calculating Firefox digest... 

// Fetching published binary digests... 

// Checking calculated digest against published digests... 
// Verified: true 


2. cryptoKey 与 算法 
如 果 没 了 密 钥 ， 那 密码 学 也 就 没什么 意义 了 。Subtlecrypto 对 象 使 用 cryptoKey 类 的 实例 来 生 

成 密 钥 。cryptoKey 类 支持 多 种 加 密 算法 ， 允 许 控 制 密 钥 抽取 和 使 用 。 

CryptoKey 类 支持 以 下 算法 ， 按 各 自 的 父 密码 系统 归 类 。 

口 RSA (Rivest-Shamir-Adleman): 公 钥 密码 系统 ， 使 用 两 个 大 素数 获得 一 对 公 钥 和 私 钥 ， 可 用 

于 签名 /验证 或 加 密 /解密 消息 。RSA 的 陷 门 函数 被 称 为 分 解难 题 ( factoring problem )。 

口 RSASSA-PKCS1-v1_5: RSA 的 一 个 应 用 ,用 于 使 用 私 钥 给 消息 签名 ,允许 使 用 公 钥 验证 签名 。 
图 SSA ( Signature Schemes with Appendix )， 表 示 算 法 支持 签名 生成 和 验证 操作 。 

加 PKCS1( Public-Key Cryptography Standards #1 ), 表示 算法 展示 出 的 RSA 密 钥 必需 的 数学 特性 。 
加 RSASSA-PKCS1-v1_5 是 确定 性 的 ， 意 味 着 同样 的 消息 和 密 钥 每 次 都 会 生成 相同 的 签名 。 
口 RSA-PSS: RSA 的 另 一 个 应 用 ， 用 于 签名 和 验证 消息 。 
图 PSS ( Probabilistic Signature Scheme )， 表 示 生 成 签名 时 会 加 盐 以 得 到 随机 签名 。 
国 与 RSASSA-PKCS1-v1 5 不同 ,同样 的 消息 和 密 钥 每 次 都 会 生成 不 同 的 签名 。 
加 与 RSASSA-PKCS1-v1 5 不同 ，RSA-PSS 有 可 能 约 简 到 RSA 分 解难 题 的 难度 。 
加 通常 ， 虽 然 RSASSA-PKCS1-v1 5 仍 被 认为 是 安全 的 ,但 RSA-PSS 应 该 用 于 代替 
RSASSA-PKCS1-v1 5。 

口 RSA-OAEP: RSA 的 一 个 应 用 ， 用 于 使 用 公 钥 加 密 消息 ， 用 私 钥 来 解密 。 

加 OAEP ( Optimal Asymmetric Encryption Padding )， 表 示 算 法 利用 了 Feistel 网 络 在 加 密 前 处 理 未 
加 密 的 消息 。 
加 OAEP 主要 将 确定 性 RSA 加 密 模 式 转换 为 概率 性 加 密 模 式 。 

口 ECC 《Elliptic-Curve Cryptography): 公 钥 密码 系统 ,使 用 一 个 素数 和 一 个 椭圆 曲线 获得 一 对 公 
钥 和 私 钥 ， 可 用 于 签名 /验证 消息 。ECC 的 隐 门 函数 被 称 为 椭圆 曲线 离散 对 数 问 题 (elliptic curve 
discrete logarithm problem )。ECC 被 认为 优 于 RSA。 虽 然 RSA 和 ECC 在 密码 学 意义 上 都 很 强 ， 
但 ECC 密 钥 比 RSA 密 钥 短 ， 而 且 ECC 密码 学 操作 比 RSA 操作 快 。 

口 ECDSA (Elliptic Curve Digital Signature Algorithm) : ECC 的 一 个 应 用 ， 用 于 签名 和 验证 消息 。 
这 个 算法 是 数字 签名 算法 (DSA，Digital Signature Algorithm ) 的 一 个 椭圆 曲线 风格 的 变 体 。 
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口 ECDH (Elliptic Curve Diffie-HellIman): ECC 的 密 钥 生成 和 密 钥 协商 应 用 ， 人 允许 两 方 通过 公开 通 
信 渠 道 建立 共享 的 机 密 。 这 个 算法 是 Diffie-Hellman 密 钥 交 换 ( DH, Diffie-Hellman key exchange ) 
协议 的 一 个 椭圆 曲线 风格 的 变 体 。 

口 AES (Advanced Encryption Standard) : 对 称 密 钥 密码 系统 ， 使 用 派生 自 置换 组 合 网 络 的 分 组 

密码 加 密 和 解密 数据 。AES 在 不 同 模式 下 使 用 ， 不 同 模式 算法 的 特性 也 不 同 。 

口 AES-CTR: AES 的 计数 器 模式 ( counter mode )。 这 个 模式 使 用 递增 计数 器 生成 其 密 钥 流 ， 其 行 
为 类 似 密 文 流 。 使 用 时 必须 为 其 提供 一 个 随机 数 ， 用 作 初 始 化 向 量 。AES-CTR 加 密 / 解 密 可 以 
并 行 。 

口 AES-CBC: AES 的 密码 分 组 链 模式 (cipher block chaining mode )。 在 加 密 纯 文本 的 每 个 分 组 之 
前 ， 先 使 用 之 前 密 文 分 组 求 XOR， 也 就 是 名 字 中 的 “ 链 ”。 使 用 一 个 初始 化 向 量 作 为 第 一 个 分 组 
的 XOR 输 入 。 

口 AES-GCM: AES 的 伽 罗 瓦 /计数 器 模式 ( Galois/Counter mode )。 这 个 模式 使 用 计数 器 和 初始 化 
向 量 生成 一 个 值 ， 这 个 值 会 与 每 个 分 组 的 纯 文本 计算 XOR。 与 CBC 不 同 ， 这 个 模式 的 XOR 输 
人 不 依赖 之 前 分 组 密 文 。 因 此 GCM 模式 可 以 并 行 。 由 于 其 卓越 的 性 能 ，AES-GCM 在 很 多 网 络 
安全 协议 中 得 到 了 应 用 。 

口 AES-KW: AES 的 密 钥 包装 模式 ( key wrapping mode )。 这 个 算法 将 加 密 密 钥 包装 为 一 个 可 移植 

且 加 密 的 格式 ， 可 以 在 不 信任 的 渠道 中 传输 。 传 输 之 后 ， 接 收 方 可 以 解 包 密 钥 。 与 其 他 AES 模 
式 不 同 ，AES-KW 不 需要 初始 化 向 量 。 

口 HMAC (Hash-Based Message Authentication Code): 用 于 生成 消息 认证 码 的 算法 ， 用 于 验证 

通过 不 可 信 网 络 接收 的 消息 没有 被 修改 过 。 两 方 使 用 散 列 函数 和 共享 私 钥 来 签名 和 验证 消息 。 

口 KDF (Key Derivation Functions) : 可 以 使 用 散 列 函数 从 主 密 钥 获 得 一 个 或 多 个 密 钥 的 算法 。KDF 

能 够 生成 不 同 长 度 的 密 钥 ， 也 能 把 密 钥 转 换 为 不 同 格式 。 

口 HKDF (HMAC-Based Key Derivation Function): 密 钥 推 导 函 数 ， 与 高 依 输 入 (如 已 有 密 钥 ) 

一 起 使 用 。 

口 PBKDF2 (Password-Based Key Derivation Function 2) : 密 钥 推导 函数 ， 与 低 炉 输入 ( 如 密 钥 
字符 串 ) 一 起 使 用 。 





























































































































































































































注意 CryptoKey 支持 很 多 算法 ,但 其 中 只 有 部 分 算法 能 够 用 于 subtleCrypto 的 方法 。 
要 了 解 哪个 方法 支持 什么 算法 ， 可 以 参考 W3C 网 站 上 Web Cryptography API 规范 的 


“Algorithm Overview” 。 





3. 生成 cryptoKey 

使 用 supbtlecrypto.generateKey () 方 法 可 以 生成 随机 cryptoKey， 这 个 方法 返回 
解决 为 一 个 或 多 个 cryptoKey 实例 。 使 用 时 需要 给 这 个 方法 传人 一 个 指定 目标 算法 的 参数 对 象 、 
表示 密 钥 是 否 可 以 从 cryptoKey 对 象 中 提取 出 来 的 布尔 值 ， 以 及 一 个 表示 0 
SubtleCrypto 方法 一 起 使 用 的 字符 串 数组 ( keyUsages )。 

由 于 不 同 的 密码 系统 需要 不 同 的 输入 来 生成 密 钥 ， 上 述 参数 对 象 为 每 种 密码 系统 都 规定 了 必需 的 















































口 RSA 密码 系统 使 用 RsaHashedKeyGenParams 对 象 ; 
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口 ECC 密码 系统 使 用 EcKeyGenParams 对 象 ; 

口 HMAC 密码 系统 使 用 HmacKeyGenParams 对 象 ; 

口 AES 密码 系统 使 用 AesKeyGenParams 对 象 。 

keyUsages 对 象 用 于 说 明 密 钥 可 以 与 哪个 算法 一 起 使 用 。 至 少 要 包含 下 列 中 的 一 个 字符 串 : 


口 encryp 


















































口 decrypt 
口 sign 

口 verify 
口 qeriveKey 





口 deriveBits 
口 wrapKey 





口 unwrapKey 

段 设 要 生成 一 个 满足 如 下 条 件 的 对 称 密 钥 
口 支持 AES-CTR 算法 ; 

口 密 钥 长 度 128 位 ; 

口 不 能 从 cryptoKey 对 象 中 提取 ; 

口 可 以 跟 encrypt () 和 decrypt () 方 法 一 起 使 用 。 























那么 可 以 参考 如 下 代码 : 
(async function() { 
const params = { 


name: 'AES-CTR', 
length: 128 
上 
const keyUsages = ['encrypt', 'decrypt']; 


const key = await crypto.subtle.generateKey (params, false, keyUsages); 


console.log (key); 


// CryptoKey {type: "secret", extractable: true, algorithm: {...}, usages: Array(2)} 


下 
上段 设 要 生成 一 个 满足 如 下 条 件 的 非 对 称 密 钥 : 
口 支持 ECDSA 算法 ; 

口 使 用 P-256 椭圆 曲线 ; 

口 可 以 从 cryptoKey 中 提取 ; 

口 可 以 跟 sign() 和 verify () 方 法 一 起 使 用 。 






































那么 可 以 参考 如 下 代码 : 
(async function() { 
const params = { 


name: 'ECDSA', 
namedCurve: 'P-256' 
3 


const keyUsages = ['sign', 'verify']; 


const {publicKey, privateKey} = await crypto.subtle.generateKey (params, true, 
keyUsages); 
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console.log (publicKey); 
// CryptoKey {type: "public", extractable: true, algorithm: {...}, usages: Array(1)} 


console.log(privateKey); 
// CryptoKey {type: "private", extractable: true, algorithm: {...}, usages: Array(1)} 
A 


4. 导出 和 导入 密 钥 

如 果 密 钥 是 可 提取 的 ， 那 么 就 可 以 在 cryptoKey 对 象 内 部 暴露 密 钥 原始 的 二 进 制 内 容 。 使 用 
exportKey () 方 法 并 指定 目标 格式 ( "raw"、"pkcs8" 、"spki" 或 "jwk" ) 就 可 以 取得 密 钥 。 这 个 方 
法 返回 一 个 期 约 ， 解 决 后 的 ArrayBuffer 中 包含 密 钥 : 


(async function() { 
const params = { 
name: 'AES-CTR', 
length: 128 
地 
const keyUsages = ['encrypt', 'decrypt']; 























const key = await crypto.subtle.generateKey (params, true, keyUsages); 





const rawKey = await crypto.subtle.exportKey('raw', key); 


console.log (new Uint8Array (rawKey)); 
// Uint8Array[93, 122, 66, 135, 144, 182, 119, 196, 234, 73, 84, 7, 139, 43, 238, 
// 110] 

于 和 人 可 


与 exportKey () 相反 的 操作 要 使 用 importKey () 方 法 实现 。importKey () 方 法 的 签名 实际 上 是 
generateKey () 和 exportKey () 的 组 合 。 下 面 的 方法 会 生成 密 钥 、 导 出 密 钥 ， 然 后 再 导入 密 钥 : 


(async function() { 
const params = { 
name: 'AES-CTR', 
length: 128 























3 


const keyUsages = ['encrypt', 'decrypt']; 
const keyFormat = 'raw'; 
const isExtractable = true; 





const key = await crypto.subtle.generateKey (params, isExtractable, keyUsages); 





const rawKey = await crypto.subtle.exportKey (keyFormat, key); 


const importedKey = await crypto.subtle.importKey (keyFormat, rawKey, params .name, 
isExtractable, keyUsages); 


console.log(importedKey); 
// CryptoKey {type: "secret", extractable: true, algorithm: {...}, usages: Array(2)} 
a 


5. 从 主 密 钥 派生 密 钥 

使 用 subtlecrypto 对 象 可 以 通过 可 配置 的 属性 从 已 有 密 钥 获得 新 密 钥 。subtleCcrypto 支持 一 
个 aeriveKey () 方 法 和 一 个 aeriveBits () 方 法 , 前 者 返回 一 个 解决 为 CryptoKey 的 期 约 , 后 者 返回 
一 个 解决 为 ArrayBuffer 的 期 约 。 
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注意 deriveKey() 与 deriveBits() 的 区 别 很 微妙 ， 因 为 调用 deriveKey () 实际 上 与 


调用 deriveBits() 之 后 再 把 结果 传 给 importKey () 相同 。 











deriveBits() 方 法 接收 一 个 算法 参数 对 象 、 主 密 钥 和 输出 的 位 长 作为 参数 。 当 两 个 人 分 别 拥有 自 

















钥 对 生成 了 对 等 密 钥 ， 并 确保 它们 派生 相同 的 密 钥 位 : 


(async function() { 
const ellipticCurve = 'P-256'; 
const algoIdentifier = 'ECDH'; 


const derivedKeySize = 128; 


const params = { 
name: algoIdentifier, 
namedCurve: ellipticCurve 


.> 
const keyUsages = ['deriveBits']; 


const keyPairA = await crypto.subtle.generateKey (params, 
const keyPairB = await crypto.subtle.generateKey (params, 


// 从 A 的 公 钥 和 B 的 私 钥 派 生 密 钥 位 


const derivedBitsAB = await crypto.subtle.deriveBits( 


A 
tEUe; 


Object.assign({ public: keyPairA.publicKey }, params), 


keyPairB.privateKey, 
derivedKeySize); 


// 从 B 的 公 钥 入 的 私 钥 派 生 密 钥 位 
const derivedBitsBA = await crypto.subtle.deriveBits( 


Object.assign({ public: keyPairB.publicKey }, params), 


keyPairA.privateKey, 
derivedKeySize); 


const arrayAB = new Uint32Array (derivedBitsAP); 
const arrayBA = new Uint32Array (derivedBitsBA); 


// 确保 密 钥 数组 相等 
console.log( 
arrayAB.length === arrayBA.length && 


arrayAB.every((val, i) => val === arrayBA[il])); // true 


了) () 


己 的 密 钥 对 , 但 希望 获得 共享 的 加 密 密 钥 时 可 以 使 用 这 个 方法 。 下 面 的 例子 使 用 ECDH 算 法 基于 两 个 密 


keyUsages); 
keyUsages); 


deriveKey () 方 法 是 类 似 的 ， 只 不 过 返回 的 是 cryptoKey 的 实例 而 不 是 ArrayBuffer。 下面 的 
例子 基于 一 个 原始 字符 串 , 应 用 PBKDF2 算法 将 其 导入 一 个 原始 主 密 钥 , 然后 派生 了 一 个 AES-GCM 格 





式 的 新 密 钥 : 


(async function() { 
const password = 'foobar'; 
const salt = crypto.getRandomValues (new Uint8Array (16)); 
const algoIdentifier = 'PBKDF2'; 
const keyFormat = 'raw'; 
const isExtractable = false; 


const params = { 
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name: algoIdentifier 
} 


const masterKey = await window.crypto.subtle.importKey( 
keyFormat, 
(new TextEncoder()) .encode (password), 
params, 
isExtractable, 
['deriveKey'] 
) 汉 


const deriveParams = { 
name: 'AES-GCM', 
length: 128 

于 


const derivedKey = await window.crypto.subtle.deriveKey( 
Object.assign({salt, iterations: 1E5, hash: 'SHA-256'}, params), 
masterKey, 
deriveParams, 
isExtractable, 


['encrypt'] 


console.log(derivedKey); 
// CryptoRey {type: "secret", extractable: false, algorithm: {...}, usages: Array(1)} 
Da 


6. 使 用 非 对 称 密 钥 签 名 和 验证 消息 

通过 subtlecrypto 对 象 可 以 使 用 公 钥 算法 用 私 钥 生成 签名 ,或 者 用 公 钥 验证 签名 。 这 两 种 操作 
分 别 通过 subtleCrypto.sign() 和 subtleCrypto.verify () 方 法 完成 。 

签名 消息 需要 传人 参数 对 象 以 指定 算法 和 必要 的 值 、cryptoKey 和 要 签名 的 ArrayBuffer 或 
ArrayBufferView。 下 面 的 例子 会 生成 一 个 椭圆 曲线 密 钥 对 ， 并 使 用 私 钥 签名 消息 : 


(async function() { 
const keyParams = { 
name: 'ECDSA', 

namedCurve: 'P-256' 






































} 
const keyUsages = ['sign', 'verify']; 


const {publicKey, privateKey} = await crypto.subtle.generateKey (keyParams, true, 
keyUsages); 


const message = (new TextEncoder()).encode('I am Satoshi Nakamoto'); 


const signParams = { 
name: 'ECDSA', 
hash: 'SHA-256' 

}; 


const signature = await crypto.subtle.sign(signParams, privateKey, message); 
console.log(new Uint32Array (signature)); 


// Uint32Array (16) [2202267297, 698413658, 1501924384, 691450316, 778757775, ... ] 
}) (0); 
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希望 通过 这 个 签名 验证 消息 的 人 可 以 使 用 公 和 钥 和 supbtlecrypto.verify () 方 法 ,这 个 方法 的 签名 
几乎 与 sign () 相 同 , 只 是 必须 提供 公 钥 以 及 签名 。 下 面 的 例子 通过 验证 生成 的 签名 扩展 了 前 面 的 例子 : 


(async function() { 
const keyParams = { 
name: 'ECDSA', 

namedCurve: 'P-256' 
py 



































const keyUsages = ['sign', 'verify']; 


const {publicKey, privateKey} = await crypto.subtle.generateKRey (keyParams, true, 


keyUsages); 
const message = (new TextEncoder()).encode('I am Satoshi Nakamoto'); 
const signParams = { 


name: 'ECDSA', 
hash: 'SHA-256' 
ss 


const signature = await crypto.subtle.sign(signParams, privateKey, message); 


const verified = await crypto.subtle.verify(signParams, publicKey, signature, 
message); 


console.log(verified); // true 
is 


7. 使 用 对 称 密 钥 加 密 和 解密 

SubtleCrypto 对 象 支持 使 用 公 钥 和 对 称 算法 加 密 和 解密 消息 。 这 两 种 操作 分 别 通过 Suptlecrypto. 
encrypt () 和 subtleCrypto.decrypt () 方 法 完成 。 

加 密 消 息 需要 传人 参数 对 象 以 指定 算法 和 必要 的 值 、 加 密 密 钥 和 要 加 密 的 数据 。 下 面 的 例子 会 生成 
对 称 AES-CBC 密 钥 ， 用 它 加 密 消 息 ， 最 后 解密 消息 : 


(async function() { 
const algoIdentifier = 'AES-CBC'，; 

































































const keyParams = { 
name: algoIdentifier, 
length: 256 

yy 


const keyUsages = ['encrypt', 'decrypt']; 


const key = await crypto.subtle.generateKey (keyParams, true, 


keyUsages); 
const originalPlaintext = (new TextEncoder()) .encode('I am Satoshi Nakamoto'); 
const encryptDecryptParams = { 


name: algoIdentifier, 
iv: crypto.getRandomValues (new Uint8Array (16)) 
Se 


const ciphertext = await crypto.subtle.encrypt (encryptDecryptParams, key, 
originalPlaintext); 
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console.log(ciphertext); 
// ArrayBuffer(32) {} 


const decryptedPlaintext = await crypto.subtle.decrypt (encryptDecryptParams, key, 
ciphertext); 


console.log( (new TextDecoder()) .decode (decryptedPlaintext)); 
// I am Satoshi Nakamoto 
(ys 


8. 包装 和 人 解 包 密 钥 

SubtleCrypto 对 象 支持 包装 和 解 包 密 钥 , 以 便 在 非 信 任 渠 道 传输 。 这 两 种 操作 分 别 通 过 subt1e- 
Crypto.wrapKey () 和 SubtleCrypto.unwrapKey () 方 法 完成 。 

包装 密 钥 需要 传人 一 个 格式 字符 种、 要 包装 的 CryptoKey 实例 、 要 执行 包装 的 cryptoKey， 以 及 
一 个 参数 对 象 用 于 指定 算法 和 必要 的 值 。 下 面 的 例子 生成 了 一 个 对 称 AES-GCM 密 钥 ， 用 AES-KW 来 
包装 这 个 密 钥 ， 最 后 又 将 包装 的 密 钥 解 包 : 

(async function() { 


const keyFormat = 'raw'; 
const extractable = true; 


const wrappingKeyAlgoIdentifier = 'AES-KW'; 120 


const wrappingKeyUsages = ['wrapKey', ‘'unwrapKey']; 
Const wrappingKeyParams = { 

name: wrappingKeyAlgoIdentifier., 

length: 256 
站 














const keyAlgoIdentifier = 'AES-GCM'; 
const keyUsages = ['encrypt']; 
const keyParams = { 


name: keyAlgoIdentifier., 
length: 256 


const wrappingKey = await crypto.subtle.generateKey (wrappingKeyParams, extractable, 
wrappingKeyUsages); 


console.1log(wrappingKey); 
// CryptoKey {type: "secret", extractable: true, algorithm: {...}, usages: Array (2)} 


const key = await crypto.subtle.generateKey (keyParams, extractable, keyUsages); 


console.log (key); 
// CryptoKey {type: "secret", extractable: true, algorithm: {...}, usages: Array (1)} 


const wrappedKey = await crypto.subtle.wrapKey (keyFormat, key, wrappingKey, 
wrappingKeyAlgoIdentifier); 


console.1log (wrappedKey); 
// ArrayBuffer(40) {} 


const unwrappedKey = await crypto.subtle.unwrapKey (KkeyFormat, wrappedKey, 
wrappingKey, wrappingKeyParams, keyParams, extractable, keyUsages); 


console.log (unwrappedKey); 
// CryptoKey {type: "secret", extractable: true, algorithm: {...}, usages: Array(1)} 
}) () 
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20.13 ”小结 


除了 定义 新 标签 ，HTMLS 还 定义 了 一 些 JavaScript API。 这 些 API 可 以 为 开发 者 提供 更 便捷 的 Web 
接口 ， 暴 露 堪 比 桌面 应 用 的 能 力 。 本 章 主要 介绍 了 以 下 API。 
口 Atomics API 用 于 保护 代码 在 多 线程 内 存 访问 模式 下 不 发 生 资 源 争 用 。 
D postMessage() API 支 持 从 不 同 源 跨 文档 发 送 消息 ， 同 时 保证 安全 和 遵循 同 源 策略 。 
口 Encoding API 用 于 实现 字符 串 与 缓冲 区 之 间 的 无 颖 转换 ( 越 来 越 常见 的 操作 )。 
口 File API 提供 了 发 送 、 接 收 和 读 取 大 型 二 进 制 对 象 的 可 靠 工具 。 
口 媒体 元 素 <audio> 和 <vigeo> 拥 有 自己 的 API, 用 于 操作 音频 和 视频 。 并 不 是 每 个 浏览 器 都 会 支 
持 所 有 媒体 格式 ， 使 用 canPlayType () 方 法 可 以 检测 浏览 器 支持 情况 。 
口 拖 放 API 支持 方便 地 将 元 素 标识 为 可 拖 动 ， 并 在 操作 系统 完成 放置 时 给 出 回应 。 可 以 利用 它 创 
建 自 定 义 可 拖 动 元 素 和 放置 目标 。 
口 Notifications API 提供 了 一 种 浏览 器 中 立 的 方式 ， 以 此 向 用 户 展示 消 通 知 弹 层 。 
口 Streams API 支持 以 全 新 的 方式 读 取 、 写 人 和 处 理 数 据 。 
D TimingAPI 提 供 了 一 组 度量 数据 进出 浏览 器 时 间 的 可 靠 工 具 。 
口 Web Components API 为 元 素 重用 和 封装 技术 向 前 迈进 提供 了 有 力 支 撑 。 
口 Web Cryptography API 让 生成 随机 数 、 加 密 和 签名 消息 成 为 一 类 特性 。 















































































































































第 分 ] 
错误 处 理 与 调 斌 


本 章 内 容 








口 理解 浏览 器 错误 报告 
口 处 理 错误 
口 调试 JavaScript 代码 














JavaScript 一 直 以 来 被 认为 是 最 难 调试 的 编程 语言 过 


发 工具 。 错 误 经 常会 
上 下 文 ， 因 此 很 
以 及 一 些 错 误 类 型 ， 
始 在 浏览 絮 中 4 

有 了 适当 的 语言 和 开发 工具 ，Web 开发 者 如 今 已 可 以 实现 适当 的 错误 处 到 























21.1 浏览 器 


所 有 主流 桌面 浏览 器 ， 包括 IE/Edge、Firefox 、Safari 、Chrome 和 Opera， 都 提供 了 向 月 


的 机 














么 用 ， 
21.1 


所 有 现代 桌面 浏览 器 都 会 通过 控 








以 邻 人 迷惑 的 浏览 器 消息 形式 抛 出 ， 比 如 "object expected"。 这 样 的 消 ) 
难 理解 。ECMAScript 第 3 版 致力 于 改进 这 个 方面 ， 引 入 了 try/catch 和 throw 语句 ， 

















， 因 为 它 是 动态 的 ， 且 多 年 来 没有 适当 的 开 

















肖 息 

















息 没 有 














以 帮助 开发 者 在 出 错时 正确 地 处 理 它们 。 几 年 后 ，JavaScript 调试 器 和 排 错 工具 开 




















音 误 报告 





H 现 。 到 了 2008 年 ， 大 多 数 浏览 器 支持 一 些 JavaScript 调试 能 力 。 
并 找到 问题 的 原 


























画 


〇 

















有 户 报告 错误 


判 。 默 认 情 况 下 ， 所 有 浏览 器 都 会 隐藏 错误 信息 。 一 个 原因 是 除了 开发 者 之 外 这 些 信 息 对 别人 没 什 











另 一 个 原因 是 


网 页 在 正常 操作 中 报错 的 固有 特性 。 





.1 桌面 控制 台 




















单 击 Console ( 控制 台 ) 选项 卡 。 
要 直接 进入 控制 台 ， 不 同 操作 系统 和 浏览 器 支持 不 同 的 快捷 键 ， 如 下 表 所 示 。 























判 侣 暴露 错误 。 这 些 错 误 可 以 显 




















示 在 开发 者 工具 内 髓 的 控制 台中 。 
在 前 面 提 到 的 所 有 浏览 器 中 , 访问 开发 者 工具 的 路 径 是 相似 的 。 可 能 最 简单 的 查看 错误 的 方式 就 是 在 页 
面 上 单 击 鼠标 右键 ， 然 后 在 上 下 文 菜单 中 选择 Inspect ( 检查 ) 或 Inspect Element ( 检查 元 素 )， 然 后 再 




















浏 览 器 Windows/Linux Mac 
Chrome Ctrl+Shfit+J Cmd+Opt+J 
Firefox Ctrl+ShfittK Cmd+Opt+K 
IE/Edge F12， 然 后 Ctrl+2 不 适用 
Opera Ctrl+Shift+I Cmd+Opt+I 
Safari 不 适用 Cmd+Opt+C 
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21.1.2 ”移动 控制 台 














移动 浏览 器 不 会 直接 在 设备 上 提供 控制 台 界面 。 








































































































不 过 ， 还 是 有 一 些 途 径 可 以 在 移动 设备 中 检查 错误 。 
Chrome 移动 版 和 Safari 的 iOS 版 内 置 了 实用 工具 ， 支 持 将 设备 连接 到 宿 ni 浏览 
器 。 然 后 ， 就 可 以 在 对 应 的 桌面 浏览 器 中 查看 错误 了 。 这 涉及 设备 之 间 的 硬件 连接 ， 且 要 遵循 不 同 的 操 
作 步 又 ， 比 如 Chrome 的 操作 步骤 参见 Google Developers 网 站 的 文章 《Android 》， 
Safari 的 操作 步骤 参见 Apple Developer 网 站 的 文章 “Safari Web Inspector Guide”。 
此 外 也 可 以 使 用 第 三 方 工具 直接 在 移动 设备 上 调试 。Firefox 常用 的 调试 工具 是 Firebug Lite， 这 和 需 





























要 通过 JavaSeript 的 书签 小 工具 向 当前 页 面 中 加 入 Firebug 脚本 才 可 以 。 脚本 运行 后 , 就 可 以 直接 在 移动 
浏览 器 上 打开 调试 界面 。Firebug Lite 也 有 面向 其 他 浏览 器 (如 Chrome ) 的 版 本 。 














21.2 错误 处 理 









































错误 处 理 在 编程 中 的 重要 性 组 良 置 疑 。 所 有 主流 Web 应 用 程序 都 需要 定义 完善 的 错误 处 理 协 议 ， 


大 多 数 优秀 的 应 用 程序 有 自己 的 错误 处 理 策 略 ， 尽管 主要 逻辑 是 放 在 服务 器 端的 。 事 实 上 ， 服 务 器 端 团 
队 通 常会 花 很 多 精力 根据 错误 类 型 、 频 率 和 其 他 重要 指标 来 定义 规范 的 错误 日 志 机 制 。 最 终 实现 通过 简 
































单 的 数据 库 查 询 或 报告 生成 脚本 就 可 以 了 解 应 用 程序 的 运行 状态 。 





























多 数 上 网 的 人 没有 技术 背景 , 其 至 连 什 么 是 浏览 器 都 不 十 分 清楚 ,而 | 
浏览 器 。 如 前 所 述 ， 当 网 页 中 的 JavaScript 脚本 发 9 
处 理 JavaScript 报告 错误 的 默认 方式 对 用 户 并 不 友好 。 最 好 的 情况 是 / 
再 重 试 ; 最 坏 的 情况 是 用 户 感觉 特别 厌烦 ， 于 是 永远 不 回来 了 。 有 一 个 


























错误 处 理 在 应 用 程序 的 浏览 器 端 进展 较 慢 ， 尽 管 其 重要 性 一 点 也 不 低 。 这 里 有 一 个 重要 的 事实 : 大 























有 有 的 人 不 知道 自己 使 用 的 是 什么 
E 错 误 时 ， 不 同 浏览 絮 的 处 理 方式 不 同 。 不 





























j 户 自己 不 知道 发 生 了 什么 ， 然 
0 户 





知道 到 底 发 生 了 什么 。 为 此 ， 必 须 理 解 各 种 捕获 和 处 理 JavaScript 错误 的 方式 。 





21.2.1 try/catch 语句 





ECMA-262 第 3 版 新 增 了 try/catch 语句 ， 作 为 在 JavaScript 中 处 理 


如 下 所 示 ， 跟 Java 中 的 try/catch 语句 一 样 : 


try { 
// 可 能 出 错 的 代码 
} catch (error) { 


// 出 错时 要 做 什么 





} 








异常 的 一 种 方式 。 基 本 的 语法 


任何 可 能 出 错 的 代码 都 应 该 放 到 try 块 中 ， 而 处 理 错误 的 代码 则 放 在 catch 块 中 ， 如 下 所 示 : 


tr 
window.someNonexistentFunction(); 
} catch (error){ 
console.log("An error lappened!™"); 


} 





如 果 try 块 中 有 代码 发 生 错误 ， 代 码 会 立即 退出 执行 ， 并 跳 到 catch 块 





一 个 对 象 ， 该 对 象 包含 发 生 错误 的 相关 信息 。 与 其 





他 语 言 不 同 ， 即使 在 六 六 七 交 














1。catch 块 此 时 接收 到 
h 块 中 不 使 用 错误 对 象 ， 





























也 必须 为 它 定义 名 称 。 错误 对 象 中 暴露 的 实际 信息 息 因 
属性 。ECMA-262 也 指定 了 定义 错误 类 型 的 name 




















因 浏览 器 而 异 , 但 至 少 包含 保存 错误 消息 的 messag 























属性 ， 目 前 所 有 浏览 器 中 都 有 这 个 属性 。 因 此 ， 可 以 
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像 下 面 的 代码 这 样 在 必要 时 显示 错误 消息 : 


try { 














window.someNonexistentFunction(); 
} catch (error)t{ 
console.log(error.message); 


} 











这 个 例子 使 用 message 属性 向 用 户 显 示 错 误 消息 , message 属性 是 唯一 一 个 在 了 下、Firefox 、Safari、 
Chrome 和 Opera 中 都 有 的 属性 , 尽管 每 个 浏览 器 添加 了 其 他 属性 。 IE 添加 了 aescription 属性 (其 值 


始终 等 于 m 
































essage ) 和 number 属性 ( 它 包含 内 部 错误 号 )。Firefox 添加 了 fileName、lineNumber 








和 stack( 包含 栈 跟 踪 信 息 ) 属 性 。Safari 添加 了 1ine( 行 号 )、sourceId( 内 部 错误 号 ) 和 sourceURL 
属性 。 同 样 ， 为 保证 跨 浏览 器 兼容 ， 最 好 只 依赖 message 属性 。 











1. finally 子 句 

try/catch 语句 中 可 选 的 finally 子 句 始终 运行 。 如 果 try 块 中 的 代码 运行 完 ， 则 接着 执行 
finally 块 中 的 代码 。 如 果 出 错 并 执行 catch 块 中 的 代码 ， 则 finally 块 中 的 代码 仍 执行 。try 或 
catch 块 无 法 阻止 finally 块 执 行 ， 包括 return 语句 。 比 如 : 


function testFinally(){ 


Ey 





{ 


return 2; 
} catch (error)t{ 


} 
} 


这 个 函 


return 1; 
. en (到 
return 0; 








数 在 try/catch 语句 的 各 个 部 分 都 只 放 了 一 个 return 语句 。 看 起 来 该 函数 应 该 返回 2， 








因为 它 在 tr 块 中 > 不 会 导致 错误 。 但 是 ， finally 块 的 存在 导致 try 块 中 的 return 语句 被 忽略 。 


因此 ， 无 论 


什么 情况 下 调用 该 函数 都 会 返回 0。 如 果 去 掉 finally 子 句 ， 该 函数 会 返回 2。 如 果 写 出 





finally 子 句 ，catch 抉 就 成 了 可 选 的 (它们 两 者 中 只 有 一 个 是 必需 的 )。 


i 
壮 忌 


略 ， 


只 要 代码 中 包含 了 finally 子 句 ，try 块 或 catch 块 中 的 return 语句 就 会 被 忽 
理解 这 一 点 很 重要 。 在 使 用 finally 时 一 定 要 仔细 确认 代码 的 行为 。 





2. 错误 类 型 


代码 执 


行 过 程 中 会 发 生 各 种 类 型 的 错误 。 每 种 类 型 都 会 对 应 一 个 错误 发 生 时 抛 出 的 错误 对 象 。 





ECMA-262 定义 了 以 下 8 种 错误 类 型 : 


Error 





InternalError 





LVa 


Syn 








DODOODODODO DO 








1lError 





RangeError 





ReferenceError 





taxError 





TypeError 
URIError 


Error 是 基 类 型 ， 其 他 错误 类 型 继承 该 类 型 。 因 此 ， 所 有 错误 类 型 都 共享 相同 的 属性 (所 有 错误 对 











678 第 21 章 ， 错误 处 理 与 调试 














象 上 的 方法 都 是 这 个 默认 类 型 定义 的 方法 )。 浏览 器 很 少 会 抛 出 Error 类 型 的 错误 ， 该 类 型 主要 用 于 开 
发 者 抛 出 自 定义 错误 。 

InternalError 类 型 的 错误 会 在 底层 JavaScript 引擎 抛 出 异常 时 由 浏览 器 抛 出 。 例 如 , 递归 过 多 导 
致 了 栈 溢出 。 这 个 类 型 并 不 是 代码 中 通常 要 处 理 的 错误 ,如 果真 发 生 了 这 种 错误 ,很 可 能 代码 哪里 弄 错 
了 或 者 有 人 危险 了 。 
EvalError 类 型 的 错误 会 在 使 用 eval () 函数 发 生 异 常 时 抛 出 。ECMA-262 规定 ,“ 如 果 eval 属性 
没有 被 直接 调用 ( 即 没有 将 其 名 称 作为 一 个 Idaentifier ， 也 就 是 callExpression 中 的 
MemberExpression )， 或 者 如 果 eval 属性 被 赋值 ” ， 就 会 抛 出 该 错误 。 基 本 上 ， 只 要 不 把 eval () 当 
成 函数 调用 就 会 报告 该 错误 : 

new eval(); // 抛 出 EvalError 

eval = foo; // 抛 出 EvalError 


实践 中 ,浏览 器 不 会 总 抛 出 EvalError。Firefox 和 正在 上 面 第 一 种 情况 下 抛 出 TypeError, 在 
第 二 种 情况 下 抛 出 EvalError。 为 此 ,再 加 上 代码 中 不 大 可 能 这 样 使 用 eval () ， 因 此 几乎 遇 不 到 这 种 
错误 。 

RangeError 错误 会 在 数值 越界 时 抛 出 。 例 如 ， 定 义 数 组 时 如 果 设 置 了 并 不 支持 的 长 度 ， 如 -20 或 
Number .MAX_VALUE， 就 会 报告 该 错误 : 


le 
le 


RangeError 在 JavaScript 中 发 生得 不 多 。 

ReferenceError 会 在 找 不 到 对 象 时 发 生 。( 这 就 是 著名 的 "object expected" 浏 览 器 错误 的 原 
因 。) 这 种 错误 经 常 是 由 访问 不 存在 的 变量 而 导致 的 ， 比 如 : 

let obj = xXx; // 在 文 没有 声明 时 会 抛 出 ReferenceError 

SyntaxError 经 常 在 给 eval () 传 人 的 字符 串 包含 JavaScript 语法 错误 时 发 生 ， 比 如 : 

eval("a ++ b"); // 抛 出 SyntaxError 

在 eval () 外 部 ， 很 少 会 用 到 syntaxError。 这 是 因为 JavaScript 代码 中 的 语法 错误 会 导致 代码 无 
法 执行 。 
TypeError 在 JavaScript 中 很 常见 ， 主 要 发 生 在 变量 不 是 预期 类 型 ， 或 者 访问 不 存在 的 方法 时 。 很 
多 原因 可 能 导致 这 种 错误 ， 尤 其 是 在 使 用 类 型 特定 的 操作 而 变量 类 型 不 对 时 。 下 面 是 几 个 例子 : 
























































































































































new Array (-20); // 抛 出 RangeError 
new Array (Number .MAX_VALUE); // 抛 出 RangeError 


t itemsl 
t items2 
























































4 














let o = new 10; // 抛 出 TypeError 
console.log("name" in true); // 抛 出 TypeError 
Function.prototype.toString.call("name"); // 抛 出 TypeError 











在 给 函数 传 参数 之 前 没有 验证 其 类 型 的 情况 下 ， 类 型 错误 频繁 发 生 。 

最 后 一 种 错误 类 型 是 URIError， 只 会 在 使 用 encodeURI () 或 decodeURI () 但 传人 了 格式 错误 的 
URI 时 发 生 。 这 个 错误 恐怕 是 JavaScript 中 难得 一 见 的 错误 了 ， 因 为 上 面 这 两 个 函数 非常 稳健 。 

不 同 的 错误 类 型 可 用 于 为 异常 提供 更 多 信息 ， 以 便 实现 适当 的 错误 处 理 逻 辑 。 在 try/catch 语句 
的 catch 块 中 ， 可 以 使 用 instanceof 操作 符 确 定 错误 的 类 型 ， 比 如 : 


trey 
someFunction(); 
} catch (error){ 
if (error instanceof TypeError)t{ 
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// 处 理 类 型 错误 


} else if (error instanceof ReferenceError){ 


// 处 理 引 用 错误 
} else { 
// 处 理 所 有 其 他 类 型 的 错误 
} 
} 





检查 错误 类 型 是 以 跨 浏 览 器 方式 确定 适当 操作 过 程 的 最 简单 方法 ， 





误 消 息 因 浏览 器 而 异 。 


3. try/catch 的 用 法 
当 try/catch 中 发 生 错误 时 ， 























因为 message 








属性 中 包含 的 错 














浏览 需 会 认为 错误 被 处 理 了 ， 因 此 就 不 会 再 使 用 本 








使 用 try/catch 可 以 针对 特定 错误 类 型 实现 自 定义 的 错误 处 理 。 
try/catch 语句 最 好 用 在 自己 无 法 控制 的 错误 上 。 例 如 , 假设 你 的 代码 中 使 用 了 一 个 大 型 JavaScript 





库 的 某 个 函数 ,而 该 函数 可 能 会 有 意 或 由 于 出 错 而 抛 出 错误 。 因 为 不 能 修改 这 个 
这 个 函数 报告 错误 ， 就 有 必要 通过 try/catch 语句 把 该 函数 调用 包装 起 来 ， 对 可 
如 果 你 明确 知道 自己 的 代码 会 发 生 某 种 错误 ， 那 么 就 不 适合 使 用 try/catc 





















































章 前 面 提 到 的 机 
制 报告 错误 。 如 果 应 用 程序 的 用 户 不 懂 技 术 ， 那 么 他 们 即使 看 到 错误 也 看 不 懂 ， 这 是 一 个 理想 的 结果 。 


库 的 代码 ， 所 以 为 防止 





能 的 错误 进行 处 理 。 
h 语句 。 例 如 ， 如 果 给 











函数 传人 字符 串 而 不 是 数值 时 就 会 失败 , 就 应 该 检查 该 函数 的 参数 类 型 并 采取 相应 的 操作 。 这 种 情况 下 ， 














没有 必要 使 用 try/catch 语句 。 
21.2.2 ” 抛 出 错误 





与 try/catch 语句 对 应 的 一 个 机 制 是 throw 操作 符 ， 用 于 在 任何 时 候 抛 出 自 定义 错误 。throw 操 
作 符 必须 有 一 个 值 ， 但 值 的 类 型 不 限 。 下 面 这 些 代 码 都 是 有 效 的 : 


throw 12345; 

throw "Hello world!"; 
throw true; 

throw { name: "JavaScript" 


} 


使 用 throw 操作 符 时 ， 代 码 立 即 停止 执行 ， 除 非 try/catch 语句 捕获 了 抛 出 的 值 。 
可 以 通过 内 置 的 错误 类 型 来 模拟 浏览 器 错误 。 每 种 错误 类 型 的 构造 函数 都 只 接收 一 个 参数 ， 就 是 错 











误 消 息 。 下 面 看 一 个 例子 : 


throw new Error ("Something 























bad happened."); 

















以 上 代码 使 用 一 个 自 定义 的 错误 消息 生成 了 一 个 通用 错误 。 浏览 器 会 像 处 理 自己 生成 的 错误 一 样 来 
处 理 这 个 自 定义 错误 。 换 句 话说, 浏览 器 会 像 通常 一 样 报告 这 个 错误 , 最 终 显示 这 个 自 定义 错误 。 当 然 ， 
使 用 特定 的 错误 类 型 也 是 一 样 的 ， 如 以 下 代码 所 示 : 


throw new SyntaxError("I don't like your syntax."); 




















throw new InternalError("I 

















can't do that, Dave."); 


throw new TypeError("What type of variable do you take me for?"); 
throw new RangeError ("Sorry, you just don't have the range."); 
throw new EvalError("That doesn't evaluate."); 
throw new URIError ("Uri, is that you?"); 

throw new ReferenceError("You didn't cite your references properly."); 


自 定 义 错误 常用 的 错误 类 型 是 ] 








Error、 RangeError、 Referencel 





Error 和 Type 





Erroro 
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此 外 ,通过 继承 Error (第 6 章 介 绍 过 继承 ) 也 可 以 创建 自 定义 的 错误 类 型 。 创 建 自 定义 错误 类 型 
时 ， 需 要 提供 name 属性 和 message 属性 ， 比 如 : 


class CustomError extends Error { 
constructor(message) { 
super (message); 
this.name = "CustomError"; 
this.message = message; 


} 




















} 


throw new CustomError("My message"); 

继承 Error 的 自 定义 错误 类 型 会 被 浏览 器 当成 其 他 内 置 错误 类 型 。 自 定义 错误 类 型 有 助 于 在 捕获 
错误 时 更 准确 地 区 分 错误 。 

1. 何 时 抛 出 错误 

抛 出 自 定 义 错误 是 解释 函数 为 什么 失败 的 有 效 方式 。 在 出 现 已 知 函 数 无 法 正确 执行 的 情况 时 就 应 该 
抛 出 错误 。 换 句 话 说 , 浏览 器 会 在 给 定 条 件 下 执行 该 函数 时 抛 出 错误 。 例如， 下 面 的 函数 会 在 参数 不 是 
数组 时 抛 出 错误 : 


function process (values)t{ 
values.sort(); 



























































for (let value of values)t{ 
if (value > 100){ 
return value; 
} 
} 


return -1; 


} 
如 果 给 这 个 函数 传人 字符 串 ， 调 用 sort () 函数 就 会 失败 。 每 种 浏览 器 对 此 都 会 给 出 一 个 模 楼 两 可 
的 错误 消息 ， 如 下 所 示 。 
口 IE: 属性 或 方法 不 存在 。 
口 Firefox: values .sort () 不 是 函数 。 
口 Safari: 值 undefined (对 表达 式 values .sort 求 值 的 结果 ) 不 是 一 个 对 象 。 
口 Chrome: 对 象 名 没有 方法 ' sort '。 
口 Opera: 类 型 不 匹配 (通常 是 在 需要 对 象 时 使 用 了 非 对 象 值 )。 
虽然 Firefox、Chrome 和 Safari 至 少 给 出 了 导致 错误 的 相关 代码 ， 但 并 没有 哪个 错误 消息 特别 明确 
地 指出 发 生 了 什么 , 或 者 怎么 修复 。 对 于 上 面 的 一 个 函数 来 说 , 通过 这 样 的 错误 消息 调试 还 是 很 容易 的 。 
但 是 ， 如 果 是 一 个 复杂 的 Web 应 用 程序 ， 有 几 千 行 JavaScript 代码 ， 想 要 找到 错误 的 原因 就 会 很 难 。 
这 时 候 ， 使 用 适当 的 信息 创建 自 定义 错误 可 以 有 效 提高 代码 的 可 维护 性 。 比 如 下 面 的 例子 : 


function process (values)t 
if (!(values instanceof Array))t{ 
throw new Error("process(): Argument must be an array."); 


} 















































































































































Values.Sort (); 
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for (let value of values)t{ 
if (value > 100){ 
return value; 
} 
} 


return -1; 


} 

在 这 个 重 写 后 的 函数 中 ,如果 values 参数 不 是 数组 就 会 抛 出 错误 。 错误 消息 包含 函数 名 以 及 对 错 
误 原因 非常 清晰 的 描述 。 即 使 在 复杂 的 应 用 程序 中 出 现 这 个 错误 ， 也 可 以 很 容易 理解 问题 所 在 。 

实际 编写 JavaScript 代码 时 ， 应 该 仔细 评估 每 个 函数 ， 以 及 可 能 导致 它们 失败 的 情形 。 良 好 的 错误 
处 理 协议 可 以 保证 只 会 发 生 你 自己 抛 出 的 错误 。 

2. 抛 出 错误 与 try/catch 

一 个 常见 的 问题 是 何 时 抛 出 错误 ， 何 时 使 用 try/catch 捕获 错误 。 一 般 来 说 ， 错 误 要 在 应 用 程序 
架构 的 底层 抛 出 ,在 这 个 层面 上 ， 人 们 对 正在 进行 的 流程 知之 甚 少 ， 因 此 无 法 真正 地 处 理 错误 。 如 果 你 
在 编写 一 个 可 能 用 于 很 多 应 用 程序 的 JavaScript 库 , 或 者 一 个 会 在 应 用 程序 的 很 多 地 方 用 到 的 实用 函数 ， 
那么 应 该 认真 考虑 抛 出 带 有 详细 信息 的 错误 。 然 后 捕获 和 处 理 错误 交 给 应 用 程序 就 行 了 。 

至 于 抛 出 错误 与 捕获 错误 的 区 别 ， 可 以 这 样 想 : 应 该 只 在 确切 知道 接 下 来 该 做 什么 的 时 候 捕获 错 
误 。 捕获 错误 的 目的 是 阻止 浏览 器 以 其 默认 方式 响应 ; 抛 出 错误 的 目的 是 为 错误 提供 有 关 其 发 生 原 因 的 
说 明 。 


21.2.3 ”error 事件 


任何 没有 被 try/catch 语句 处 理 的 错误 都 会 在 window 对 象 上 触发 error 事件 。 该 事件 是 浏览 器 
早期 支持 的 事件 ， 为 保持 向 后 兼容 ,很 多 浏览 需 保 持 了 其 格式 不 变 。 在 onerror 事件 处 理 程序 中 , 任何 
浏览 器 都 不 会 传人 event 对 象 。 相 反 , 会 传人 3 个 参数 : 错误 消息 、 发 生 错误 的 URL 和 行 号 。 大 多 数 情 
况 下 ， 只 有 错误 消息 有 用 ， 因 为 URL 就 是 当前 文档 的 地 址 ， 而 行 号 可 能 指 睦 入 JavaScript 或 外 部 文件 中 的 
代码 。 另 外 , onerror 事件 处 理 程 序 需要 使 用 DOM Level 0 技术 来 指定 , 因为 它 不 遵循 DOM Level 2 Events 
标准 格式 : 

window.onerror = (message, url, line) => { 


console.log (message); 


}3 

在 任何 错误 发 生 时 ， 无 论 是 否 是 浏览 器 生成 的 ， 都 会 触发 error 事件 并 执行 这 个 事件 处 理 程序 。 
然后 ， 浏 览 器 的 默认 行为 就 会 生效 ， 像 往常 一 样 显示 这 条 错误 消息 。 可 以 返回 false 来 阻止 浏览 器 默 
认 报 告 错 误 的 行为 ， 如 下 所 示 : 


window.onerror = (message, url, line) => { 
console.log (message); 
return false; 


}3 

通过 返回 false， 这 个 函数 实际 上 就 变 成 了 整个 文档 的 try/catch 语句 ， 可 以 捕获 所 有 未 处 理 的 
运行 时 错误 。 这 个 事件 处 理 程序 应 该 是 处 理 浏 览 器 报告 错误 的 最 后 一 道 防 线 。 理 想 情 况 下 ， 最 好 永远 不 
要 用 到 。 适 当 使 用 try/catch 语句 意味 着 不 会 有 错误 到 达 浏 览 器 这 个 层次 ， 因 此 也 就 不 会 触发 error 
事件 。 
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注意 浏览 器 在 使 用 这 个 事件 处 理 错 误 时 存在 明显 差异 。 在 全 中 发 生 error 事件 时 ， 正 
常 代 码 会 继续 执行 ， 所 有 变量 和 数据 会 保持 ， 且 可 以 在 onerror 事件 处 理 程序 中 访问 。 


然而 在 Firefox 中 ， 正 常 代码 会 执行 会 终止 ， 错 误 发 生 之 前 的 所 有 变量 和 数据 会 被 销毁 ， 
导致 很 难 真 正 分 析 处 理 错 误 。 











图 片 也 支持 error 事件 。 任 何 时 候 ， 如 果 图 片 src 属性 中 的 URL 没有 返回 可 识别 的 图 片 格式 ， 就 
会 触发 error 事件 。 这 个 事件 遵循 DOM 格式 , 返回 一 个 以 图 片 为 目标 的 event 对 象 。 下 面 是 个 例子 : 


const image = new Image(); 














image.addEventListener("load", (event) => { 
console.log("Image loaded!"); 

image.addEventListener("error", (event) => { 

console.log("Image not loaded!"); 


}); 


image.src = "doesnotexist.gif"; // 不 存在 ， 资 源 会 加 载 失败 






































在 这 个 例子 中 ， 图 片 加 载 失 败 后 会 显示 一 个 alert 警告 框 。 这 里 的 关键 在 于 ， 当 error 事件 发 生 


时 ， 

















图 片 下 载 过 程 已 结束 ， 不 会 再 恢复 。 











21.2.4 ”错误 处 理 策 略 


处 理 考 量 , 包括 日 志 记 录 和 监控 系统 。 这 些 主 要 是 为 了 分 析 模 式 ， 以 期 找到 问题 的 根源 并 了 解 有 多 少 





户 会 


网 页 
用 程 
可 能 
果 。 








过 去 ，Web 应 用 程序 的 错误 处 理 策略 基本 上 是 在 服务 器 上 落地 。 错误 处 理 策略 涉及 很 多 错误 和 错 i 

















框 汇 





受 错误 影响 。 

在 Web 应 用 程序 的 JavaScipt 层面 落地 错误 处 理 策略 同样 重要 。 因 为 任何 JavaScript 错误 都 可 能 导致 
无 法 使 用 ， 所 以 理解 这 些 错误 会 在 什么 情况 下 发 生 以 及 为 什么 会 发 生 非 常 重 要 。 绝 大 多 数 Web 应 
序 的 用 户 不 懂 技 术 ， 在 碰 到 页 面 出 问题 时 通常 会 迷惑 。 为 解决 问题 ,他 们 可 能 会 尝试 刷新 页 面 ， 也 
会 直接 放弃 。 作 为 开发 者 ， 应 该 非常 清楚 自己 的 代码 在 什么 情况 下 会 失败 ， 以 及 失败 会 导致 什么 结 
另外 ， 还 要 有 一 个 系统 跟踪 这 些 问题 。 





























21.2.5 ”识别 错误 














错误 处 理 非常 重要 的 部 分 是 首先 识别 错误 可 能 会 在 代码 中 的 什么 地 方 发 生 。 因 为 JavaScript 是 松散 





类 型 的 ,不 会 验证 函数 参数 ， 所 以 很 多 错误 只 有 在 代码 真正 运行 起 来 时 才 会 出 现 。 通常 ,需要 注意 3 类 


口 类 型 转换 错误 

口 数据 类 型 错误 

口 通信 错误 

上 面 这 儿 种 错误 会 在 特定 情况 下 ， 在 没有 对 值 进行 充分 检测 时 发 生 。 

1. 静态 代码 分 析 器 

不 得 不 说 的 是 ， 通 过 在 代码 构建 流程 中 添加 静态 代码 分 析 或 代码 检查 器 (linter )， 可 以 预先 发 现 非 














常 多 的 错误 。 这 样 的 代码 分 析 工 具有 很 多 ， 详 见 GitHub Gist 网 站 All Gists 页 面 。 常 用 的 静态 分 析 工 具 
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是 JSHint、JSLint、Google Closure 和 TypeScript。 

静态 代码 分 析 器 要 求 使 用 类 型 、 函 数 签名 及 其 他 指令 来 注解 JavaScript， 以 此 描述 程序 如 何在 基本 
可 执行 代码 之 外 运行 。 分 析 器 会 比较 注解 和 JavaScript 代码 的 各 个 部 分 ， 对 在 实际 运行 时 可 能 出 现 的 潜 
在 不 兼容 问题 给 出 提醒 。 
































注意 ，” 随 着 代码 数量 的 增长 ， 代 码 分 析 器 会 变 得 越 来 越 重要 ， 尤 其 是 协作 开发 者 也 在 增加 
的 情况 下 。 所 有 主流 技术 公司 都 有 着 庞大 的 JavaScript 库 ， 并 会 在 构建 流程 中 使 用 稳健 的 


静态 分 析 工 具 。 





2. 类 型 转换 错误 

类 型 转换 错误 的 主要 原因 是 使 用 了 会 自动 改变 某 个 值 的 数据 类 型 的 操作 符 或 语言 构造 。 使 用 等 于 
(== ) 或 不 等 于 ( != ) 操作 符 ， 以 及 在 if 、for 或 while 等 流 控制 语句 中 使 用 非 布尔 值 ， 经 常会 导致 
类 型 转换 错误 。 

第 3 章 曾 讨论 过 ,相等 和 不 相等 操作 符 会 自动 把 执行 比较 的 两 个 不 同类 型 的 值 转换 为 相同 类 型 。 在 
非 动态 语言 中 ， 符 号 之 间 是 直接 比较 的 ， 因 此 很 多 开发 者 在 JavaScript 中 也 会 以 相同 方式 来 错误 地 比较 
值 。 大 多 数 情况 下 ， 最 好 使 用 严格 相等 〈=== ) 和 严格 不 相等 ( !== ) 操作 符 来 避免 类 型 转换 。 来 看 下 
面 的 例子 : 




















ONsoOLe: LOG (SE 5) // true 
CGISGTLe eg 可 (5 三 ES "5")y /7 faLSe 
console.log(1 == true); // true 
console.log(1 === true); // false 





这 个 例子 分 别 使 用 了 相等 和 严格 相等 操作 符 比 较 了 数值 5 和 字符 串 "5" 。 相 等 操作 符 会 把 字符 串 "5" 
转换 为 数值 5， 然 后 再 进行 比较 ,结果 是 true。 严 格 相 等 操作 符 发 现 两 个 值 的 数据 类 型 不 同 ， 因 而 直 
接 返 回 false。 同 样 ， 对 于 1 和 true 的 比较 也 类 似 。 相 等 操作 符 认为 它们 相等 ,但 严格 相等 操作 符 认 
为 它们 不 相等 。 使 用 严格 相等 和 严格 不 相等 操作 符 可 以 避免 比较 过 程 的 类 型 转换 错误 ,强烈 推荐 用 它们 
代替 相等 和 不 相等 操作 符 。 

















注意 ”代码 风格 指南 通常 会 指出 什么 时 候 应 使 用 ===， 什 么 时 候 应 使 用 ==。 有 些 风 格 指南 
认同 只 要 始终 使 用 ===， 类 型 转换 就 不 再 是 个 问题 。 另 一 些 则 认为 除了 可 能 发 生字 符 串 / 


布尔 值 转换 的 情形 ， 在 其 他 时 候 使 用 === 均 是 用 力 过 猛 的 表现 。 





类 型 转换 错误 也 会 发 生 在 流 控制 语句 中 。 比 如 ，if 语句 会 自动 把 条 件 表达 式 转换 为 布尔 值 ， 然 后 
了 决定 下 一 步 的 走向 。 在 实践 中 ，if 语句 是 问题 比较 多 的 。 来 看 下 面 的 例子 : 


funotion. GOncat (setely St “StEdY) A 
let Fesult = Strl. + Btr2s 
if (str3) { // 不 要 | 
result += str3; 
} 
return result; 


} 
这 个 函数 的 用 意 是 把 两 个 或 三 个 字符 捉 拼 接 起 来 并 返回 结果 。 第 三 个 字符 串 是 可 选 的， 因此 必须 检 
是 否 存 在 。 如 第 3 音 所 说 ,命名 变量 如 果 没 有 被 赋值 就 会 自动 被 赋予 undefined 值 。 而 在 默认 转 
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换 中 ，ungdefineg 会 被 转换 为 布尔 值 false。 因 此 这 个 函数 的 用 意 是 在 提供 了 第 三 个 参数 的 情况 下 ， 
才 会 在 拼接 时 带 上 它 。 问 题 在 于 并 非 只 有 undaefinedq 会 转换 为 false, 字 符 串 也 不 是 唯一 可 转换 为 true 
的 值 。 假 如 第 三 个 参数 是 数值 0，if 条 件 判断 就 会 失败 ， 而 数值 1 则 会 导致 满足 条 件 。 
在 流 控制 语句 中 使 用 非 布 尔 值 作为 条 件 是 很 常见 的 错误 来 源 。 为 避免 这 类 错误 , 需要 始终 坚持 使 用 
布尔 值 作为 条 件 。 这 通常 可 以 借助 某 种 比较 来 实现 。 例 如 ， 可 以 把 前 面 的 函数 改写 为 如 下 形式 : 
function concat (strl, str2, str3){ 
let result = strl + str2; 
if (typeof str3 === "string") { // 恰当 的 比较 
result += str3; 
} 


return result; 


} 
在 这 个 重 写 的 版 本 中 ，if 语句 的 条 件 会 基于 比较 操作 返回 布尔 值 。 这 个 函数 相对 更 安全 ， 受 错误 
影响 的 可 能 性 也 更 小 。 

3. 数据 类 型 错误 

因为 JavaScript 是 松散 类 型 的 ， 所 以 变量 和 函数 参数 都 不 能 保证 会 使 用 正确 的 数据 类 型 。 开 发 者 需 
要 自己 检查 数据 类 型 ， 确 保 不 会 发 生 错误 。 数 据 类 型 错误 常 发 生 在 将 意外 值 传 给 函数 的 时 候 。 

在 前 面 的 例子 中 ,代码 检查 了 第 三 个 参数 的 数据 类 型 ， 以 确保 它 是 字符 串 ， 但 根本 没有 检查 另外 两 
个 参数 。 如 果 函 数 必须 返回 一 个 字符 串 ， 那 么 只 传人 两 个 数值 ， 忽 略 第 三 个 参数 就 会 破坏 约定 。 下 面 的 
函数 也 存在 类 似 问题 : 


// 不 安全 的 函数 ， 任 何 非 字 符 串 值 都 会 导致 错误 
function getQueryString (url) { 
CONnst DOS TE uFL.-1ndexOf (2) 
if (pos > -1){ 
return url.substring(pos +1); 
} 
return "" 


} 

这 个 函数 的 用 途 是 返回 给 定 URL 的 查询 字符 串 。 为 此 ， 它 先 用 inaexof () 在 字符 串 中 寻找 问号 ， 
如 果 找 到 则 使 用 substring () 方 法 返回 问号 后 面 的 所 有 内 容 。 这 两 个 方法 都 是 只 有 字符 串 才 有 的 ， 因 
此 传人 其 他 类 型 的 值 就 会 导致 错误 。 下 面 的 简单 类 型 检查 可 以 保证 函数 少 出 错 ; 


function 9g9etoueryString(ur1L) { 
if (typeof url === "string") { // 通过 类 型 检查 保证 安全 
let pos = url.indexOf ("?"); 
if (pos > -1) { 
return url.substring(pos +1); 













































































































































































} 
} 
return "" 


} 

在 这 个 重 写 的 版 本 中 , 第 一 步 检查 了 传人 的 值 确实 是 字符 串 。 这 样 可 以 保证 函数 永远 不 会 因为 非 字 
符 串 值 而 出 错 。 

如 上 一 节 所 述 ， 因 为 存在 类 型 转换 ， 所 以 应 该 避免 在 流 控制 语句 中 使 用 非 布尔 值 作为 条 件 。 另 外 这 
也 是 可 能 导致 类 型 错误 的 一 个 做 法 。 来 看 下 面 的 函数 : 























21.2 ”错误 处 理 685 





// 不 安全 的 函数 ， 非 数组 值 可 能 导致 错误 
function reverseSort(values) { 
if (values) { // 不 要 | 
values.sort (); 
values.reverse(); 
} 
} 


reverseSort () 图 数 可 以 使 用 数组 的 sort () 和 reverse() 方 法 , 将 数组 反 向 排序 。 由 于 if 语句 
中 的 控制 条 件 , 任何 非 数 组 值 都 会 被 转换 为 true， 从 而 导致 错误 。 另 一 个 常见 的 错误 是 将 参数 与 null 
比较 ， 比 如 : 


// 还 是 不 安全 的 函数 ， 非 数组 值 可 能 导致 错误 
function reverseSort(values) { 
if (values != null){ // 不 要 | 
Values.sort () ; 
values.reverse(); 
} 
} 


用 参数 值 与 nul1 比较 只 会 保证 不 是 两 个 值 : null 和 undefined (对 于 使 用 相等 和 不 相等 操作 符 
而 言 是 等 价 的 ),。 与 null 比较 不 足以 保证 适当 的 值 ， 因 此 不 要 使 用 这 种 方式 。 出 于 同样 的 原因 ， 也 不 
推荐 与 undefined 比较 。 
另 一 个 错误 的 做 法 是 在 检测 特性 时 只 检查 使 用 的 特性 。 下 面 是 一 个 例子 : 
// 仍 是 不 安全 的 函数 ， 非 数组 值 可 能 导致 错误 
function reverseSort(values) { 
if (typeof values.sort === "function") { // 不 要 | 
values.sort (); 
values.reverse(); 
} 
} 
在 这 个 例子 中 ， 代 码 检查 了 参数 上 是 否 存在 sort () 方 法 。 假 如 传人 的 参数 确实 有 一 个 sort () 方 
法 ， 但 参数 本 身 不 是 数组 ,那么 在 执行 reverse () 时 也 会 报告 错误 。 如 果 知 道 预期 的 确切 类 型 ， 那 么 
最 好 使 用 instanceof 来 确定 值 的 正确 类 型 ， 如 下 所 示 : 
// 安全 ， 非 数组 值 被 忽略 
function reverseSort(values) { 
if (values instanceof Array) { // 修复 
values.sort (); 
values.reverse(); 
} 
} 
最 后 一 个 reverseSort () 是 安全 的 , 它 测试 了 values 参数 是 不 是 Array 的 实例 。 这 样 ， 函 数 可 
以 保证 忽略 非 数组 参数 。 
一 般 来 说 , 原始 类 型 的 值 应 该 使 用 typeof 检测 ， 而 对 象 值 应 该 使 用 instanceof 检测 。 根 据 函 数 
的 用 法 ， 不 一 定 要 检查 每 个 参数 的 数据 类 型 ， 但 对 外 的 任何 API 都 应 该 做 类 型 检查 以 保证 正确 执行 。 
4. 通信 错误 
随 着 Ajax 编程 的 出 现 ，Web 应 用 程序 在 运行 期 间 动态 加 载 数据 和 功能 成 为 常见 的 情形 。JavaScript 
和 服务 器 之 间 的 通信 也 会 出 现 错误 。 
第 一 种 错误 是 URL 格式 或 发 送 数据 的 格式 不 正确 。 通 常 ， 在 把 数据 发 送 到 服务 器 之 前 没有 用 
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encodeURIComponent () 编码 ， 会 导致 这 种 错误 。 例 如 ， 下 面 的 URL 格式 就 不 正确 : 
http://www.yourdomain.com/?redir=httpb://www.Ssomeotherdomain .com?a=b&c=d 
这 个 URL 可 以 通过 用 encodeURIComponent () 编码 "z*edqir=" 后 面 的 内 容 来 修复 ， 得 到 的 结果 如 
下 所 示 : 
http://www.example.com/?redir=http%3A%2F%$2Fwww.Ssomeotherdomain.com%3Fa%3Db%26c%3Dd 
对 于 查询 字符 串 ， 应 该 都 要 通过 encodeURIComponent () 编码 。 为 此 ， 可 以 专门 定义 一 个 处 理 查 
询 字 符 串 的 函数 ， 比 如 : 


function addQueryStringArg (url, name, value) { 






























































if ‘(url.indexOf("?") ==. =~1)1{ 
UT 二 
} Else 


by a 


} 


url += 'S${encodeURIComponent (name)=$ {encodeURIComponent (value)}'; 
return url; 


} 

这 个 函数 接收 三 个 参数 : 要 添加 查询 字符 串 的 URL、 参 数 名 和 参数 值 。 如 果 URL 不 包含 问号 ， 则 
要 给 它 加 上 一 个 ; 否则 就 要 使 用 和 号 (& )， 以 便 拼接 更 多 参数 和 值 ， 因 为 这 意味 着 前 面 已 有 其 他 查询 参 
数 了 。 查 询 字 符 串 的 名 和 值 在 被 编码 之 后 会 被 添加 到 URL 中 。 可 以 像 下 面 这 样 使 用 这 个 函数 : 


const url = "http://www.somedomain.com"; 
const newUrl = addQueryStringArg (url, "redir", 
"http://www.someotherdomain.com?a=b&c=d"); 

















console.log (newUr1);} 
使 用 这 个 函数 而 不 是 手动 构建 URL 可 以 保证 编码 合适 ， 以 避免 相关 错误 发 生 。 

在 服务 器 响应 非 预期 值 时 也 会 发 生 通 信 错 误 。 在 动态 加 载 脚本 或 样式 时 , 请 求 的 资源 有 可 能 不 可 用 。 
有 些 浏览 器 在 没有 返回 预期 资源 时 会 静默 失败 ， 而 其 他 浏览 器 则 会 报告 错误 。 不 过 , 在 动态 加 载 资源 的 
情况 下 出 错 ， 是 不 太 好 做 错误 处 理 的 。 有 时 候 ， 使 用 Ajax 通信 可 能 会 提供 关于 错误 条 件 的 更 多 信息 。 


21.2.6 ”区 分 重大 与 非 重大 错误 


任何 错误 处 理 策略 中 一 个 非常 重要 的 方面 就 是 确定 某 个 错误 是 否 为 重大 错误 。 具有 以 下 一 个 或 多 个 

特性 的 错误 属于 非 重 大 错误 : 

口 不 会 影响 用 户 的 主要 任务 ; 

口 只 会 影响 页 面 中 某 个 部 分 ; 

口 可 以 恢复 ; 
口 重复 操作 可 能 成 功 。 

本 质 上 ， 不 需要 担心 非 重大 错误 。 例 如 ，Gmail 有 一 个 功能 ， 可 以 让 用 户 在 其 界面 上 发 送 环 聊 
(Hangouts ) 消息 。 如 果 在 某 个 条 件 下 ， 环 聊 功 能 不 工作 了 ， 就 不 能 算 重大 错误 ， 因 为 这 不 是 应 用 程序 
的 主要 功能 。Gmail 主要 用 于 阅读 和 撰写 电子 邮件 ， 只 要 用 户 可 以 做 到 这 一 点 ， 就 没有 理由 中 断 用 户 体 
验 。 对 于 非 重 大 错误 ， 无 须 明确 给 用 户 发 送 消息 。 可 以 将 受 影响 的 页 面 区 域 替 换 成 一 条 消息 ， 表 示 该 功 
能 暂时 不 能 使 用 ， 但 不 需要 中 断 用 户 体验 。 
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男 一 方面 ,重大 错误 具备 如 下 特性 : 
口 应 用 程序 绝对 无 法 继续 运行 ; 
口 错误 严重 影响 了 用 户 的 主要 目标 ; 
口 会 导致 其 他 错误 发 生 。 
理解 JavaScript 中 何 时 会 发 生 重大 错误 极其 重要 , 因为 这 样 才能 采取 应 对 措施 。 当 重大 错误 发 生 时 ， 
应 该 立即 发 送 消息 让 用 户 知晓 自己 不 能 再 继续 使 用 应 用 程序 了 。 如 果 必 须 刷 新 页 面 才能 恢复 应 用 程序 ， 
那 就 应 该 明确 告知 用 户 ， 并 提供 一 个 自动 刷新 页 面 的 按钮。 
代码 中 则 不 要 区 分 什么 是 或 什么 不 是 重大 错误 。 非 重大 错误 和 重大 错误 的 区 别 主要 体现 在 对 用 户 的 
影响 上 。 好 的 代码 设计 意味 着 应 用 程序 某 个 部 分 的 错误 不 会 影响 其 他 部 分 ,实际 上 根本 不 应 该 相关 。 例 
如 , 在 个 性 化 的 主页 上 , 比如 Gmail, 可 能 包含 多 个 相互 独立 的 功能 模块 。 如 果 每 个 模块 都 通过 JavaScript 
调用 来 初始 化 ， 那 就 可 能 会 在 代码 中 看 到 以 下 逻辑 : 
for (let mod of mods){ 
mod.init(); // 可 能 的 重大 错误 
} 
表面 上 看 ， 这 段 代 码 没什么 问题 ， 就 是 依次 调用 每 个 模块 的 init () 方 法 。 问 题 在 于 ， 这 里 只 要 有 
一 个 模块 的 init () 方 法 出 错 , 数组 中 其 后 的 所 有 模块 都 不 会 被 初始 化 。 如 果 错 误 发 生 在 第 一 个 模块 上 ， 
页 面 上 就 没有 模块 会 被 初始 化 了 。 人 逻辑 上 ， 这样 写 代码 是 不 合适 的 ， 因 为 每 个 模块 相互 独立 ,各 自 功 能 
没有 相关 性 。 由 此 可 能 导致 重大 错误 的 原因 是 代码 的 结构 。 好 在 可 以 简单 地 重 写 以 上 代码 ， 让 每 个 模块 
的 错误 变 成 非 重 大 错误 : 
for (let mod of mods){ 
try { 
mod.init(); 
} catch (ex){ 
// 在 这 里 处 理 错误 
} 
+} 


通过 在 for 循环 中 加 入 try/catch 语句 ， 模 块 初始 化 过 程 中 的 任何 错误 都 不 会 影响 其 他 模块 初始 
化 。 如 果 代 码 中 有 错误 发 生 ， 则 可 以 单独 处 理 ， 并 不 会 影响 用 户 体验 。 


21.2.7 ”把 错误 记录 到 服务 器 中 


Web 应 用 程序 开发 中 的 一 个 常见 做 法 是 建立 中 心 化 的 错误 日 志 存 储 和 跟踪 系统 。 数据库 和 服务 器 错 
误 正常 写 到 日 志 中 并 按照 常用 API 加 以 分 类 。 对 复杂 的 Web 应 用 程序 而 言 ， 最 好 也 把 JavaScript 错误 发 
送 回 服务 器 记录 下 来 。 这 样 做 可 以 把 错误 记录 到 与 服务 器 相同 的 系统 , 只 要 把 它们 归 类 到 前 端 错误 即 可 。 
使 用 相同 的 系统 可 以 进行 相同 的 分 析 ， 而 不 用 考虑 错误 来 源 。 

要 建立 JavaScript 错误 日 志 系统 ， 首 移 需 要 在 服务 右上 有 页 面 或 和 人口 可 以 处 理 错误 数据 。 该 页 面 只 
要 从 查询 字符 串 中 取得 错误 数据 , 然后 把 它们 保存 到 错误 日 志 中 即 可 。 比 如, 该 页 面 可 以 使 用 如 下 代码 : 


function logError(sev, msg) { 
let img = new Image(), 
encodedSev = encodeURIComponent (sev), 
encodedMsg = encodeURIComponent (msg); 
img.src = 'log.php?sev=$ {encodedSev}&msg=$ {encodedMsg}'; 
. 
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logError () 图 数 接收 两 个 参数 : 严重 程度 和 错误 消息 。 严 重 程度 可 以 是 数值 或 字符 串 ， 具 体 取决 

于 使 用 的 0 EE。 这 里 使 用 Image 对 象 发 送 请 求 主要 是 从 灵活 性 方面 考虑 的 。 

口 所 有 浏览 器 都 支持 对 象 ， 即 使 不 支持 XMLHEttpRequest 对 象 也 一 样 。 

口 不 受 跨 域 规则 限制 。 通 常 ， 接 收 错误 消息 的 应 该 是 多 个 服务 器 中 的 一 个 ， 而 XMLHttpRequest 

此 时 就 比较 麻烦 。 

口 记录 错误 的 过 程 很 少 出 错 。 大 多 数 Ajax 通信 借助 JavaScript 库 的 包装 来 处 理 。 如 果 这 个 库 本 身 
出 错 ， 而 你 又 要 利用 它 记录 错误 ， 那么 显然 错误 消息 永远 不 会 发 给 服务 器 。 

只 要 是 使 用 try/catch 语句 的 地 方 ， 都 可 以 把 相关 错误 记录 下 来 。 下 面 是 一 个 例子 : 


for (let mod of mods)t{ 
try { 
mod.init(); 
} catch (ex){ 
logError("nonfatal", 'Module init failed: S${ex.message}'); 
} 
} 


在 这 个 例子 中 ,模块 初始 化 失败 就 会 调用 1ogError () 函数 。 第 一 个 参数 是 表示 错误 严重 程度 的 
"nonfatal"， 第 二 个 参数 在 上 下 文 信息 后 面 追加 了 JavaScript 错误 消息 。 记 录 到 服务 器 的 错误 消息 应 
该 包含 尺 量 多 的 上 下 文 信息 ， 以 便 找 出 错误 的 确切 原因 。 


21.3 ”调试 技术 


在 JavaScript 调试 器 出 现 以 前 ， 开 发 者 必须 使 用 创造 性 的 方法 调试 代码 。 结 果 就 出 现 了 各 种 各 样 专 
输出 调试 信息 而 设计 的 代码 。 其 中 最 为 常用 的 调试 技术 是 在 相关 代码 中 插入 alert (), 这 种 方式 既 
( 调试 完 之 后 还 得 清理 ) 又 麻烦 〈 如 果 有 漏洞 的 警告 框 出 现在 产品 环境 中 ， 会 给 用 户 造 成 不 便 )。 
再 推荐 将 警告 框 用 于 调试 ， 因 为 有 其 他 更 好 的 解决 方案 。 


21.3.1 把 消息 记录 到 控制 台 


所 有 主流 浏览 器 都 有 JavaScript 控制 台 , 该 控制 台 可 用 于 查询 JavaScript 错误 。 另外， 这些 浏 览 右 都 
支持 通过 console 对 象 直接 把 JavaScript 消息 写 人 控制 台 ， 这 个 对 象 包含 如 下 方法 。 
D error (message) : 在 控制 台中 记录 错误 消息 。 
口 info (message) : 在 控制 台中 记录 信息 性 内 容 。 
口 log (message) : 在 控制 台 记 录 常 规 消息 。 
口 warn (message) : 在 控制 台中 记录 警告 消息 。 
记录 消息 时 使 用 的 方法 不 同 , 消息 显示 的 样式 也 不 同 。 错 误 消息 包含 一 个 红 义 图 标 ， 而 警告 消息 包 
含 一 个 黄色 叹 号 图 标 。 可 以 像 下 面 这 样 使 用 控制 台 消 息 : 


function sum(numl, num2)f{ 
console.log('Entering sum(), arguments are S${numl},s{num2}'); 
console.log("Before calculation"); 
const result = numl + num2; 
console.log("After calculation"); 
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console.log("Exiting sum()"); 
return result; 
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在 调用 sum() 函数 时 ， 会 有 一 系列 消息 输出 到 控制 台 以 辅助 调试 。 
把 消息 输出 到 JavaScript 控制 台 可 以 辅助 调试 代码 ， 但 在 产品 环境 下 应 该 删除 所 有 相关 代码 。 这 可 
以 在 部 署 时 使 用 代码 自动 完成 清理 ， 也 可 以 手动 删除 。 











注意 ，” 相 比 于 使 用 警告 框 ， 打 印 上 日 志 消 息 是 更 好 的 调试 方法 。 这 是 因为 警告 框 会 阻塞 代码 
执行 ， 从 而 影响 对 异步 操作 的 计时 ， 进 而 影响 代码 的 结果 。 打 印 日 志 也 可 以 随意 输出 任意 


多 个 参数 并 检查 对 象 实例 ( 警告 框 只 能 将 对 象 序列 化 为 一 个 字符 串 再 展示 出 来 ， 因 此 经 常 
会 看 到 Object [Object]。 





21.3.2 ”理解 控制 台 运 行 时 


浏览 器 控制 台 是 个 读 取 - 求 值 - 打 印 -循环 (REPL，read-eval-print-loop )， 与 页 面 的 JavaScript 运行 
时 并 发 。 这 个 运行 时 就 像 浏 览 器 对 新 出 现在 DOM 中 的 <script> 标 签 求 值 一 样 。 在 控制 台中 执行 的 命 
令 可 以 像 页 面 级 JavaScript 一 样 访问 全 局 和 各 种 API。 控 制 台中 可 以 执行 任意 数量 的 代码 ， 与 它 可 能 会 
阻塞 的 任何 页 面 级 代码 一 样 。 修 改 、 对 象 和 回调 都 会 保留 在 DOM 和 运行 时 中 。 

JavaScript 运行 时 会 限制 不 同窗 口 可 以 访问 哪些 内 容 ， 因 而 在 所 有 主流 浏览 器 中 都 可 以 选择 在 哪个 
窗口 中 执行 JavaScript 控制 台 输 入 。 你 所 执行 的 代码 不 会 有 特权 提升 ， 仍 会 受 跨 源 限制 和 其 他 浏览 器 施 
加 的 控制 规则 约束 。 

控制 台 运 行 时 也 会 集成 开发 者 工具 ， 提 供 常规 JavaScript 开发 中 所 没有 的 上 下 文 调试 工具 。 其 中 
个 非常 有 用 的 工具 是 最 后 点 击 选择 器 ， 所 有 主流 浏览 器 都 会 提供 。 在 开发 者 工具 的 Element ( 元素 ) 标 
签 页 内 , 单 击 DOM 树 中 一 个 节点 , 就 可 以 在 Console( 控制 台 ) 标 签 页 中 使 用 so 引用 该 节点 的 JavaScript 
实例 。 它 就 跟 普 通 的 JavaScript 实例 一 样 ， 因 此 可 以 读 取 属 性 ( 如 $0.scrollwigth ), 或 者 调用 成 员 方 
法 (如 so.remove() )。 































































































































































































21.3.3 ”使 用 JavaScript 调试 器 


在 所 有 主流 浏览 器 中 都 可 以 使 用 的 还 有 JavaScript 调试 器 。ECMAScript 5.1 规范 定义 了 debugger 
关键 字 ， 用 于 调用 可 能 存在 的 调试 功能 。 如 果 没 有 相关 的 功能 ， 这 条 语句 会 被 简单 地 跳 过 。 可 以 像 下 钙 
这 样 使 用 aebugger 关键 字 : 


function pauseExecution()t{ 
console.log("Will print before breakpoint"); 
debugger; 
console.log("Will not print until breakpoint continues"); 


} 

在 运行 时 碰 到 这 个 关键 字 时 ， 所 有 主流 浏览 器 都 会 打开 开发 者 工具 面板 ， 并 在 指定 位 置 显示 断 点 。 
然后 ， 可 以 通过 单独 的 浏览 器 控制 台 在 断 点 所 在 的 特定 词法 作用 域 中 执行 代码 。 此 外 ,还 可 以 执行 标准 
的 代码 调试 器 操作 〈 单 步 进 入 、 单 步 跳 过 、 继 续 ， 等 等 )。 

浏览 絮 也 支持 在 开发 者 工具 的 源 代码 标签 页 中 选择 希望 设置 断 点 的 代码 行 来 手动 设置 断 点 (不 使 用 
debugger 关键 字 )。 这 样 设置 的 断 点 与 使 用 aebugger 关键 字 设 置 的 一 样 ， 只 是 不 会 在 不 同 浏览 器 会 
话 之 间 保 持 。 
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21.3.4 在 页 面 中 打印 消息 


另 一 种 常见 的 打印 调试 消息 的 方式 是 把 消息 写 到 页 面 中 指定 的 区 域 。 这 个 区 域 可 以 是 所 有 页 面 中 都 
包含 的 元 素 , 但 仅 用 于 调试 目的 ; 也 可 以 是 在 需要 时 临时 创建 的 元 素 。 例 如 , 可 以 定义 这 样 1og () 函数 : 
function log(message) { 
// 这 个 函数 的 词法 作用 域 会 使 用 这 个 实例 
// 而 不 是 windqow.console 
const console = document .getElementById("debuginfo"); 
if (console === null)t 
console = document .createElement ("div"); 
console.id = "debuginfo",; 
console.style.background = "#dedede"; 
console.style.border = "1px solid silver"; 
console.style.padding = "5px"; 
console.style.width = "400px"; 
console.style.position = "absolute"; 
console.style.right = "0px"; 
console.style.top = "0px"; 
document .body .appendChild(console); 
} 
console.innerHTML += '<p> S${message}</p>'; 


} 

在 这 个 10g () 函数 中 ,代码 先 检测 是 否 已 创建 了 调试 用 的 元 素 。 如 果 没 有 ， 就 创建 一 个 新 <aiv> 元 
素 并 给 它 添加 一 些 样式 ， 以 便 与 页 面 其 他 部 分 区 分 出 来 。 此 后 ， 再 使 用 innerHTML 属性 把 消息 写 到 这 
个 <aiv> 中 。 结 果 就 是 在 页 面 的 一 个 小 区 域内 显示 日 志 信息 。 










































































注意 与 在 控制 人 台 输 出 消息 一 样 ， 在 页 面 中 输入 消息 的 代码 也 需要 从 生产 环境 中 删除 。 





21.3.5 ”补充 控制 台 方 法 


记 住 使 用 哪个 日 志方 法 (原生 的 console.1og() 和 自 定义 的 10g () 方 法 ), 对 开发 者 来 说 是 一 种 负 
担 。 因 为 console 是 一 个 全 局 对 象 ， 所 以 可 以 为 这 个 对 象 添加 方法 ， 也 可 以 用 自 定义 的 函数 重 写 已 有 
的 方法 ， 这 样 无 论 在 哪里 用 到 的 日 志 打 印 方 法 ， 都 会 按照 自 定 义 的 方式 行事 。 

比如 ， 可 以 这 样 重新 定义 console.1og 了 荫 数 : 

// 把 所 有 参数 拼接 为 一 个 字符 串 ， 然 后 打印 出 结果 


console.log = function() { 
// 'arguments' 并 没有 join 方法 ， 这 里 先 把 它 转 换 为 数组 
const args = Array.prototype.slice.call (arguments); 
console.log(args.join(', ')); 


} 


这 样 ， 其 他 代码 调用 的 将 是 这 个 函数 ， 而 不 是 通用 的 日 志方 法 。 这 样 的 修改 在 页 面 刷 新 后 会 失效 ， 
因此 只 是 调试 或 拦截 日 志 的 一 个 有 用 而 轻 量 的 策略 。 


21.3.6” 抛 出 错误 


如 前 所 述 ， 抛 出 错误 是 调试 代码 的 很 好 方式 。 如 果 错 误 消 息 足 够 具体 ， 只 要 看 一 眼 错误 就 可 以 确定 
原因 。 好 的 错误 消息 包含 关于 错误 原因 的 确切 信息 , 因此 可 以 减少 额外 调试 的 工作 量 。 比 如 下 面 的 函数 : 
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function divide(numl, num2) { 

return numl / num2; 

} 

这 个 简单 的 函数 执行 两 个 数 的 除法 , 但 如 果 任 何 一 个 参数 不 是 数值 , 则 返回 NaN。 当 Web 应 用 程序 
意外 返回 NaN 时 , 简单 的 计算 可 能 就 会 出 问题 。 此 时 ,可 以 检查 每 个 参数 的 类 型 是 不 是 数值 ,然后 再 进 
行 计算 。 来 看 下 面 的 例子 : 

function divide(numl, num2) { 

if (typeof num1 != "number" || typeof num2 != "number")t{ 
throw new Error("divide(): Both arguments must be numbers."); 
} 


return numl / num2; 


} 

这 里 ,任何 一 个 参数 不 是 数值 都 会 抛 出 错误 。 错误 消 息 中 包含 函数 名 和 错误 的 具体 原因 。 当 浏览 
报告 这 个 错误 消息 时 ,你 立即 就 能 根据 它 包 含 的 信息 定位 到 问题 , 包括 问题 的 解决 方案 。 相 对 于 没 那 么 
具体 的 浏览 需 错 误 消息 ， 这 个 错误 消息 显示 更 有 价值 。 

在 大 型 应 用 程序 中 , 自 定义 错误 通常 使 用 assert () 函数 抛 出 错误 。 这 个 函数 接收 一 个 应 该 为 true 
的 条 件 ， 并 在 条 件 为 false 时 抛 出 错误 。 下 面 是 一 个 基本 的 assert () 函数 : 


function assert (condition, message) { 
if (!condition) { 
throw new Error (message); 
} 
} 


这 个 assert () 函数 可 用 于 代替 多 个 if 语句 ， 同 时 也 是 记录 错误 的 好 地 方 。 下 面 的 代码 演示 了 如 


























































































































何 使 用 它 : 
function divide(numl, num2) { 
assert (typeof numl == "number" && typeof num2 == "number", 


"divide(): Both arguments must be numbers."); 
return numl / num2; 


} 
相 比 于 之 前 的 例子 , 使 用 assert () 函数 可 以 减少 抛 出 自 定义 错误 所 需 的 代码 量 ， 并 且 让 代码 更 好 
理解 。 


21.4 旧版 IE 的 常见 错误 


IE 曾 是 最 难 调试 JavaScript 错误 的 浏览 器 之 一 。 该 浏览 器 的 旧版 本 抛 出 的 错误 通常 比较 短 ， 比 较 含 
糊 , 缺少 上 下 文 。 接 下 来 几 节 分 别 讨论 旧版 正中 可 能 会 出 现 的 常见 旦 难于 调试 的 JavaScript 错误 。 因 为 
这 些 浏 览 器 不 支持 ES6， 所 以 代码 会 考虑 向 后 兼容 。 


21.4.1 无 效 字符 


JavaScript 文件 中 的 代码 必须 由 特定 字符 构成 。 在 检测 到 JavaScript 文件 中 存在 无 效 字符 时 , IE 会 抛 
出 "invalid character" 错 误 。 所 谓 无 效 字符 ， 指 的 是 JavaScript 语法 中 没有 定义 过 的 字符 。 例 如 ， 
一 个 看 起 来 像 减 号 而 实际 上 并 不 是 减 号 的 字符 (Unicode 值 为 \u2013 )。 这 个 字符 不 能 用 于 代替 减 号 
(ASCI 码 为 45 )， 因 为 它 不 是 JavaScript 语法 定义 的 减 号 。 这 个 特殊 字符 经 常会 被 自动 插入 Word 文档 ， 
因此 如 果 把 它 从 Word 文档 复制 到 文本 编辑 器 然后 在 下 中 运行 , IE 就 会 报告 文件 中 包含 非法 字符 。 其 他 
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浏览 器 也 类 似 ，Firefox 抛 出 "illegal character" 错 误 ，Safari 报告 语法 错误 ， 而 Opera 则 报告 
Referencegrror (因为 把 这 个 字符 当成 了 未 定义 标识 符 来 解释 )。 


21.4.2 ”未 找到 成 员 


如 前 所 述 ， 旧 版 正中 所 有 DOM 对 象 都 是 用 COM 对 象 实现 的 ， 并 非 原生 JavaScript 对 象 。 在 涉及 
垃圾 回收 时 ， 这 可 能 会 导致 很 多 奇怪 的 行为 。 其 中 ，"member not found" 错 误 是 正 中 垃圾 回收 程序 
常 报告 的 错误 。 

这 个 错误 通常 会 在 给 一 个 已 被 销毁 的 对 象 赋值 时 发 生 。 这 个 对 象 必须 是 COM 对 象 才 会 出 现 这 个 消 
息 。 最 好 的 一 个 例子 就 是 event 对 象 。 正 的 event 对 象 是 作为 window 的 一 个 属性 存在 的 ， 会 在 事件 
发 生 时 创建 ， 在 事件 处 理 程序 执行 完毕 后 销毁 。 因 此 ， 如 果 你 想 在 稍 后 会 执行 的 闭 包 中 使 用 event 对 
象 ， 尝 试 给 event 对 象 赋 值 就 会 导致 这 个 错误 ， 如 下 面 的 例子 所 示 : 

document .onclick = function() { 

Var event = window.event; 
setTimeout (function(){ 
event .returnValue = false; // 未 找到 成 员 
} 7 T0000) 

下 

在 这 个 例子 中 ， 文 档 被 添加 了 单 击 事件 处 理 程序 。 事 件 处 理 程序 把 wingow.event 对 象 保存 在 一 
个 名 为 event 的 本 地 变量 中 。 然 后 , 在 传递 给 set Timeout () 的 闭 包 中 引用 这 个 事件 变量 。 当 onclick 
事件 处 理 程序 退出 后 ,event 对 象 会 被 销毁 ， 因 此 闭 包 中 对 它 的 引用 也 就 不 存在 了 ， 于 是 就 会 报告 未 找 
到 成 员 错误 。 之 所 以 给 event .returnvalue 赋值 会 导致 "member not found" 错 误 ， 是 因为 不 能 给 
已 将 其 成 员 销毁 的 COM 对 象 赋值 。 


21.4.3 ”未 知 运行 时 错误 


使 用 innerHTML 或 outerHTML 属性 以 下 面 一 种 方式 添加 HTML 时 会 发 生 未 知 运行 时 错误 : 比如 将 
块 级 元 素 插 入 行内 元 素 , 或 者 在 表格 的 任何 部 分 (<table>、<tbody> 等 ) 访问 了 其 中 一 个 属性 。 例 如 ， 
从 技术 角度 来 说 ，<p> 标 签 不 能 包含 男 一 个 块 级 元 素 ， 如 <aiv>， 因 此 以 下 代码 会 导致 未 知 运行 时 错误 : 
p.innerHTML = "<div>Hi</div>"; // where p contains a <p> element 
在 将 块 级 元 素 插 入 不 恰当 的 位 置 时 ， 其 他 浏览 器 会 尝试 纠正 ， 这 样 就 不 会 发 生 错 误 , 但 下 在 这 种 
情况 下 要 严格 得 多 。 


21.4.4 ”语法 错误 


通常 ， 当 I 报告 语法 错误 时 ， 原 因 是 很 清楚 的 。 一 般 来 说 ， 可 以 通过 错误 消息 追踪 到 少 了 一 个 分 
号 或 括号 错 配 。 不 过 ， 有 一 种 情况 下 报告 的 语法 错误 并 不 清楚 。 

如 果 网 页 中 引用 的 一 个 外 部 JavaScript 文件 由 于 某 种 原因 返回 了 非 JavaScript 代码 ， 则 正 会 抛 出 语 
法 错误 。 例 如 ， 错 误 地 把 <script> 标 签 的 src 属性 设置 为 指向 一 个 HTML 文件 ， 就 会 导致 语法 错误 。 
通常 会 报告 该 语法 错误 发 生 在 脚本 第 一 行 的 第 一 个 字符 。Opera 和 Safari 此 时 也 会 报告 语法 错误 ， 但 它 
们 也 会 报告 是 引用 文件 不 当 导致 的 问题 .IE 没有 这 些 信 息 , 因此 需要 仔细 检查 引用 的 每 个 外 部 JavaScript 
文件 。Firefox 会 忽略 作为 JavaScript 引用 的 非 JavaScript 文件 导致 的 解析 错误 。 
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这 种 错误 通常 发 生 在 服务 需 端 动态 生成 JavaScript 的 情况 下 。 很 多 服务 器 端 语言 会 在 发 生 运行 时 错 
误 时 ， 自 动向 输出 中 插入 HTML。 这 种 输出 显然 会 导致 JavaScript 语法 错误 。 如 果 你 碰 到 了 难以 排除 的 
语法 错误 ， 可 以 仔细 检查 所 有 外 部 文件 ， 确 保 没 有 文件 包含 服务 器 由 于 错误 而 搬入 的 HTML。 


21.4.5 “系统 找 不 到 指定 资源 


还 有 一 个 可 能 最 没 用 的 消息 :“The system cannot locate the resource specified”( 系统 找 不 到 指定 资 
源 ), 这 个 错误 会 在 JavaScript 向 某 个 URL 发 送 请 求 ,而 该 URL 长 度 超过 了 正人 允 许 的 最 大 URL 长 度 ( 2083 
个 字符 ) 时 发 生 。 这 个 长 度 限 制 不 仅 针对 JavaScript， 而 且 针对 IE 本 身 。( 其 他 浏览 器 没有 这 么 严格 地 
限制 URL 长 度 。) 另外 ，IE 对 URL 路 径 还 有 2048 个 字符 的 限制 。 下 面 的 代码 会 导致 这 个 错误 : 


function createLongUrl (url) { 





















































YT 
for (var i = 0, len = 2500; i < len; i++){ 
Ss + "ani 


} 


return url + s; 


} 


Var x = new XMLHttpRequest () ; 
x.open ("get", createLongUrl ("http://www.somedomain.com/"), true); 
x.send (null); 


在 这 个 例子 中 , xMLHttpRequest 对 象 尝试 向 超过 URL 长 度 限制 的 地 址 发 送 请 求 。 在 调用 open () 
方法 时 ,错误 会 发 生 。 为 避免 这 种 错误 ,一 个 办 法 是 缩短 请 求 成 功 所 需 的 查询 字符 串 ， 比 如 缩短 参数 名 
或 去 掉 不 必要 的 数据 。 另 一 个 办 法 是 改 为 使 用 POST 请 求 ， 不 用 查询 字符 串 而 通过 请 求 体 发 送 数 据 。 


21.5 小结 


对 于 今天 复杂 的 Web 应 用 程序 而 言 ，JavaScript 中 的 错误 处 理 十 分 重要 。 未 能 预测 什么 时 候 会 发 生 
错误 以 及 如 何 从 错误 中 恢复 , 会 导致 糟糕 的 用 户 体验 ,甚至 造成 用 户 流 失 。 大 多 数 浏览 器 默认 不 向 用 户 
报告 JavaScript 错误 ， 因 此 在 开发 和 调试 时 需要 自己 实现 错误 报告 。 不 过 在 生产 环境 中 ， 不 应 该 以 这 种 
方式 报告 错误 。 

下 列 方法 可 用 于 阻止 浏览 器 对 JavaScript 错误 作出 反应 。 

口 使 用 try/catch 语句 ， 可 以 通过 更 合适 的 方式 对 错误 做 出 处 理 ， 避 人 免 浏 览 器 处 理 。 

口 定义 window.onerror 事件 处 理 程序 ,所 有 没有 通过 try/catch 处 理 的 错误 都 会 被 该 事件 处 理 
程序 接收 到 ( 仅 限 IE、Firefox 和 Chrome )。 

开发 Web 应 用 程序 时 ， 应 该 认真 考虑 可 能 发 生 的 错误 ， 以 及 如 何 处 理 这 些 错误 。 

口 首先 ， 应 该 分 清 哪 些 算 重大 错误 ， 哪 些 不 算 重 大 错误 。 

口 然后 ， 要 通过 分 析 代 码 预 测 很 可 能 发 生 哪些 错误 。 由 于 以 下 因素 ，JavaScript 中 经 常 出 现 错 误 : 
罩 类 型 转换 ; 
图 数据 类 型 检测 不 足 ; 
量 铝 服 务 器 发 送 错误 数据 或 从 服务 吉 接 收 到 错误 数据 。 

IE 、Firefox 、Chrome 、Opera 和 Safari 都 有 JavaScript 调试 器 ， 有 的 内 置 在 浏览 器 中 ， 有 的 是 作为 扩 
展 ， 需 另行 下 载 。 所 有 调试 器 都 能 够 设置 断 点 、 控 制 代码 执行 和 在 运行 时 检查 变量 值 。 
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信人 二 
处 理 XML 


本 章 内 容 

口 浏览 器 对 XML DOM 的 支持 
口 在 JavaScript 中 使 用 XPath 
口 使 用 XSLT 处 理 器 



































XML 曾 一 度 是 在 互联 网 上 存储 和 传输 结构 化 数据 的 标准 。XML 的 发 展 反 映 了 Web 的 发 展 ， 因 为 
DOM 标准 不 仅 是 为 了 在 浏览 器 中 使 用 , 而 且 还 为 了 在 桌面 和 服务 器 应 用 程序 中 处 理 XML 数据 结构 。 在 
没有 DOM 标准 的 时 候 ， 很 多 开发 者 使 用 JavaScript 编写 自己 的 XML 解析 器 。 自 从 有 了 DOM 标准 ， 所 
有 浏览 器 都 开始 原生 支持 XML 、XML DOM 及 很 多 其 他 相关 技术 。 


22.1 浏览 器 对 XML DOM 的 支持 


为 很 多 浏览 器 在 正式 标准 问世 之 前 就 开始 实现 XML 解析 方案 ， 所 以 不 同 浏览 器 对 标准 的 支持 不 
仅 有 级 别 上 的 差异 ， 也 有 实现 上 的 差异 。DOM Level 3 增加 了 解析 和 序列 化 能 力 。 不 过 ,在 DOM Level 3 
制定 完成 时 ， 大 多 数 浏览 絮 也 已 实现 了 自己 的 解析 方案 。 


22.1.1 DOM Level 2 Core 


正如 第 12 章 所 述 ,DOM Level2 增 加 了 aocument . implementation 的 createDocument () 方 法 。 
有 读者 可 能 还 记得 ， 可 以 像 下 面 这 样 创建 空 XML 文档 : 

let xmldom = document.implementation.createDocument (namespaceUri, root, doctype); 

在 JavaScript 中 处 理 XML 时 ，root 参数 通常 只 会 使 用 一 次 ， 因 为 这 个 参数 定义 的 是 XML DOM 
中 aocument 元 素 的 标签 名 。namespaceUri 参数 用 得 很 少 ， 因 为 在 JavaScript 中 很 难 管理 命名 空间 。 
doctype 参数 则 更 是 少 用 。 

要 创建 一 个 document 对 象 标签 名 为 <root> 的 新 XML 文档 ， 可 以 使 用 以 下 代码 : 


let xmldom = document.implementation.createDocument ("", "root", null); 

















































































































console.log(xmldom.documentElement .tagName); // "root" 


let childq = xmldom.createElement ("child"); 
xmldom.documentElement .appendChild(child); 


这 个 例子 创建 了 一 个 XML DOM 文档 , 该 文档 没有 默认 的 命名 空间 和 文档 类 型 。 注意 ， 即 使 不 指定 
命名 空间 和 文档 类 型 ， 参 数 还 是 要 传 的 。 命 名 空间 传 入 空 字符 串 表 示 不 应 用 命名 空间 ， 文 档 类 型 传 入 
null 表示 没有 文档 类 型 。xmlaom 变量 包含 DOM Level 2 Document 类 型 的 实例 ， 包 括 第 12 章 介 绍 的 
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让 


所 有 DOM 方法 和 属性 。 在 这 个 例子 中 , 我 们 打印 了 aocument 元 素 的 标签 名 ， 然 后 又 为 它 创建 并 添加 
了 一 个 新 的 子 元 素 。 

要 检查 浏览 器 是 否 支 持 DOM Level 2 XML ， 可 以 使 用 如 下 代码 : 

let hasxmlDom = document.implementation.hasFeature("XML", "2.0"); 

实践 中 ， 很 少 需要 凭空 创建 XML 文档 ， 然 后 使 用 DOM 方法 来 系统 创建 XML 数据 结构 。 更 多 是 把 
XML 文档 解析 为 DOM 结构 , 或 者 相反 。 因 为 DOM Level 2 并 未 提供 这 种 功能 ， 所 以 出 现 了 一 些 事实 标准 。 






































22.1.2 DoMParser 类 型 


Firefox 专门 为 把 XML 解析 为 DOM 文档 新 增 了 DoMParset 类 型 ， 后 来 所 有 其 他 浏览 器 也 实现 了 该 
类 型 。 要 使 用 DoMParser， 需 要 先 创 建 它 的 一 个 实例 ， 然 后 再 调用 parseFromString() 方 法 。 这 个 方 
法 接收 两 个 参数 : 要 解析 的 XML 字符 串 和 内 容 类 型 ( 始终 应 该 是 "text/html" )。 返回 值 是 Document 
的 实例 。 来 看 下 面 的 例子 : 


let parser 
let xmldom 



































new DOMParser (); 
parser.parseFromString("<root><child/></root>", "text/xml"); 


console.log(xmldom.documentElement .tagName); // "root" 
console.log(xmldom.documentElement.firstChild.tagName); // "child" 


let anotherChild = xmldom.createElement ("child"); 
xmldom.documentElement .appendChild(anotherChild); 


let children = xmldom.getElementsByTagName ("child"); 
console.log(children.length); // 2 


这 个 例子 把 简单 的 XML 字符 串 解析 为 DOM 文档 ,得 到 的 DOM 结构 中 <root> 是 document 元 素 ， 
它 有 个 子 元 素 <chi1d>。 然 后 就 可 以 使 用 DOM 方法 与 返回 的 文档 进行 交互 。 

DOMParser 只 能 解析 格式 良好 的 XML， 因 此 不 能 把 HTML 解析 为 HTML 文档 。 在 发 生 解 析 错 误 时 ， 
不 同 浏览 器 的 行为 也 不 一 样 。Firefox、Opera、Safari 和 Chrome 在 发 生 解 析 错 误 时 ，parseFromString () 
方法 仍 会 返回 一 个 Document 对 象 ， 只 不 过 其 document 元 素 是 <parsererror>， 该 元 素 的 内 容 为 解 
析 错 误 的 描述 。 下 面 是 一 个 解析 错误 的 示例 : 


<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror .xml">XML 
Parsing Error: no element found Location: file:// /I:/My%$20Writing/My%20Books/ 
Professional%20JavaScript/Second%20Edition/Examples/Ch1l5/DOMParserExample2.js Line 
Number 1, Column 7:<sourcetext>&lt;root&gt; ------— ^</sourcetext></parsererror> 


Firefox 和 Opera 都 会 返回 这 种 格式 的 文档 。Safari 和 Chrome 返回 的 文档 会 把 cparsererror> 元 素 
柑 入 在 发 生 解 析 错 误 的 位 置 。 早 期 下 版 本 会 在 调用 parseFromstring () 的 地 方 抛 出 解析 错误 。 由 于 
这 些 差 异 ， 最 好 使 用 try/catch 来 判断 是 否 发 生 了 解析 错误 ， 如 果 没 有 错误 ， 则 通过 get Elements- 
ByTagName () 方 法 查找 文档 中 是 否 包 含 <parsererror> 元 素 ， 如 下 所 示 : 


let parser = new DOMParser () ， 
xmldom, 
errors; 

必 下 沪 " 引 
xmldom = parser.parseFromString("<root>", "text/xml"); 
errors = xmldom.getElementsByTagName ("parsererror"); 
if (errors.length > 0) { 
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throw new Error("Parsing error!"); 
} 
} catch (ex) { 
console.log("Parsing error!"); 


} 

这 个 例子 中 解析 的 XML 字符 串 少 一 个 </root> 标 签 ， 因 此 会 导致 解析 错误 。IE 此 时 会 抛 出 错误 。 
Firefox 和 Opera 此 时 会 返回 document 元 素 为 <parsererror> 的 文档 , 而 在 Chrome 和 Safari 返回 的 文 
档 中 ，<parsererror> 是 <root> 的 第 一 个 子 元 素 。 调 用 getElementsByTagName ("parsererror") 
可 适用 于 后 两 种 情况 。 如 果 该 方法 返回 了 任何 元 素 ， 就 说 明 有 错误 ,会 弹 和 警告 框 给 出 提示 。 当 然 ， 此 时 
可 以 进一步 解析 出 错误 信息 并 显示 出 来 。 





























22.1.3 xMLSerializer 类 型 


与 DOMParser 相对 ，Firefox 也 增加 了 xMLSerializer 类 型 用 于 提供 相反 的 功能 : 把 DOM 文档 
序列 化 为 XML 字符 串 。 此 后 ，xMLSerializet 也 得 到 了 所 有 主流 浏览 器 的 支持 。 

要 序列 化 DOM 文 档 , 必 须 创 建 XMLSserializer 的 新 实例 ,然后 把 文档 传 给 serializeToSstring () 
方法 ， 如 下 所 示 : 


let serializer = new XMLSerializer(); 
let xml = serializer.serializeToString (xmldom); 
console.1og (xml); 


serializeToString() 方 法 返回 的 值 是 打印 效果 不 好 的 字符 串 ， 因 此 肉眼 看 起 来 有 点 困难 。 
XxMLSerializer 能 够 序列 化 任何 有 效 的 DOM 对象 ， 包 括 个 别 节点 和 HTML 文档 。 在 把 HTML 文 
档 传 给 serializeTostring() 时 ， 这 个 文档 会 被 当成 XML 文档 ， 因 此 得 到 的 结果 是 格式 良好 的 。 


















































注意 ”如果 给 serializeToString() 传 入 非 DOM 对 象 ， 就 会 导致 抛 出 错误 。 





22.2 ”浏览 器 对 XPath 的 支持 


XPath 是 为 了 在 DOM 文档 中 定位 特定 节点 而 创建 的 ,因此 它 对 XML 处 理 很 重要 。 在 DOM Level3 
之 前 ，XPath 相关 的 API 没有 被 标准 化 。DOM Level 3 开始 着 手 标准 化 XPath。 很 多 浏览 器 实现 了 DOM 
Level 3 XPath 标准 ,但 了 正 决 定 按照 自己 的 方式 实现 。 














22.2.1 DOM Level 3 XPath 


DOM Level 3 XPath 规范 定义 了 接口 ， 用 于 在 DOM 中 求 值 XPath 表达 式 。 要 确定 浏览 器 是 否 支 持 
DOM Level 3 XPath ， 可 以 使 用 以 下 代码 : 


let SupportsXPath = document.implementation.hasFeature("XxPath", "3.0"); 


虽然 这 个 规范 定义 了 不 少 类 型 ， 但 其 中 最 重要 的 两 个 是 XPathEvaluator 和 XPathResult。 
XPathEvaluator 用 于 在 特定 上 下 文中 求 值 XPath 表达 式 ， 包 含 三 个 方法 。 
口 createExpression (expression, nsresolver) ， 用 于 根据 XPath 表达 式 及 相应 的 命名 空间 
计算 得 到 一 个 XPathExpression，XPathExpression 是 查询 的 编译 版 本 。 这 适合 于 同样 的 查 
询 要 运行 多 次 的 情况 。 
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口 createNSResolver (node) ， 基 于 node 的 命名 空间 创建 新 的 XPathNSResolver 对 象 。 当 对 
使 用 名 称 空间 的 XML 文档 求 值 时 ， 需 要 XPathNSResolver 对 象 。 
口 evaluate (expression，context，nsresolver，type，result)， 根据 给 定 的 上 下 文 和 
命名 空间 对 XPath 进行 求 值 。 其 他 参数 表示 如 何 返 回 结 果 。 
Document 类 型 通常 是 通过 XPathEvaluator 接口 实现 的 ， 因 此 可 以 创建 XxPathEvaluator 的 实 
例 ， 或 使 用 Document 实例 上 的 方法 (包括 XML 和 HTML 、 5 
在 上 述 三 个 方法 中 ， 使 用 最 频繁 的 是 svaluate () 。 这 个 方法 接收 五 个 参数 : XPath 表达 式 、 上 下 

文 节点 、 命 名 空间 解析 器 、 返 回 的 结果 类 型 和 XPathResult 对 象 (用 于 填充 结果 ， 通 常 是 nul1， 
为 结果 也 可 能 是 函数 值 )。 第 三 个 参数 ， 命名 空间 解析 器 ， 只 在 XML 代码 使 用 XML 命名 空间 的 情况 下 
有 必要 。 如 果 没 有 使 用 命名 空间 ， 这 个 参数 也 应 该 是 nul1。 第 四 个 参数 要 返回 值 的 类 型 是 如 下 10 个 常 
量 值 之 一 。 
口 XPathResult .ANY_TYPE: 返回 适合 XPath 表达 式 的 数据 类 型 。 
口 XPathResult .NUMBER_TYPE: 返回 数值 。 
口 XPathResult .STRING_TYPE: 返回 字符 串 值 。 
口 XPathResult .BOOLEAN_TYPE: 返回 布尔 值 。 
口 XPathResult .UNORDERED_NODE_ITERATOR_TYPE: 返回 匹配 节点 的 集合 , 但 集合 中 节点 的 顺 
序 可 能 与 它们 在 文档 中 的 顺序 不 一 致 。 
口 XPathResult .ORDERED_NODE_ITERATOR_TYPE: 返回 匹配 节点 的 集合 ,集合 中 节点 的 顺序 与 
它们 在 文档 中 的 顺序 一 致 。 这 是 非常 常用 的 结果 类 型 。 
口 XPathResult .UNORDERED_NODE_SNAPSHOT_TYPE: 返回 节点 集合 的 快照 ， 

点 ， 因 此 对 文档 的 进一步 修改 不 会 影响 该 节点 集合 。 集 合 中 节点 的 顺序 可 能 与 它们 在 文档 中 的 
顺序 不 一 致 。 
口 XPathResult .ORDERED_NODE_SNAPSHOT_TYPE: 返回 节点 集合 的 快照 , 在 文档 外 部 捕获 节点 ， 
因此 对 文档 的 进一步 修改 不 会 影响 这 个 节点 集合 。 集 合 中 节点 的 顺序 与 它们 在 文档 中 的 顺序 一 致 。 
口 XPathResult .ANY_UNORDERED_NODE_TYPE: 返回 匹配 节点 的 集合 , 但 集合 中 节点 的 顺序 可 能 
与 它们 在 文档 中 的 顺序 不 一 致 。 
口 XPathResult .FIRST_ORDERED_NODE_TYPE: 返回 只 有 一 个 节点 的 节点 集合 , 包含 文档 中 第 一 

个 匹配 的 节点 。 
指定 的 结果 类 型 决定 了 如 何 获取 结果 的 值 。 下 面 是 一 个 典型 的 示例 : 


let result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .ORDERED_NODE_ITERATOR_TYPE, null); 
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if (result !== null) { 
let element = result.iterateNext (); 
while(element) { 
console.log(element .tagName) ; 
node = result.iterateNext (); 
} 
} 
这 个 例子 使 用 了 xPathResult .ORDERED_NODE_ITERATOR_TYPE 结果 类 型 ， 也 是 最 常用 的 类 型 。 


如 果 没 有 节点 匹配 XPath 表达 式 ，evaluate() 方 法 返回 nul1; 否则 ,返回 XPathResult 对 象 。 返 回 
的 XPathResult 对 象 上 有 相应 的 属性 和 方法 用 于 获取 特定 类 型 的 结果 。 如 果 结 果 是 节点 迭代 器 ， 无 论 
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有 序 还 是 无 序 , 都 必须 使 用 iterateNext () 方 法 获取 结果 中 每 个 匹配 的 节点 。 在 没有 更 多 匹配 节点 时 ， 
iterateNext () 返 回 null。 

如 果 指 定 了 快照 结果 类 型 (无论 有 序 还 是 无 序 )， 都 必须 使 用 snapshotItem() 方 法 和 snapshotLength 
属性 获取 结果 ， 如 以 下 代码 所 示 : 


let result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .ORDERED NODE SNAPSHOT TYPE, null); 
if (result !== null) { 
for (let i = 0, len=result.snapshotLength; i < len; i++) { 
console.log(result.snapshotItem(i) .tagName); 
} 



































} 


这 个 例子 中 ，snapshotLength 返回 快照 中 节点 的 数量 ， 而 snapshotItem() 返 回 快照 中 给 定位 
置 的 节点 (类似 于 NodeList 中 的 length 和 item() )。 


22.2.2 单个 节点 结 


XPathResult .FIRST_ORDERED_NODE_TYPE 结果 类 型 返回 匹配 的 第 一 个 节点 ， 可 以 通过 结果 的 
singleNodeValue 属性 获取 。 比 如 : 


Jet result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .FIRST ORDERED NODE TYPE, null); 






























































if (result !== null) { 
console.log(result.singleNodeValue.tagName); 


} 


与 其 他 查询 一 样 ， 如 果 没 有 匹配 的 节点 ，evaluate() 返 回 null1。 如果 有 一 个 匹配 的 节点 ， 则 要 使 
用 singleNodevalue 属性 取得 该 节点 。 这 对 XPathResult .FIRST_ORDERED_NODE_TYPE 也 一 样 。 


22.2.3 简单 类 型 结果 


使 用 布尔 值 、 数 值 和 字符 串 XPathResult 类 型 ， 可 以 根据 XPath 获取 简单 、 非 节点 数据 类 型 。 这 
些 结果 类 型 返回 的 值 需要 分 别 使 用 booleanValue、numberValue 和 stringvalue 属性 获取 。 对 于 
布尔 值 类 型 , 如果 至 少 有 一 个 节点 匹配 XPath 表达 式 , booleanValue 就 是 true; 否则 , booleanValue 
为 false。 比 如 : 


let result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .BOOLEAN_TYPE, null);} 
console.log(result.booleanValue); 


在 这 个 例子 中 ， 如 果 有 任何 节点 匹配 " mployee/name", booleanValu 属性 就 等 于 trueo 
对 于 数值 类 型 ， XPath 表达 式 必须 使 用 返回 数值 的 XPath 函数 ， 如 count () 可 以 计算 匹配 给 定 模式 
的 节点 数 。 比 如 : 


let result = xmldom.evaluate("count (employee/name)", xmldom.documentElement, 
null, XPathResult .NUMBER_TYPE, null); 
console.log(result.numberValue); 


以 上 代码 会 输出 匹配 "employee/name" 的 节点 数量 ( 比如 2 )。 如 果 在 这 里 没有 指定 XPath 函数 ， 
numberValue 就 等 于 NaN。 
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对 于 字符 串 类 型 ，evaluate () 方 法 查找 匹配 XPath 表达 式 的 第 一 个 节点 ， 然 后 返回 其 第 一 个 子 节 
点 的 值 ， 前 提 是 第 一 个 子 节点 是 文本 节点 。 如 果 不 是 ， 就 返回 空 字符 串 。 比 如 : 
let result = xmldom.evaluate("employee/name", xmldom.documentElement, 


XPathResult .STRING_TYPE, null); 
console.log(result.stringValue); 


这 个 例子 输出 与 * mploy 


22.2.4 ”默认 类 型 结果 


所 有 XPath 表达 式 都 会 自动 映射 到 特定 类 型 的 结果 ,设置 特定 结果 类 型 会 限制 表达 式 的 输出 。 不 过 ， 
可 以 使 用 XPathResult .ANY_TYPE 类 型 让 求 值 自动 返回 默认 类 型 结果 。 通常 , 默认 类 型 结 
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/name "匹配 的 第 一 个 元 素 中 第 一 个 文本 节点 包含 的 文本 字符 上 
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型 结果 是 布尔 值 、 
数值 、 字 符 串 或 无 序 节点 迭代 屁 。 要 确定 返回 的 结果 类 型 ,可 以 访问 求 值 结果 的 resultType 属性 ， 如 
下 例 所 示 : 











let result = xmldom.evaluate("employee/name", xmldom.documentElement, null, 
XPathResult .ANY TYPE, null); 


if (result !== null) { 
switch(result.resultType) { 


case XPathResult.STRING TYPE: 
// 处 理 字符 囊 类 型 


break; 


case XPathResult .NUMBER TYPE: 
// 处 理 数 值 类 型 


break; 


case XPathResult .BOOLEAN TYPE: 
// 处 理 布尔 值 类 型 


break; 





case XPathResult .UNORDERED NODE ITERATOR TYPE: 
// 处 理 无 序 节点 选 代 器 类 型 


break; 


default: 
// 处 理 其 他 可 能 的 结果 类 型 


} 
} 

















使 用 XPathResult .ANY_TYPE 可 以 让 使 用 XPath 变 得 更 自然 , 但 在 返回 
判断 和 处 理 。 


NS 
DHF 
ym 





后 则 需要 增加 额外 的 


22.2.5 ”命名 空间 支持 


对 于 使 用 命名 空间 的 XML 文档， 必须 告诉 XPathEvaluator 命名 空间 信息 ， 才 能 进行 正确 求 值 。 
处 理 命名 空间 的 方式 有 很 多 ， 看 下 面 的 示例 XML 代码 : 


<?xml] version="1.0" ?> 




















<wrox:books xmlns:wrox="http://www.wrox.com/"> 
<wrox:book> 


<wrox:title>Professional JavaScript for Web Developers</wrox:title> 
<wrox:author>Nicholas C. Zakas</wrox:author> 
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</wrox:book> 

<wrox:book> 
<wrox:title>Professional Ajax</wrox:title> 
<wrox:author>Nicholas C. Zakas</wrox:author> 
<wrox:author>Jeremy McPeak</wrox:author> 
<wrox:author>Joe Fawcett</wrox:author> 

</wrox:book> 

</wrox:books> 


在 这 个 XML 文档 中 ， 所 有 元 素 的 命名 空间 都 属于 http://www.wrox.com/， 都 以 wrox 前 级 标识。 如 
果 想 使 用 XPath 查询 该 文档 ， 就 需要 指定 使 用 的 命名 空间 ， 否 则 求 值 会 失败 。 

第 一 种 处 理 命 名 空间 的 方式 是 通过 createNSResolver () 方 法 创建 XPathNSResolver 对 象 。 这 
个 方法 只 接收 一 个 参数 , 即 包 含 命名 空间 定义 的 文档 节点 。 对 上 面 的 例子 而 言 , 这 个 节点 就 是 document 
元 素 <wrox:books>, 其 xmlns 属性 定义 了 命名 空间 ,为 此 ,可 以 将 该 节点 传 给 createNsResolver ()， 
然后 得 到 的 结果 就 可 以 在 evaluate() 方 法 中 使 用 : 


Jet nsresolver = xmldom.createNSResolver (xmldom.documentElement); 




































































let result = xmldom.evaluate ("wrox:book/wrox:author", 
xmldom.documentElement, nsresolver, 
XPathResult .ORDERED_NODE_SNAPSHOT_TYPE, null); 


console.log(result.snapshotLength 


把 nsresolver 传 给 evaluate() 之 后 , 可 以 确保 XPath 表达 式 中 使 用 的 wrox 前 级 能 够 被 正确 再 
解 。 假 如 不 使 用 XPathNSResolver， 同 样 的 表达 式 就 会 导致 错误 。 
第 二 种 处 理 命名 空间 的 方式 是 定义 一 个 接收 命名 空间 前 级 并 返回 相应 URI 的 函数 ， 如 下 所 示 : 
let nsresolver = function(prefix) { 
switch(prefix) { 
Case "wrox": return "http://www.wrox.com/"; 
// 其 他 前 级 及 返回 值 


} 
}; 
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let result = xmldom.evaluate("count (wrox:book/wrox:author)", 
xmldom.documentElement, nsresolver, XPathResult .NUMBER_TYPE, null); 


console.log(result .numberValue); 
在 并 不 知晓 文档 的 哪个 节点 包含 命名 空间 定义 时 ,可 以 采用 这 种 定义 命名 空间 解析 函数 的 方式 。 只 
要 知道 前 级 和 URI， 就 可 以 定义 这 样 一 个 函数 ， 然 后 把 它 作 为 第 三 个 参数 传 给 evaluate ()。 


22.3 浏览 器 对 XSLT 的 支持 


可 扩展 样式 表 语 言 转换 ( XSLT，Extensible Stylesheet Language Transformations ) 是 与 XML 相伴 的 
一 种 技术 ,可 以 利用 XPath 将 一 种 文档 表示 转换 为 男 一 种 文档 表示 。 与 XML 和 XPath 不同, XSLT 没有 
与 之 相关 的 正式 API， 正 式 的 DOM 中 也 没有 涵盖 它 。 因 此 浏览 器 都 以 自己 的 方式 实现 XSLT。 率 先 在 
JavaScript 中 支持 XSLT 的 是 下。 











长 





























22.3.1 XSLTProcessor 类 型 




















Mozilla 通过 增加 了 一 个 新 类 型 XSLTProcessor， 在 JavaScript 中 实现 了 对 XSLT 的 支持 。 通 过 使 
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用 XsuTProcessor 类 型 , 开发 者 可 以 使 用 XSLT 转换 XML 文档 , 其 方式 类 似 于 在 正中 使 用 XSL 处 理 
器 。 自 从 XSLTProcessor 首次 实现 以 来 ， 所 有 浏览 器 都 照抄 了 其 实现 ， 从 而 使 xsLTProcessor 成 了 
通过 JavaScript 完成 XSLT 转换 的 事实 标准 。 

与 下 的 实现 一 样 ， 第 一 步 是 加 载 两 个 DOM 文档: XML 文档 和 XSLT 文档 。 然 后 ， 使 用 import- 
StyleSheet () 方 法 创建 一 个 新 的 XSLTProcessor， 将 XSLT 指定 给 它 ， 如 下 所 示 : 


let processor = new XSLTProcessor() 
processor.importStylesheet (xsltdom); 


最 后 一 步 是 执行 转换 , 有 两 种 方式 。 如 果 想 返回 完整 的 DOM 文档 , 就 调用 transformToDocument () ; 
如 果 想 得 到 文档 片段 , 则 可 以 调用 transformToFragment ()。 一般 来 说 , 使 用 transformToFragment () 
的 唯一 原因 是 想 把 结果 添加 到 另 一 个 DOM 文档 。 

如 果 使 用 transformTopocument () ， 只 要 传 给 它 XML DOM, 就 可 以 将 结果 当 作 另 一 个 完全 不 同 
的 DOM 来 使 用 。 比 如 : 


let result = processor.transformToDocument (xmldom);} 
console.log(serializexml (result)); 


transformToFragment () 方 法 接收 两 个 参数 : 要 转换 的 XML DOM 和 最 终 会 拥有 结果 片段 的 文 
档 。 这 可 以 确保 新 文本 片段 可 以 在 目标 文档 中 使 用 。 比 如 ， 可 以 把 aocument 作为 第 二 个 参数 ,然后 将 
创建 的 片段 添加 到 其 页 面 元 素 中 。 比 如 : 


let fragment = processor.transformToFragment (xmldom, document); 
let div = document .getElementById("divResult"); 
div.appendChild (fragment); 


这 里 ， 处 理 器 创建 了 由 aocument 对 象 所 有 的 片段 。 这 样 就 可 以 将 片段 添加 到 当前 页 面 的 <aiv> 元 
素 中 了 。 

如 果 XSLT 样式 表 的 输出 格式 是 "xml "或 "html"， 则 创建 文档 或 文档 片段 理所当然 。 不 过 ， 如 果 输 
出 格式 是 "text"， 则 通常 意味 着 只 想得到 转换 后 的 文本 结果 。 然 而 ， 没 有 方法 直接 返回 文本 。 在 输出 
格式 为 "text "时 调用 transformToDocument () 会 返回 完整 的 XML 文档 ， 但 这 个 文档 的 内 容 会 因 浏 
览 器 而 异 。 比 如 ，Safari 返回 整个 HTML 文档 ,而 Opera 和 Firefox 则 返回 只 包含 一 个 元 素 的 文 要 ， 其 中 
输出 就 是 该 元 素 的 文本 。 

解决 方案 是 调用 transformToFragment (), 返回 只 有 一 个 子 节点 、 其 中 包含 结果 文本 的 文档 片段 。 
之 后 ， 可 以 再 使 用 以 下 代码 取得 文本 : 


let fragment = processor.transformToFragment (xmldom, document); 
let text = fragment.firstChild.nodeValue; 
console.log (text); 


这 种 方式 在 所 有 支持 的 浏览 器 中 都 可 以 正确 返回 转换 后 的 输出 文本 。 
22.3.2 ”使 用 参数 


XSLTProcessor 还 允许 使 用 setParameter () 方 法 设置 XSLT 参数 。 该 方法 接收 三 个 参数 : 命名 
空间 URI、 参 数 本 地 名 称 和 要 设置 的 值 。 通 常 ， 命 名 空间 URI 是 null， 本 地 名 称 就 是 参数 名 称 。 
setParameter () 方 法 必须 在 调用 transformToDocument () 或 transformToFragment () 之 前 调用 。 


例子 如 下 : 
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let processor = new XSLTProcessor() 
processor.importStylesheet (xsltdom); 
processor.setParameter (null, "message", "Hello Wor1dl 
let result = processor.transformToDocument (xmldom); 


四 


与 参数 相关 的 还 有 两 个 方法 : getParameter () 和 removeParameter()。 它 们 分 别 用 于 取得 参数 








的 当前 值 和 移 除 参数 的 值 。 它 们 都 以 一 个 命名 空间 URI ( 同样 ,一 般 是 null ) 和 参数 的 本 地 名 称 为 参 


数 。 比 如 : 


Jet processor = new XSLTProcessor() 
processor.importStylesheet (xsltdom); 


processor.setParameter (null, "message", "Hello Wor1dl 


console.log(processor.getParameter (null, "message")); 
processor.removeParameter (null, "message"); 


let result = processor.transformToDocument (xmldom); 


这 几 个 方法 并 不 常用 ， 只 是 为 了 操作 方便 。 
22.3.3” 重 置 处 理 器 




















0 


// 输出 "Hello World!" 











用 不 同 的 XSLT 样式 表 。 处 理 需 的 





每 个 XSLTProcessor 实例 都 可 以 重用 于 多 个 转换 ， 只 是 要 使 








reset () 方 法 可 以 删除 所 有 参数 和 样式 表 。 然 后 ， 可 以 使 用 importStylesheet () 方 法 加 载 不 同 的 





XSLT 样 表 ， 如 下 所 示 : 


Jet processor = new XSLTProcessor() 
processor.importStylesheet (xsltdom); 


// 执行 某 些 转换 


processor.reset () 
processor.importStylesheet (xsltdom2);} 


// 再 执行 一 些 转换 

















在 使 用 多 个 样式 表 执行 转换 时 ， 重 用 
22.4 小 结 





个 XSLTProcessor 可 以 节省 内 存 。 








浏览 器 对 使 用 JavaScript 处 理 XML 实现 及 相关 技术 相当 支持 。 然 而 ， 由 于 早期 缺少 规范 ， 常 用 的 
功能 出 现 了 不 同 实 现 。DOM Level 2 提供 了 创建 空 XML 文档 的 API， 但 不 能 解析 和 序列 化 。 浏 览 器 为 























解析 和 序列 化 XML 实现 了 两 个 新 类 型 。 





口 DoMParser 类 型 是 简单 的 对 象 ， 可 以 将 XML 字符 串 解析 为 DOM 文档 。 
口 xMLSerializer 类 型 执行 相反 操作 ， 将 DOM 文档 序列 化 为 XML 字符 串 。 





基于 所 有 主流 浏览 带 的 实现 ,， DOM Level 3 新 增 了 针对 XPath API 的 规范 。 该 API 可 以 让 JavaScript 











针对 DOM 文档 执行 任何 XPath 查询 并 得 到 不 同 数据 类 型 的 结果 。 





最 后 一 个 与 XML 相关 的 技术 是 XSLT, 目前 并 没有 规范 定义 其 API。 Firefox 最 早 增 加 了 XSLTProcessor 








类 型 用 于 通过 JavaScript 处 理 转 换 。 


第 作品 
JSON 


本 章 内 容 

口 理解 JSON 语法 
口 解析 JSON 

口 JSON 序列 化 














正如 上 一 章 所 说 ，XML 曾经 一 度 成 为 互联 网 上 传输 数据 的 事实 标准 。 第 一 代 Web 服务 很 大 程度 上 
是 以 XML 为 基础 的 ， 以 服务 器 间 通 信 为 主要 特征 。 可 是 ，XML 也 并 非 没 有 批评 者 。 有 的 人 认为 XML 
过 于 宛 余 和 嘿 唆 。 为 解决 这 些 问 题 ， 也 出 现 了 几 种 方案 。 不 过 Web 已 经 朝 着 它 的 新 方向 进发 了 。 

2006 年 ，Douglas Crockford 在 国际 互联 网 工程 任务 组 (IETF，The Internet Engineering Task Force ) 
制定 了 JavaScript 对 象 简谱 (JSON ，JavaScript Object Notation ) 标准 ， 即 RFC 4627。 但 实际 上 ，JSON 
早 在 2001 年 就 开始 使 用 了 。JSON 是 JavaScript 的 严格 子 集 ， 利 用 JavaScript 中 的 几 种 模式 来 表示 结构 
化 数据 。Crockford 将 JSON 作为 蔡 代 XML 的 一 个 方案 提出 ， 因 为 JSON 可 以 直接 传 给 eval () 而 不 需 
要 创建 DOM。 
理解 JSON 最 关键 的 一 点 是 要 把 它 当 成 一 种 数据 格式 ， 而 不 是 编程 语言 。JSON 不 属于 JavaScript， 
它们 只 是 拥有 相同 的 语法 而 已 。JSON 也 不 是 只 能 在 JavaScript 中 使 用 , 它 是 一 种 通用 数据 格式 。 很 多 语 
言 都 有 解析 和 序列 化 JSON 的 内 置 能 力 。 


23.1 语法 


JSON 语法 支持 表示 3 种 类 型 的 值 。 
口 简单 值 : 字符 串 、 数 值 、 布 尔 值 和 nul1l 可 以 在 JSON 中 出 现 ， 就 像 在 JavaScript 中 一 样 。 特 殊 
值 undefined 不 可 以 。 
口 对 象 : 第 一 种 复杂 数据 类 型 ， 对 象 表示 有 序 键 / 值 对 。 每 个 值 可 以 是 简单 值 ， 也 可 以 是 复杂 类 型 。 
口 数组 : 第 二 种 复杂 数据 类 型 ， 数 组 表示 可 以 通过 数值 索引 访问 的 值 的 有 序列 表 。 数 组 的 值 可 以 
是 任意 类 型 ， 包 括 简单 值 、 对 象 ， 甚 至 其 他 数组 。 

JSON 没有 变量 、 函 数 或 对 象 实例 的 概念 。JSON 的 所 有 记号 都 只 为 表示 结构 化 数据 , 虽然 它 借用 了 

JavaScript 的 语法 ， 但 是 千 万 不 要 把 它 跟 JavaScript 语 言 混淆 。 


23.1.1 简单 值 


最 简单 的 JSON 可 以 是 一 个 数值 。 例 如 ， 下 面 这 个 数值 是 有 效 的 JSON: 
3 
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这 个 JSON 表示 数值 S。 类 似 地 ， 下 面 这 个 字符 串 也 是 有 效 的 JSON: 


"Hello world!" 


JavaScript 字符 串 与 JSON 字符 串 的 主要 区 别 是 ，JSON 字符 串 必须 使 用 双 引 号 ( 单 引 号 会 导致 语法 
错误 和 

布尔 值 和 null 本 身 也 是 有 效 的 JSON 值 。 不 过 , 实践 中 更 多 使 用 JSON 表示 比较 复杂 的 数据 结构 ， 
其 中 会 包含 简单 值 。 


23.1.2 “对象 
对 象 使 用 与 JavaScript 对 象 字 面 量 略 为 不 同 的 方式 表示 。 以 下 是 JavaScript 中 的 对 象 字 面 


let person = { 
name: "Nicholas", 
age: 29 
于 
虽然 这 对 JavaScript 开发 者 来 说 是 标准 的 对 象 字 面 量 ， 但 JSON 中 的 对 象 必须 使 用 双 引 号 把 属性 名 
包围 起 来 。 下 面 的 代码 与 前 面 的 代码 是 一 样 的 : 
let object = { 
"name": "Nicholas", 
"age" : 29 
下 
而 用 JSON 表示 相同 的 对 象 的 语法 是 : 
"name": "Nicholas", 
"age": 29 
与 JavaScript 对 象 字面 量 相 比 ，JSON 主要 有 两 处 不 同 。 首 先 ， 没 有 变量 声明 ( JSON 中 没有 变量 )。 
其 次 , 最 后 没有 分 号 (不 需要 ， 因 为 不 是 JavaScript 语句 )。 同 样 ， 用 引号 将 属性 名 包围 起 来 才 是 有 效 的 
JSON。 属 性 的 值 可 以 是 简单 值 或 复杂 数据 类 型 值 ， 后 者 可 以 在 对 象 中 再 嵌 人 对 象 ， 比 如 : 
{ 
"name": "Nicholas", 
"age": 29， 
"school"™: { 
"name": "Merrimack College", 
"location": "North Andover, MA" 
} 
} 
这 个 例子 在 顶级 对 象 中 又 舱 入 了 学 校 相关 的 信息 。 即 使 整个 JSON 对 象 中 有 两 个 属性 都 叫 "name " ， 
但 它们 属于 两 个 不 同 的 对 象 ， 因 此 是 允许 的 。 同 一 个 对 象 中 不 允许 出 现 两 个 相同 的 属性 。 
与 JavaScript 不同, JSON 中 的 对 象 属性 名 必须 始终 带 双 引号 。 手动 编 写 JSON 时 漏 折 这 些 双 引号 或 
使 用 单 引 号 是 常见 错误 。 


23.1.3 ”数组 


JSON 的 第 二 种 复杂 数据 类 型 是 数组 ,数组 在 JSON 中 使 用 JavaScript 的 数组 字面 量 形式 表示 。, 例 如， 
以 下 是 一 个 JavaScript 数组: 
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let, values = [25; "hi", truel: 


在 JSON 中 可 以 使 用 类 似 语法 表示 相同 的 数组 : 


[本 hi tue 


同样 , 这 里 没有 变量 , 也 没有 分 号 。 数 组 和 对 象 可 以 组 合 使 用 ,以 表示 更 加 复杂 的 数据 结构 ， 比 如 : 








"title": "Professional JavaScript", 
"authnors™::, | 
"Nicholas C. Zakas", 
"Matt Frisbie" 
ss 
"edition":” 4, 
"year": 2017 


"title": "Professional JavaScript", 
"authors": 

"Nicholas C. Zakas" 
ds 
"SqitidnYs.3 





"year": 2011 

} 

二 
"title": "Professional JavaScript", 
"authors": 


"Nicholas C. Zakas" 
] 5 
editoom es, 2 
"year": 2009 


"title": "Professional Ajax", 
"authors": [ 
"Nicholas C. Zakas", 
"Jeremy McPpeak", 
"Joe Fawcett" 
中 5 
"EditiornYs. .2 
"year": 2008 


"title": "Professional Ajax", 
"authors": [ 
"Nicholas C. Zakas", 
"Jeremy McPpeak", 
"Joe Fawcett" 
J 
editionv SL 
"year": 2007 


"title": "Professional JavaScript", 
"auUEhorswr 

"Nicholas C. Zakas" 
]， 
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"editionm YL; 
"year": 2006 
} 




















前 面 这 个 数组 包含 了 很 多 表示 书 的 对 象 。 每 个 对 象 都 包含 一 些 键 , 其 中 一 个 是 "authors", 对 应 的 
值 也 是 一 个 数组 。 对 象 和 数组 通常 会 作为 JSON 数组 的 顶级 结构 (尽管 不 是 必需 的 )， 以 便 创建 大 型 复 
困 数 据 结构 。 


23.2 ”解析 与 序列 化 


JSON 的 迅速 流行 并 不 仅仅 因为 其 语法 与 JavaScript 类 似 , 很 大 程度 上 还 因为 JSON 可 以 直接 被 解析 
成 可 用 的 JavaScript 对 象 。 与 解析 为 DOM 文档 的 XML 相 比 ， 这 个 优势 非常 明显 。 为 此 ，JavaScript 开 
发 者 可 以 非常 方便 地 使 用 JSON 数据 。 比 如 ， 前 面 例子 中 的 JSON 包含 很 多 图 书 ， 通 过 如 下 代码 就 可 以 
获取 第 三 本 书 的 书 名 : 

books[2] .title 

当然 ,以 上 代码 假设 把 前 面 的 数据 结构 保存 在 了 变量 books 中 。 相 比 之 下 , 遍历 DOM 结构 就 显 入 
麻烦 多 了 : 


doc.getElementsByTagName ("book") [2] .getAttribute("title"); 


看 看 这 些 方法 调用 ， 就 不 难 想象 为 什么 JSON 大 受 JavaScript 开发 者 欢迎 了 。JSON 出 现 之 后 就 迅速 
成 为 了 Web 服务 的 事实 序列 化 标准 。 


23.2.1 JSON 对 象 


期 的 JSON 解析 器 基本 上 就 相当 于 JavaScript 的 eval () 图 数 。 因 为 JSON 是 JavaScript 语法 的 子 
所 以 eval () 可 以 解析 、 解 释 ， 并 将 其 作为 JavaScript 对 象 和 数组 返回 。ECMAScript5 增加 了 JSON 
局 对 象 ， 正 式 引 入 解析 JSON 的 能 力 。 这 个 对 象 在 所 有 主流 浏览 器 中 都 得 到 了 支持 。 旧 版 本 的 浏览 
以 使 用 热 片 脚本 (参见 GitHub 上 douglascrockford/JSON-js 中 的 JSON in JavaScript ),。 考虑 到 直接 执行 
代码 的 风险 , 最 好 不 要 在 旧版 本 浏览 器 中 只 使 用 sval () 求 值 JSON。 这 个 JSON 垫 片 脚本 最 好 只 在 浏览 
器 原生 不 支持 JSON 解析 时 使 用 。 

JSON 对 象 有 两 个 方法 : stringify() 和 parse()。 在 简单 的 情况 下 ， 这 两 个 方法 分 别 可 以 将 
JavaScript 序列 化 为 JSON 字符 串 ， 以 及 将 JSON 人 JavaScript 值 。 例 如 : 


let book = { 
title: "Professional JavaScript", 
authors: [ 
"Nicholas C. Zakas", 
"Matt Frisbie" 
| 
editiorns 4 
year: 2017 
es 
let jsonText = JSON.stringify (book); 


这 个 例子 使 用 JSON. stringify () 把 一 个 JavaScript 对 象 序列 化 为 一 个 JSON 字符 串 , 保存 在 变量 
jsonText 中 。 默 认 情 况 下 ，JSON.stringify () 会 输出 不 包含 空格 或 缩 进 的 JSON 字符 串 ， 因 此 
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jsonText 的 值 是 这 样 的 : 


{"title":"Professional JavaScript","authors":["Nicholas C. Zakas", "Matt Frisbie"], 
"edition":4,"year":2017} 


在 序列 化 JavaScript 对 象 时 , 所 有 函数 和 原型 成 员 都 会 有 意 地 在 结果 中 省 略 。 此 外 , 值 为 undaefinea 
的 任何 属性 也 会 被 跳 过 。 最 终 得 到 的 就 是 所 有 实例 属性 均 为 有 效 JSON 数据 类 型 的 表示 。 

JSON 字符 串 可 以 直接 传 给 JSON .parse ()， 然 后 得 到 相应 的 JavaScript 值 。 比 如 ， 可 以 使 用 以 下 
代码 创建 与 book 对 象 类 似 的 新 对 象 : 

let bookCopy = JSON.parse(jsonText); 
注意 ,book 和 bookCopy 是 两 个 完全 不 同 的 对 象 , 没有 任何 关系 。 但 是 它们 拥有 相同 的 
如 果 给 JsoN.parse () 传 人 的 JSON 字符 串 无 效 ， 则 会 导致 抛 出 错误 。 


23.2.2 ”序列 化 选项 







































































如 性 和 值 。 
































实际 上 , JSON. stringify() 方 法 除了 要 序列 化 的 对 象 , 还 可 以 接收 两 个 参数 。 这 两 个 参数 可 以 用 
于 指定 其 他 序列 化 JavaScript 对 象 的 方式 。 第 一 个 参数 是 过 滤器 ， 可 以 是 数组 或 函数 ; 第 二 个 参数 是 用 


> 


于 缩 进 结果 JSON 字符 串 的 选项 。 单 独 或 组 合 使 用 这 些 参数 可 以 更 好 地 控制 JSON 序列 化 。 
1. 过 滤 结 果 
如 果 第 二 个 参数 是 一 个 数组 ,那么 JSON. stringify() 返 回 的 结果 只 会 包含 该 数组 中 列 出 的 对 象 
属性 。 比 如 下 面 的 例子 : 
let book = { 
title: "Professional JavaScript", 
authors: [ 


"Nicholas C. Zakas", 
"Matt Frisbie" 















































二 
edition: 4, 
year: 2017 
}; 
let jsonText = JSON.stringify (book, ["title", "edition"]); 
在 这 个 例子 中 ，JSON. stringify () 方 法 的 第 二 个 参数 是 一 个 包含 两 个 字符 串 的 数组 : "title" 
和 "edition"。 它 们 对 应 着 要 序列 化 的 对 象 中 的 属性 ， 因 此 结果 JSON 字符 串 中 只 会 包含 这 两 个 属性 : 
{"title":"Professional JavaScript","edition":4} 
如 果 第 二 个 参数 是 一 个 函数 ， 则 行为 又 有 不 同 。 提 供 的 函数 接收 两 个 参数 : 属性 名 ( key ) 和 属性 
值 (value )。 可 以 根据 这 个 key 决定 要 对 相应 属性 执行 什么 操作 。 这 个 key 始终 是 字符 串 ， 只 是 在 值 
不 属于 某 个 键 / 值 对 时 会 是 空 字 符 串 。 
为 了 改变 对 象 的 序列 化 ,返回 的 值 就 是 相应 key 应 该 包含 的 结果 。 注 意 , 返回 undefined 会 导致 
属性 被 忽略 。 下 面 看 一 个 例子 : 
let book = { 
title: "Professional JavaScript", 
authors: [ 
"Nicholas C. Zakas", 
"Matt Frisbie" 
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edition: 4, 
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year: 2017 

7 

let jsonText = 
switch(key) { 


JSON.stringify (book, (key, value) => { 


case "authors": 

return value.join(",") 
Case "year": 

return 5000; 
case "edition": 

return undefined; 


default: 


return value; 


} 
区 这 


这 个 函数 基于 键 进 
则 将 值 设 置 为 5000; 





行 了 过 滤 。 如 果 键 是 "authors" ， 则 将 数组 值 转换 为 字符 串 ; 


如 果 键 是 "year"， 


























回 值 , 以 便 返回 其 他 属 











最 终 得 到 的 JSON 字符 串 是 这 样 的 : 


{"title":"Professional JavaScript","authors":"Nicholas C. Zakas,Matt 
Frisbie","year" 


函数 过 滤器 会 应 用 到 要 序列 化 的 对 象 所 包含 的 所 有 对 象 ， 
对， 则 序列 化 之 后 每 个 对 象 都 只 会 剩 下 上 面 这 些 属性 。 


已 ， 








:5000} 























如 果 键 是 "eaition"， 则 返回 undefined 忽略 该 属性 。 最 后 一 定 要 提供 默认 返 
性 传人 的 值 。 第 一 次 调用 这 个 函数 实际 上 会 传人 空 字 符 串 key, 值 是 book 对 象 。 





因此 如 果 数 组 中 包含 多 个 具有 这 些 


Firefox 3.5~3.6 在 JSoN.stringify() 的 第 二 个 参数 是 函数 时 有 一 个 bug: 此 时 函数 只 能 作为 过 


器 ， 返 回 undefined 会 导致 跳 过 属性 ， 返 回 二 





2. 字符 串 缩 进 
JSON.stringif 














y () 方 法 的 第 三 个 参数 控制 缩 进 和 空格 。 在 这 个 参数 是 数值 时 ， 


空格 数 。 例 如 ， 每 级 缩 进 4 个 空格 ， 可 以 这 样 ; 





Jet book = { 
tit "PEOF 
authors: [ 

"Nicholas 

"Matt Fris 
edition: 4, 
year: 2017 

let jsonText = 





essional JavaScript", 


C. Zakas", 
bie" 


JSON.stringify(book, null, 4); 


这 样 得 到 的 jsonText 格式 如 下 : 


{ 
"上 让 从 由 
"authors": 


"Professional JavaScript", 


[ 


"Nicholas C. Zakas", 


"Matt 
], 


"edition" 


Frisbie" 


Ed 


"year": 2017 


意 , 除了 缩 进 








进 ，JSoON.stringify() 方 法 还 为 方便 阅读 搬 人 了 换行 符 。 这 


其 他 值 则 会 包含 属性 。Firefox 4 修复 了 这 个 bug。 





表示 每 一 级 缩 进 的 


个 行为 对 于 所 有 有 效 的 


23.2 
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缩 进 参数 都 会 发 生 。( 只 缩 进 不 换行 也 没什么 用 。) 最 大 缩 进 值 为 10， 大 于 10 的 值 会 自动 设置 为 10。 

















如 果 缩 进 参数 是 一 个 字符 是 











使 用 字符 串 ， 也 可 以 将 缩 进 字 符 设置 为 Tab 或 任意 字符 ， 如 两 个 连 字符 : 
let jsonText = JSON.stringify (book, null, "--" ) 


这 样 ，jsonText 的 值 会 变 成 如 下 格式 : 








{ 


-=-"title": "Professional JavaScript", 


= Uthors,.: 


----"Nicholas C. Zakas", 


-一 -一 Matt Frisbie" 
Sl 
-Lt 
--"year": 2017 

} 











使 用 字符 串 时 同样 有 10 个 字符 的 长 度 限制 。 如 有 











3. toJSON() 方 法 











而 非 数 值 ,那么 JSON 字符 串 中 就 会 使 用 这 个 字符 串 而 不 是 空格 来 缩 进 。 


字符 串 长 度 超过 10， 则 会 在 第 10 个 字符 处 截断 。 


有 时 候 ， 对 象 需要 在 JSON. stringify() 之 上 自 定 义 JSON 序列 化 。 此 时 , 可 以 在 要 序列 化 的 对 象 
中 添加 toJsoN() 方 法 ,序列 化 时 会 基于 这 个 方法 返回 适当 的 JSON 表示 。 事 实 上， 原生 Date 对 象 就 
有 一 个 toJsoN () 方 法 ， 能 够 自动 将 JavaScript 的 Date 对 象 转换 为 ISO 8601 日 期 字符 串 ( 本质 上 与 在 
Date 对 象 上 调用 toISostring () 方 法 一 样 )。 











下 面 的 对 象 为 自 定义 序列 化 而 添加 了 一 个 toJsON () 方 法 : 


let book = { 


title: "Professional JavaScript", 


authors: [ 


"Nicholas C. Zakas", 


"Matt Frisbie" 
J 
edition: 4, 
year: 2017, 


toJSON: function() { 


return this.title; 
} 
于 


let jsonText = JSON.stringify (book); 


这 里 book 对 象 中 定义 的 toJSoN () 方 法 简单 地 返回 了 图 书 的 书 名 (this.title )。 与 Date 对 象 
类 似 ， 这 个 对 象 会 被 序列 化 为 简单 字符 串 而 非 对 象 。toJsoN () 方 法 可 以 返回 任意 序列 化 值 ， 都 可 以 起 
到 相应 的 作用 。 如 果 对 象 被 铬 入 在 男 一 个 对 象 中 , 返回 undefined 会 导致 值 变 成 nu11; 或 者 如 果 是 顶 





级 对 象 , 则 本 身 就 是 unaefined。 注意 , 箭头 函数 不 能 用 来 定义 toJso 





的 词法 作用 域 是 全 局 作用 域 ， 








在 这 种 情况 下 不 合适 。 


() 方 法 。 主 要 原 














toJSON () 方 法 可 以 与 过 滤 函 数 一 起 使 用 ， 因 此 理解 不 同 序列 化 流程 的 顺序 非常 重要 。 在 把 对 象 传 
给 JSON. stringify () 时 会 执行 如 下 步 又 。 
(1) 如 果 可 以 获取 实际 的 值 ， 则 调用 toJsoN () 方 法 获取 实际 的 值 ， 否 则 使 用 默认 的 序列 化 。 
(2) 如 果 提 供 了 第 二 个 参数 ， 则 应 用 过 滤 。 传 入 过 滤 函 数 的 值 就 是 第 (1) 步 返回 的 值 。 
(3) 第 (2) 步 返回 的 每 个 值 都 会 相应 地 进行 序列 化 。 
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(4) 如 果 提 供 了 第 三 个 参数 ， 则 相应 地 进行 缩 进 。 
理解 这 个 顺序 有 助 于 决定 是 创建 toJSON () 方 法 ， 还 是 使 用 过 滤 函 数 ， 抑 或 是 两 者 都 用 。 


23.2.3 解析 选项 


JSON.parse() 方 法 也 可 以 接收 一 个 额外 的 参数 ,这 个 函数 会 针对 每 个 键 / 值 对 都 调用 一 次 。 为 区 别 
于 传 给 JSON. stringify () 的 起 过 滤 作 用 的 替代 函数 ( replacer )， 这 个 函数 被 称 为 还 原 函 数 (reviver )。 
实际 上 它们 的 格式 完全 一 样 ， 即 还 原 函 数 也 接收 两 个 参数 ， 属 性 名 (key ) 和 属性 值 (value )， 另 外 也 
需要 返回 值 。 

如 果 还 原 函 数 返回 undefined， 则 结果 中 就 会 删除 相应 的 键 。 如 果 返 回 了 其 他 任何 值 ， 则 该 值 就 
会 成 为 相应 键 的 值 插入 到 结果 中 。 还 原 函 数 经 常 被 用 于 把 日 期 字符 串 转 换 为 Date 对 象 。 例 如 : 


let book = { 
title: "Professional JavaScript", 
authors: [ 
"Nicholas C. Zakas", 
"Matt Frisbie" 








































































































[I 
edition: 4, 

year: 2017, 

releaseDate: new Date(2017, 11, 1) 
站 
let jsonText = JSON.stringify (book); 
let bookCopy = JSON.parse(jsonText, 

(key, value) => key == "releaseDate" ? new Date(value) : value); 

alert (bookCopy .releaseDate.getFullYear()); 


以 上 代码 在 book 对 象 中 增加 了 releaseDate 属性 ， 是 一 个 Date 对 象 。 这 个 对 象 在 被 序列 化 为 
JSON 字符 串 后 ， 又 被 重新 解析 为 一 个 对 象 bookCopy。 这 里 的 还 原 函 数 会 查找 "releaseDate" 键 ,如 
果 找 到 就 会 根据 它 的 日 期 字符 串 创建 新 的 Date 对 象 。 得 到 的 bookCopy .releaseDate 属性 又 变 回 了 
Date 对 象 ， 因 此 可 以 调用 其 getFullYear () 方 法 。 


23.3 小 结 


JSON 是 一 种 轻 量 级 数据 格式 , 可 以 方便 地 表示 复杂 数据 结构 。 这 个 格式 使 用 JavaScript 语法 的 一 个 
子 集 表 示 对 象 、 数 组 、 字 符 串 、 数 值 、 布 尔 值 和 nul1。 虽 然 XML 也 能 胜任 同样 的 角色 , 但 JSON 更 简 
洁 ，JavaScript 支持 也 更 好 。 更 重要 的 是 ， 所 有 浏览 器 都 已 经 原生 支持 全 局 JSON 对 象 。 

ECMAScript 5 定义 了 原生 JsoN 对 象 , 用 于 将 JavaScript 对 象 序列 化 为 JSON 字符 串 , 以 及 将 JSON 
数组 解析 为 JavaScript 对 象 。JSoN.stringify() 和 JSoN.parse() 方 法 分 别 用 于 实现 这 两 种 操作 。 这 
两 个 方法 都 有 一 些 选项 可 以 用 来 改变 默认 的 行为 ， 以 实现 过 滤 或 修改 流程 。 
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网 络 请 求 与 远程 资源 


本 章 内 容 

口 使 用 xMLHttpRequest 对 象 
口 处 理 xMLHttpRequest 事件 
口 源 域 Ajax 限制 
口 Fetch API 

口 Streams API 














2005 年 ，Jesse James Garrett 撰写 了 一 篇 文章 , “Ajax 一 ANew Approach to Web Applications”。 这 篇 
文章 中 描绘 了 一 个 被 他 称 作 Ajax (Asynchronous JavaScripttrXML， 即 异步 JavaScript 加 XML ) 的 技术 。 
这 个 技术 涉及 发 送 服务 器 请 求 额外 数据 而 不 刷新 页 面 ， 从 而 实现 更 好 的 用 户 体 验 。Garrett 解 释 了 这 个 技 
术 怎 样 改变 自 Web 诞生 以 来 就 一 直 延 续 的 传统 单 击 等 待 的 模式 。 

把 Ajax 推 到 历史 舞台 上 的 关键 技术 是 XMLHttpRequest (XHR ) 对 象 。 这 个 对 象 最 早 由 微软 发 明 ， 
然后 被 其 他 浏览 器 所 借鉴 。 在 XHR 出 现 之 前 ，Ajax 风格 的 通信 必须 通过 一 些 黑 科 技 实现 ， 主 要 是 使 用 
隐藏 的 窗 格 或 内 般 窗 格 。XHR 为 发 送 服务 器 请 求 和 获取 响应 提供 了 合理 的 接口 。 这 个 接口 可 以 实现 异 
步 从 服务 器 获取 额外 数据 , 意味 着 用 户 点 击 不 用 页 面 刷 新 也 可 以 获取 数据 。 通 过 XHR 对 象 获取 数据 后 ， 
可 以 使 用 DOM 方法 把 数据 插入 网 页 。 虽然 Ajax 这 个 名 称 中 包含 XML, 但 实际 上 Ajax 通信 与 数据 格式 
无 关 。 这 个 技术 主要 是 可 以 实现 在 不 刷新 页 面 的 情况 下 从 服务 器 获取 数据 ， 格 式 并 不 一 定 是 XML。 

实际 上 ，Garrett 所 称 的 这 种 Ajax 技术 已 经 出 现 很 长 时 间 了 。 在 Garrett 那 篇 文章 之 前 ， 一 般 称 这 种 
技术 为 远程 脚本 。 这 种 浏览 器 与 服务 器 的 通信 早 在 1998 年 就 通过 不 同方 式 实现 了 。 最 初 ，JavaScript 对 
服务 器 的 请 求 可 以 通过 中 介 〈 如 Java 小 程序 或 Flash 影片 ) 来 发 送 。 后 来 XHR 对 象 又 为 开发 者 提供 了 
原生 的 浏览 器 通信 能 力 ， 减 少 了 实现 这 个 目的 的 工作 量 。 

XHR 对 象 的 API 被 普遍 认为 比较 难 用 ， 而 Fetch API 自从 诞生 以 后 就 迅速 成 为 了 XHR 更 现代 的 替代 
标准 。Fetch API 支 持 期 约 (promise ) 和 服务 线程 ( service worker ), 已 经 成 为 极其 强大 的 Web 开发 工具 。 

























































































































































































注意 本章 会 全 面 介绍 XMLHttpRequest， 但 它 实际 上 是 过 时 Web 规范 的 产物 ， 应 该 只 


在 旧版 本 浏览 器 中 使 用 。 实 际 开 发 中 ， 应 该 尽 可 能 使 用 fetch ()。 





24.1 xXMLHttpRequest 对 象 


IE5 是 第 一 个 引入 XHR 对 象 的 浏览 器 。 这 个 对 象 是 通过 ActiveX 对 象 实现 并 包含 在 MSXML 库 中 
的 。 为 此 ，XHR 对 象 的 3 个 版 本 在 浏览 器 中 分 别 被 暴露 为 MSXML2 .XMLHttp、MSXML2 .XMLHttp.3.0 


和 MXSML2 .XMLHttp.6.0。 
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所 有 现代 浏览 器 都 通过 xMLHttpRequest 构造 函数 原生 支持 XHR 对 象 : 


let xhr = new XMLHttpRequest ();} 


24.1.1 使 用 XHR 


使 用 XHR 对 象 首先 要 调用 open () 方 法 , 这 个 方法 接收 3 个 参数 : 请 求 类 型 ("get"、"post "等 )、 
请 求 URL， 以 及 表示 请 求 是 否 异步 的 布尔 值 。 下 面 是 一 个 例子 : 

xhr.open("get", "example.php", false); 

这 行 代 码 就 可 以 向 example.php 发 送 一 个 同步 的 GET 请 求 。 关 于 这 行 代 码 需 要 说 明 几 点 。 首 先 ， 这 
里 的 URL 是 相对 于 代码 所 在 页 面 的 ， 当 然 也 可 以 使 用 绝对 URL。 其 次 ,调用 open () 不 会 实际 发 送 请 
求 ， 只 是 为 发 送 请 求 做 好 准备 。 




















注意 只 能 访问 同 源 URL， 也 就 是 域名 相同 、 端 口 相同 、 协 议 相 同 。 如 果 请 求 的 URL 与 
发 送 请 


至 求 的 页 面 在 任何 方面 有 所 不 同 ， 则 会 抛 出 安全 错误 。 














要 发 送 定义 好 的 请 求 ， 必 须 像 下 面 这 样 调用 sena ( ) 方法 : 
xhr.open("get", "example.txt", false); 
xhr.send (null); 


send () 方 法 接收 一 个 参数 ， 是 作为 请 求 体 发 送 的 数据 。 如 果 不 需 要 发 送 请 求 体 ， 则 必须 传 nul1， 
因为 这 个 参数 在 某 些 浏览 器 中 是 必需 的 。 调 用 sena () 之 后 ,请求 就 会 发 送 到 服务 器 。 
因为 这 个 请 求 是 同步 的 , 所 以 JavaScript 代码 会 等 待 服务 器 响应 之 后 再 继续 执行 。 收 到 响应 后 , XHR 
对 象 的 以 下 属性 会 被 填充 上 数据 。 
口 responseText: 作为 响应 体 返 回 的 文本 。 
口 responseXML: 如 果 响 应 的 内 容 类 型 是 "texty/xml" 或 "application/xml"， 那 就 是 包含 响应 
数据 的 XML DOM 文档 。 
口 status: 响应 的 HTTP 状态 。 
口 statusText: 响应 的 HTTP 状态 描述 。 

收 到 响应 后 ， 第 一 步 要 检查 status 属性 以 确保 响应 成 功 返 回 。 一 般 来 说 ，HTTP 状态 码 为 2xx 表 
示 成 功 。 此 时 ，responseText 或 responseXML ( 如果 内 容 类 型 正确 ) 属性 中 会 有 内 容 。 如 果 HTTP 
状态 码 是 304， 则 表示 资源 未 修改 过 ， 是 从 浏览 器 缓存 中 直接 拿 取 的 。 当 然 这 也 意味 着 响应 有 效 。 为 确 
保 收 到 正确 的 响应 ， 应 该 检查 这 些 状态 ， 如 下 所 示 : 


xhr.open("get", "example.txt", false); 
xhr.send (null); 
















































































if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText); 

} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 

以 上 代码 可 能 显示 服务 器 返回 的 内 容 ， 也 可 能 显示 错误 消息 ,取决 于 HTTP 响应 的 状态 码 。 为 确定 
下 一 步 该 执行 什么 操作 , 最 好 检查 status 而 不 是 statusText 属性 ， 因为 后 者 已 经 被 证 明 在 蜂 浏 览 
的 情况 下 不 可 靠 。 无 论 是 什么 响应 内 容 类 型 , responseText 属性 始终 会 保存 响应 体 , 而 responseXML 
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则 对 于 非 XML 数据 是 nul1。 

虽然 可 以 像 前 面 的 例子 一 样 发 送 同 步 请 求 ， 但 多 数 情况 下 最 好 使 用 异步 请 求 ， 这 样 可 以 不 阻塞 
JavaScript 代码 继续 执行 。XHR 对 象 有 一 个 readystate 属性 ,表示 当前 处 在 请 求 /响应 过 程 的 哪个 阶段 。 
这 个 属性 有 如 下 可 能 的 值 。 
口 0: 未 初始 化 (Uninitialized )。 尚 未 调用 open ( ) 方 法 。 
口 1: 已 打开 (Open )。 已 调用 open () 方 法 ， 尚 未 调用 sena ( ) 方 法 。 
口 2: 已 发 送 (Sent )。 已 调用 send () 方法， 尚未 收 到 响应 。 
口 3: 接收 中 (Receiving )。 已 经 收 到 部 分 响应 。 
口 4: 完成 (Complete )。 已 经 收 到 所 有 响应 ， 可 以 使 用 了 。 
每 次 readystate 从 一 个 值 变 成 另 一 个 值 ， 都 会 触发 readystatechange 事件 。 可 以 借 此 机 会 检 
查 readyState 的 值 。 一 般 来 说 , 我 们 唯一 关心 的 readystate 值 是 4, 表示 数据 已 就 绪 。 为 保证 跨 浏 
览 帮 兼容 ，onreadystatechange 事件 处 理 程序 应 该 在 调用 open () 之 前 赋值 。 来 看 下 面 的 例子 : 


let xhr = new XMLHttpRequest ( ) ; 
xhr.onreadystatechange = function() { 






























































if (xhr.readyState == 4) { 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText);) 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 
} 
} 
3 
xhr.open("get", "example.txt", true); 


xhr.send (null); 


以 上 代码 使 用 DOM Level 0 风格 为 XHR 对 象 添 加 了 事件 处 理 程序 ， 因 为 并 不 是 所 有 浏览 器 都 支持 
DOM Level 2 风格 。 与 其 他 事件 处 理 程序 不 同 ，onreadystatechange 事件 处 理 程序 不 会 收 到 event 
对 象 。 在 事件 处 理 程序 中 ， 必 须 使 用 XHR 对 象 本 身 来 确定 接 下 来 该 做 什么 。 


















































注意 ”由 于 onreadystatechange 事件 处 理 程序 的 作用 域 问题 ， 这 个 例子 在 onready- 
statechange 事件 处 理 程序 中 使 用 了 xhr 对 象 而 不 是 this 对 象 。 使 用 this 可 能 导致 


功能 失败 或 导致 错误 ， 取 决 于 用 户 使 用 的 是 什么 浏览 器 。 因 此 还 是 使 用 保存 XHR 对 象 的 
变量 更 保险 一 些 。 




















在 收 到 响应 之 前 如 果 想 取消 异步 请 求 ， 可 以 调用 abort () 方 法 : 
xhr adomt (ys 


调用 这 个 方法 后 ，XHR 对 象 会 停止 触发 事件 ， 并 阻止 访问 这 个 对 象 上 任何 与 响应 相关 的 属性 。 中 
断 请 求 后 ， 应 该 取消 对 XHR 对 象 的 引用 。 由 于 内 存 问题 ， 不 推荐 重用 XHR 对 象 。 












































24.1.2 HTTP 头 部 


每 个 HTTP 请 求 和 响应 都 会 携带 一 些 头 部 字段 ， 这 些 字段 可 能 对 开发 者 有 用 。XHR 对 象 会 通过 
些 方法 暴露 与 请 求 和 响应 相关 的 头 部 字段 。 
默认 情况 下 ，XHR 请 求 会 发 送 以 下 头 部 字段 。 
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口 Accept: 浏览 器 可 以 处 理 的 内 容 类 型 。 
口 Accept-Charset: 浏览 器 可 以 显示 的 字符 集 。 
口 Accept-Encoding: 浏览 需 可 以 处 理 的 压缩 编码 类 型 。 
口 accept-Language: 浏览 如 使 用 的 语言 。 
口 connection: 浏览 器 与 服务 器 的 连接 类 型 
D cookie: 页 面 中 设置 的 Cookie。 
口 Host: 发 送 请 求 的 页 面 所 在 的 域 。 
口 Referer: 发 送 请 求 的 页 面 的 URI。 注意 , 这 个 字段 在 HTTP 规范 中 就 拼 错 了 ,所 以 考虑 到 兼容 
性 也 必须 将 错 就 错 。( 正确 的 拼写 应 该 是 Referrer。 ) 
口 User-Agent: 浏览 器 的 用 户 代 理 字符 串 。 
虽然 不 同 浏览 器 发 送 的 确切 头 部 字段 可 能 各 不 相同 , 但 这 些 通常 都 是 会 发 送 的 。 如 果 需 要 发 送 额 外 
的 请 求 头 部 ， 可 以 使 用 setRequestHeader () 方 法 。 这 个 方法 接收 两 个 参数 : 头 部 字段 的 名 称 和 值 。 
为 保证 请 求 头 部 被 发 送 ， 必 须 在 open () 之 后 、sendq() 之 前 调用 setReduestHeader() ， 如 下 面 的 例 
子 所 示 : 


let xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function() { 
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if (xhr.readyState == 4) { 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText);} 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 
} 
} 
ys 
xhr.open("get", "example.php", true); 


xhr.setRequestHeader ("MyHeader", "MyValue"); 
xhr.send (null); 


服务 器 通过 读 取 自 定义 头 部 可 以 确定 适当 的 操作 。 自 定义 头 部 一 定 要 区 别 于 浏览 器 正常 发 送 的 头 部 ， 
否则 可 能 影响 服务 器 正常 响应 。 有 些 浏览 器 允许 重 写 默认 头 部 ， 有 些 浏览 器 则 不 允许 。 

可 以 使 用 getResponseHeager () 方 法 从 XHR 对 象 获取 响应 头 部 ， 只 要 传人 要 获取 头 部 的 名 称 即 
可 。 如 果 想 取得 所 有 响应 头 部 ， 可 以 使 用 getAllResponseHeagders() 方 法 ， 这 个 方法 会 返回 包含 所 
有 响应 头 部 的 字符 串 。 下 面 是 调用 这 两 个 方法 的 例子 : 


let myHeader = xhr.getResponseHeader ("MyHeader"); 
let allHeaders xhr.getAllResponseHeaders(); 


服务 器 可 以 使 用 头 部 向 浏览 器 传递 额外 的 结构 化 数据 。 getAl1l1ResponseHeaders () 方 法 通常 返回 
类 似 如 下 的 字符 串 : 


Date: Sun, 14 Nov 2004 18:04:03 GMT 

Server: Apache/1.3.29 (Unix) 

Vary: Accept 

X-Powered-By: PHP/4.3.8 

Connection: close 

Content-Type: text/html; charset=iso-8859-1 


通过 解析 以 上 头 部 字段 的 输出 ， 就 可 以 知道 服务 器 发 送 的 所 有 头 部 ， 而 不 需要 单独 去 检查 了 。 
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24.1.3 GET 请 求 


最 常用 的 请 求 方法 是 GET 请 求 ， 用 于 向 服务 器 查询 某 些 信息 。 必 要 时 ， 需 要 在 GET 请 求 的 URL 
后 面 添加 查询 字符 串 参 数 。 对 XHR 而 言 ， 查 询 字 符 串 必须 正确 编码 后 添加 到 URL 后 面 ， 然 后 再 传 给 
open () 方 法 。 

发 送 GET 请 求 最 常见 的 一 个 错误 是 查询 字符 串 格 式 不 对 。 查 询 字符 串 中 的 每 个 名 和 值 都 必须 使 用 
encodeURIComponent () 编码 ， 所 有 名 / 值 对 必须 以 和 号 〈& ) 分 隔 ， 如 下 面 的 例子 所 示 : 


xhr.open("get", "example.php?namel=valuel&name2=value2", true); 
可 以 使 用 以 下 函数 将 查询 字符 串 参 数 添加 到 现 有 的 URL 末尾 : 


function addURLParam(url, name, value) { 
UEl + (Url imndexOf(™?") se TM RN) 
url += encodeURIComponent (name) + "=" + encodeURIComponent (value); 
return url; 


} 

这 里 定义 了 一 个 adgURLParam() 函数 ， 它 接收 3 个 参数 : 要 添加 查询 字符 串 的 URL、 查 询 参 数 和 
参数 值 。 首先 , 这 个 函数 会 检查 URL 中 是 和 否 已 经 包含 问号 ( 以 确定 是 否 已 经 存在 其 他 参数 )。 如 果 没 有 ， 
则 加 上 一 个 问号 ; 否则 就 加 上 一 个 和 号 。 然 后 ， 分 别 对 参数 名 和 参数 值 进行 编码 ， 并 添加 到 URL 末尾 。 
最 后 一 步 是 返回 更 新 后 的 URL。 

可 以 使 用 这 个 函数 构建 请 求 URL， 如 下 面 的 例子 所 示 : 






















































































let url = "example.php"; 

// 添加 参数 

url = addURLParam(url, "name", "Nicholas"); 

url = addURLParam(url, "book", "Professional JavaScript"); 


// 初始 化 请 求 
xhr.open("get", url, false);} 


这 里 使 用 adadaURLParam () 函数 可 以 保证 通过 XHR 发 送 请 求 的 URL 格式 正 帮 
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24.1.4 POST 请求 


第 二 个 最 常用 的 请 求 是 POST 请 求 ， 用 于 向 服务 器 发 送 应 该 保存 的 数据 。 每 个 POST 请 求 都 应 该 在 
请 求 体 中 携带 提交 的 数据 ,而 GET 请 求 则 不 然 。POST 请 求 的 请 求 体 可 以 包含 非常 多 的 数据 ， 而 且 数 据 
可 以 是 任意 格式 。 要 初始 化 POST 请 求 ，open () 方 法 的 第 一 个 参数 要 传 "post"， 比 如 : 

xhr.open("post", "example.php", true); 

接 下 来 就 是 要 给 send () 方 法 传人 要 发 送 的 数据 。 因 为 XHR 最 初 主要 设计 用 于 发 送 XML， 所 以 可 
以 传人 序列 化 之 后 的 XML DOM 文档 作为 请 求 体 。 当 然 ， 也 可 以 传人 任意 字符 串 。 

默认 情况 下 ， 对 服务 器 而 言 ，POST 请 求 与 提交 表单 是 不 一 样 的 。 服 务 器 逻辑 需要 读 取 原始 POST 
数据 才能 取得 浏览 器 发 送 的 数据 。 不 过 , 可 以 使 用 XHR 模拟 表单 提交 。 为 此 , 第 一 步 需要 把 content- 
Type 头 部 设置 为 "application/x-www-formurlencoded" ， 这 是 提交 表单 时 使 用 的 内 容 类 型 。 第 二 
步 是 创建 对 应 格式 的 字符 串 。POST 数据 此 时 使 用 与 查询 字符 串 相 同 的 格式 。 如 果 网 页 中 确实 有 一 个 表 
单 需要 序列 化 并 通过 XHR 发 送 到 服务 器 ， 则 可 以 使 用 第 14 章 的 serialize () 函数 来 创建 相应 的 字符 
串 ， 如 下 所 示 : 
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function submitData() { 
let xhr = new XMLHttpRequest ();} 
xhr.onreadystatechange = function() { 


if (xhr.readyState == 4) { 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText);} 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 


xhr.open("post", "postexample.php", true); 

xhr.setRequestHeader ("Content-Type", "application/x-www-form-urlencoded"); 
let form = document .getElementById("user-info"); 

xhr.send(serialize (form)); 


} 


在 这 个 函数 中 , 来 自卫 为 "user-info" 的 表单 中 的 数据 被 序列 化 之 后 发 送 给 了 服务 器 。PHP 文件 
postexample.php 随后 可 以 通过 $_PosT 取得 POST 的 数据 。 比 如 : 


<?php 
header ("Content-Type: text/plain"); 
echo <<<EOF 

Name: {S$_POST['user-name']} 

Email: {S$_POST['user-email']} 

EOF; 

?> 


假如 没有 发 送 content-Type 头 部 ，PHP 的 全 局 s_PosT 变量 中 就 不 会 包含 数据 ， 而 需要 通过 
SHTTP_RAW_POST_DATA 来 获取 。 



































注意 POST 请 求 相 比 GET 请 求 要 占用 更 多 资源 。 从 性 能 方面 说 ， 发 送 相同 数量 的 数据 ， 


GET 请 求 比 POST 请 求 要 快 两 倍 。 





24.1.5 XMLHttpRequest Level 2 


XHR 对 象 作 为 事实 标准 的 迅速 流行 ， 也 促使 W3C 为 规范 这 一 行为 而 制定 了 正式 标准 。 
XMLHttpRequest Level 1 只 是 把 已 经 存在 的 XHR 对 象 的 实现 细节 明确 了 一 下 。XMLHttpRequest Level 2 
又 进一步 发 展 了 XHR 对 象 。 并 非 所 有 浏览 器 都 实现 了 XMLHttpRequest Level 2 的 所 有 部 分 ， 但 所 有 浏 
览 器 都 实现 了 其 中 部 分 功能 。 

1. FormData 类 型 

现代 Web 应 用 程序 中 经 常 需要 对 表单 数据 进行 序列 化 ， 因 此 XMLHttpRequest Level 2 新 增 了 
FormData 类 型 。FormData 类 型 便于 表单 序列 化 ， 也 便于 创建 与 表单 类 似 格式 的 数据 然后 通过 XHR 
发 送 。 下面 的 代码 创建 了 一 个 FormData 对 象 ， 并 填充 了 一 些 数据 : 


let data = new FormData(); 
data.append("name", "Nicholas"); 


append() 方 法 接收 两 个 参数 : 键 和 值 ， 相 当 于 表单 字段 名 称 和 该 字段 的 值 。 可 以 像 这 样 添加 任意 
多 个 键 / 值 对 数据 。 此 外 ， 通 过 直接 给 Formpata 构造 函数 传人 一 个 表单 元 素 ， 也 可 以 将 表单 中 的 数据 
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作为 键 / 值 对 填充 进去 : 
let data = new FormData (document.forms[0]); 
有 了 FormData 实例 ， 可 以 像 下 面 这 样 直接 传 给 XHR 对 象 的 send ( ) 方法 : 


let xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function() { 








if (xhr.readyState == 4) { 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText); 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 
} 
} 
起 
xhr.open("post", "postexample.php", true); 


let form = document .getElementById("user-info"); 
xhr.send(new FormData(form)); 


使 用 FormData 的 另 一 个 方便 之 处 是 不 再 需要 给 XHR 对 象 显 式 设置 任何 请 求 头 部 了 。XHR 对 象 能 
够 识别 作为 FormData 实例 传人 的 数据 类 型 并 自动 配置 相应 的 头 部 。 

2. 超时 

IE8 给 XHR 对 象 增加 了 一 个 timeout 属性 ， 用 于 表示 发 送 请 求 后 等 待 多 少 毫秒 ， 如 果 响 应 不 成 功 
就 中 断 请 求 。 之 后 所 有 浏览 右 都 在 自己 的 XHR 实现 中 增加 了 这 个 属性 。 在 给 timeout 属性 设置 了 一 个 
时 间 且 在 该 时 间 过 后 没有 收 到 响应 时 ，XHR 对 象 就 会 触发 timeout 事件 ， 调 用 ontimeout 事件 处 理 
程序 。 这 个 特性 后 来 也 被 添加 到 了 XMLHttpRequest Level 2 规范。 下面 看 一 个 例子 : 


let xhr = new XMLHttpRequest ( ) ; 
xhr.onreadystatechange = function() { 
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if (xhr.readyState == 4) { 
try { 
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText);} 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 
} catch (ex) { 
// 假设 由 ontimeout 处 理 
} 
} 





xhr.open("get", "timeout.php", true); 
xhr.timeout = 1000; // 设置 1 秒 超时 
xhr.ontimeout = function() { 

alert ("Request did not return in a second."); 


}; 
xhr.send (null); 


这 个 例子 演示 了 使 用 timeout 设置 超时 。 给 timeout 设置 1000 毫秒 意味 着 ， 如 果 请 求 没 有 在 1 
秒 钟 内 返回 则 会 中 断 。 此 时 则 会 触发 ont imeout 事件 处 理 程序 ，readystate 仍然 会 变 成 4， 因 此 也 
会 调用 onreadystatechange 事件 处 理 程序 。 不 过 , 如 果 在 超时 之 后 访问 status 属性 则 会 发 生 错 误 。 
为 做 好 防护 ， 可 以 把 检查 status 属性 的 代码 封装 在 try/catch 语句 中 。 
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3. overrideMimeType() 方 法 

Firefox 首先 引入 了 overrideMimeType() 方 法 用 于 重 写 XHR 响应 的 MIME 类 型 。 这 个 特性 后 来 
也 被 添加 到 了 XMLHttpRequest Level 2。 因 为 响应 返回 的 MIME 类 型 决定 了 XHR 对 象 如 何 处 理 响应 ， 
所 以 如 果 有 办 法 履 羡 服务 器 返回 的 类 型 ， 那 么 是 有 帮助 的 。 

假设 服务 器 实际 发 送 了 XML 数据 ， 但 响应 头 设置 的 MIME 类 型 是 text /plain。 绪 果 就 会 导致 虽 
然 数 据 是 XML, 但 responsexML 属性 值 是 null1。 此 时 调用 overriqdeMimeType() 可 以 保证 将 响应 
当成 XML 而 不 是 纯 文本 来 处 理 : 


let xhr = new XMLHttpRequest ();} 
xhr.open("get", "text.php", true); 
xhr.overrideMimeType ("text/xml"); 
xhr.send (null); 


这 个 例子 强制 让 XHR 把 响应 当成 XML 而 不 是 纯 文 本 来 处 理 。 为 了 正确 覆盖 响应 的 MIME 类 型 ， 
必须 在 调用 send () 之 前 调用 overrideMimeType()。 


24.2 ”进度 事件 


Progress Events 是 W3C 的 工作 草案 , 定义 了 客户 端 -服务 器 端 通信 。 这 些 事件 最 初 只 针对 XHR,， 现 
在 也 推广 到 了 其 他 类 似 的 API。 有 以 下 6 个 进度 相关 的 事件 。 
口 loadstart: 在 接收 到 响应 的 第 一 个 字 节 时 触发 。 
口 brogress: 在 接收 响应 期 间 反 复 触发 。 
D error: 在 请 求 出 错时 触发 。 
口 abort: 在 调用 abort () 终 止 连接 时 触发 。 
口 10ad: 在 成 功 接收 完 响 应 时 触发 。 
口 1oaqendq: 在 通信 完成 时 ， 且 在 error、abort 或 10ad 之 后 触发 。 
每 次 请 求 都 会 首先 触发 loadstart 事件 ,之 后 是 一 个 或 多 个 progress 事件 ,接着 是 error abort 
或 10ad 中 的 一 个 ， 最 后 以 10adend 事件 结 
这 些 事件 大 部 分 都 很 好 理解 ， 但 其 中 有 两 个 需要 说 明 一 下 。 


24.2.1 1load 事件 


Firefox 最 初 在 实现 XHR 的 时 候 ， 曾 致力 于 简化 交互 模式 。 最 终 ， 增 加 了 一 个 1oad 事件 用 于 替代 
readystatechange 事件 。 1o0ad 事件 在 响应 接收 完成 后 立即 触发 , 这 样 就 不 用 检查 readystate 属性 
了 。onloagd 事件 处 理 程序 会 收 到 一 个 event 对 象 ， 其 target 属性 设置 为 XHR 实例 ， 在 这 个 实例 上 
可 以 访问 所 有 XHR 对 象 属性 和 方法 。 不 过 ， 并 不 是 所 有 浏览 器 都 实现 了 这 个 事件 的 event 对 象 。 考虑 
到 跨 浏 览 器 兼容 ， 还 是 需要 像 下 面 这 样 使 用 XHR 对 象 变量 : 


let xhr = new XMLHttpRequest ();} 
xhr.onload = function() { 
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if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText); 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 
} 
}; 
xhr.open("get", "altevents.php", true); 


xhr.send (null); 
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只 要 是 从 服务 器 收 到 响应 , 无 论 状态 码 是 什么 , 都 会 触发 1oad 事件 。 这 意味 着 还 需要 检查 status 
属性 才能 确定 数据 是 否 有 效 。Firefox 、Opera 、Chrome 和 Safari 都 支持 1oaqd 事件 。 


24.2.2 ” progress 事件 


Mozilla 在 XHR 对 象 上 另 一 个 创新 是 progress 事件 , 在 浏览 器 接收 数据 期 间 ， 这 个 事件 会 反复 触 
发 。 每 次 触发 时 ，onprogress 事件 处 理 程序 都 会 收 到 event 对 象 ， 其 target 属性 是 XHR 对 象 ， 且 
包含 3 个 额外 属性 : lengthcomputable、position 和 totalsize。 其 中 ，lengthcomputable 是 
一 个 布尔 值 ， 表 示 进 度 信息 是 否 可 用 ; position 是 接收 到 的 字 节 数 ; totalsize 是 响应 的 Content- 
Length 头 部 定义 的 总 字 节 数 。 有 了 这 些 信 息 ， 就 可 以 给 用 户 提供 进度 条 了 。 以 下 代码 演示 了 如 何 向 
户 展示 进度 : 


let xhr = new XMLHttpRequest ( ) ; 


























































































































xhr.onload = function(event) { 
if ((xhr.status >= 200 && xhr.status < 300) || 
xhr.status == 304) { 
alert (xhr.responseText);} 
} else { 
alert ("Request was unsuccessful: " + xhr.status); 
} 
过 
xhr.onprogress = function(event) { 


let divStatus = document .getElementById("status"); 
if (event.lengthComputable) { 


divStatus .innerHTML = "Received " + event.position + " of " + 
event .totalSize + 
" bytes"; 
} 
}; 
xhr.open("get", "altevents.php", true); 


xhr.send (null); 


为 了 保证 正确 执行 ， 必 须 在 调用 open () 之 前 添加 onprogress 事件 处 理 程序 。 在 前 面 的 例子 中 ， 
每 次 触发 progress 事件 都 会 更 新 HTML 元 素 中 的 信息 。 假设 响应 有 content-Length 头 部 ， 就 可 以 
利用 这 些 信息 计算 出 已 经 收 到 响应 的 百分比 。 


24.3 “” 跨 源 资 源 共 享 


通过 XHR 进行 Ajax 通信 的 一 个 主要 限制 是 跨 源 安 全 策略 。 默 认 情 况 下 ，XHR 只 能 访问 与 发 起 请 
求 的 页 面 在 同一 个 域内 的 资源 。 这 个 安全 限制 可 以 防止 某 些 恶意 行为 。 不 过 , 浏览 器 也 需要 支持 合法 跨 
源 访 问 的 能 
跨 源 资源 共享 (CORS，Cross-Origin Resource Sharing ) 定义 了 浏览 右 与 服务 器 如 何 实现 跨 源 通信 。 
CORS 背后 的 基本 思路 就 是 使 用 自 定义 的 HTTP 头 部 允许 浏览 器 和 服务 器 相互 了 解 ， 以 确实 请 求 或 响应 
应 该 成 功 还 是 失败 。 
对 于 简单 的 请 求 ， 比 如 GET 或 POST 请求， 没有 自 定 义 头 部 ， 而 且 请 求 体 是 text /plain 类 型 ， 
这 样 的 请 求 在 发 送 时 会 有 一 个 额外 的 头 部 叫 origin。origin 头 部 包含 发 送 请 求 的 页 面 的 源 (协议 、 
域名 和 端口 )， 以 便服 务 器 确定 是 否 为 其 提供 响应 。 下 面 是 origin 头 部 的 一 个 示例 : 
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Origin: http://ww.nczonline.net 

如 果 服 务 器 决定 响应 请 求 , 那么 应 该 发 送 Access-control-Allow-Origin 头 部 , 包含 相同 的 源 ; 
或 者 如 果 资 源 是 公开 的 ， 那 么 就 包含 "*" 。 比 如 : 

Access-Control-Allow-Origin: http://ww.nczonline.net 

如 果 没 有 这 个 头 部 , 或 者 有 但 源 不 匹配 ， 则 表明 不 会 响应 浏览 絮 请 求 。 否 则 ,服务 器 就 会 处 理 这 个 
请 求 。 注 意 ， 无论 请 求 还 是 响应 都 不 会 包含 cookie 信息 。 

现代 浏览 器 通过 XMLHttpRequest 对 象 原生 支持 CORS。 在 尝试 访问 不 同 源 的 资源 时 ， 这 个 行为 
会 被 自动 触发 ,要 向 不 同 域 的 源 发 送 请 求 , 可 以 使 用 标准 XHR 对 象 并 给 open () 方 法 传人 一 个 绝对 URL， 
比如 : 


let xhr = new XMLHttpRequest (); 
xhr.onreadystatechange = function() { 
if (xhr.readyState == 4) { 









































if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) { 
alert (xhr.responseText);} 

} else { 
alert ("Request was unsuccessful: " + xhr.status); 


} 
} 
js 
xhr.open("get", "http://www.somewhere-else.com/page/", true); 
xhr.send (null); 


跨 域 XHR 对 象 允 许 访问 status 和 statusText 属性 ,也 允许 同步 请 求 ,出 于 安全 考虑 , 跨 域 XHR 
对 象 也 施加 了 一 些 额外 限制 。 
口 不 能 使 用 setRequestHeader () 设 置 自 定义 头 部 。 
口 不 能 发 送 和 接收 cookie。 
口 getAl1ResponseHeaders () 方 法 始终 返回 空 字符 串 。 
因为 无 论 同 域 还 是 跨 域 请 求 都 使 用 同一 个 接口 , 所 以 最 好 在 访问 本 地 资源 时 使 用 相对 URL , 在 访问 
远程 资源 时 使 用 绝对 URL。 这 样 可 以 更 明确 地 区 分 使 用 场景 , 同时 避免 出 现 访问 本 地 资源 时 出 现 头 部 或 
cookie 信息 访问 受 限 的 问题 。 




































































24.3.1 ” 预 检 请 求 


CORS 通过 一 种 叫 预 检 请 求 (preflighted request ) 的 服务 器 验证 机 制 , 允许 使 用 自 定义 头 部 、 除 GET 
和 了 POST 之 外 的 方法 ,以 及 不 同 请 求 体内 容 类 型 。 在 要 发 送 涉 及 上 述 某 种 高 级 选项 的 请 求 时 ,会 先 向 服 
务 器 发 送 一 个 “ 预 检 ” 请 求 。 这 个 请 求 使 用 OPTIONS 方法 发 送 并 包含 以 下 头 部 。 
口 origin: 与 简单 请 求 相 同 。 
口 Access-Control-Request-Method: 请 求 希望 使 用 的 方法 。 
口 Access-Control-Request-Headers: (可 选 ) 要 使 用 的 逗号 分 隔 的 自 定义 头 部 列表 。 
下 面 是 一 个 假设 的 POST 请 求 ， 包 含 自 定义 的 Ncz 头 部 : 


Origin: http://ww.nczonline.net 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: NCZ 


这 个 请 求 发 送 后 ,服务 器 可 以 确定 是 否 允许 这 种 类 型 的 请 求 。 服务器 会 通过 在 响应 中 发 送 如 下 头 
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部 与 浏览 器 沟通 这 些 信息 。 





例如 : 


口 access-control-Allow-origin: 与 简单 请 求 相 同 。 

口 Access-Control-Allow-Methods: 允许 的 方法 (逗号 分 隔 的 列表 )。 

口 Access-Control-Allow-Headers: 服务 需 人 允许 的 头 部 (逗号 分 隔 的 列表 )。 
口 Access-Control-Max-Age: 缓存 预 检 请 求 的 秒 数 。 





下 





Access-Control-Allow-Origin: http://ww.nczonline.net 
Access-Control-Allow-Methods: POST, GET 
Access-Control-Allow-Headers: NCZ 
Access-Control-Max-Age: 1728000 


预 检 请 求 返 





回 后 ,结果 会 按 响应 指定 的 时 间 缓 存 一 段 时 间 。 换 句 话 说 ， 只 有 第 一 次 发 送 这 种 类 型 的 











请 求 时 才 会 多 发 送 一 次 额外 的 HTTP 请 求 。 


24.3.2 ”凭据 请 求 





默认 情况 下 ， 跨 源 请 求 不 提供 凭据 (cookie 、HTTP 认证 和 客户 端 SSL 证 书 )。 可 以 通过 将 
withcredqentials 属性 设置 为 true 来 表明 请 求 会 发 送 凭据 。 如 果 服 务 器 允许 带 凭 据 的 请 求 ， 那 么 可 


























以 在 啊 应 中 包含 如 下 HTTP 头 部 : 


Access-Control-Allow-Credentials: true 


如 果 发 送 了 和 凭据 请 求 而 服务 器 返回 的 响应 中 没有 这 个 头 部 ， 则 浏览 器 不 会 把 响应 交 给 JavaScript 








( responseText 是 空 字符 串 ，status 是 0，onerror () 被 调用 )。 注 意 ， 服 务 器 也 可 以 在 预 检 请 求 的 


响应 中 发 送 这 个 








HTTP 头 部 ， 以 表明 这 个 源 人 允许 发 送 赁 据 请 求 。 


24.4 替代 性 跨 源 技术 


CORS 出 现 之 前 , 实现 跨 源 Ajax 通信 和 是 有 点 麻烦 的 。 开 发 者 需要 依赖 能 够 执行 跨 源 请 求 的 DOM 特 
性 ， 在 不 使 用 XHR 对 象 情况 下 发 送 某 种 类 型 的 请 求 。 虽 然 CORS 目前 已 经 得 到 广泛 支持 ,但 这 些 技术 














仍然 没有 过 时 ， 








因为 它们 不 需要 修改 服务 器 。 


24.4.1 图 片 探测 











图 片 探测 是 利用 <img> 标 签 实现 跨 域 通 信 的 最 早 的 一 种 技术 。 任 何 页 面 都 可 以 跨 域 加 载 图 片 而 不 





必 担 心 限制 ， 因 此 这 也 是 在 线 广告 跟踪 的 主要 方式 。 可 以 动态 创建 图 片 ， 然 后 通过 它们 的 onloag 和 
onerror 事件 处 理 程序 得 知 何 时 收 到 响应 。 

这 种 动态 创建 图 片 的 技术 经 常用 于 图 片 探 测 (image pings )。 图 片 探 测 是 与 服务 器 之 间 简 单 、 跨 域 、 
单 向 的 通信 。 数据 通过 查询 字符 串 发 送 , 响应 可 以 随意 设置 , 不 过 一 般 是 位 图 图 片 或 值 为 204 的 状态 码 。 
浏览 器 通过 图 片 探测 拿 不 到 任何 数据 ， 但 可 以 通过 监听 onloag 和 onerror 事件 知道 什么 时 候 能 接收 
到 响应 。 下 面 看 一 个 例子 : 



































Let “img 

















new Image(); 


img.onload = img.onerror = function() { 
alert ("Done!"); 


} 


img.src = 


"http://www.example.com/test?name=Nicholas"; 
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这 个 例子 创建 了 一 个 新 的 Image 实例 ,然后 为 它 的 onloag 和 onerror 事件 处 理 程序 添加 了 同一 
个 函数 。 这 样 可 以 确保 请 求 完 成 时 无 论 什 么 响应 都 会 收 到 通知 。 设 置 完 src 属性 之 后 请 求 就 开始 了 , 这 
个 例子 向 服务 器 发 送 了 一 站 name 值 。 
图 片 探测 频繁 用 于 跟踪 用 户 在 页 面 上 的 点 击 操作 或 动态 显示 广告 。 当 然 ,图 片 探测 的 缺点 是 只 能 发 
送 GET 请 求 和 无 法 获取 服务 器 响应 的 内 容 。 这 也 是 只 能 利用 图 片 探测 实现 浏览 器 与 服务 器 单 向 通信 的 






























































24.4.2 JSONP 


JSONP 是 “JSON with padding” 的 简写 ， 是 在 Web 服务 上 流行 的 一 种 JSON 变 体 。JSONP 看 起 来 
跟 JSON 一 样 ， 只 是 会 被 包 在 一 个 函数 调用 里 ， 比 如 : 

callback({ "name": "Nicholas" }); 

JSONP 格式 包含 两 个 部 分 : 回调 和 数据 。 回 调 是 在 页 面 接收 到 响应 之 后 应 该 调用 的 函数 , 通常 回调 
函数 的 名 称 是 通过 请 求 来 动态 指定 的 。 而 数据 就 是 作为 参数 传 给 回调 函数 的 JSON 数据 。 下 面 是 一 个 典 
型 的 JSONP 请 求 : 

http://freegeoip.net/json/?callback=handleResponse 

这 个 JSONP 请 求 的 URL 是 一 个 地 理 位 置 服务 。 JSONP 服务 通常 支持 以 查询 字符 串 形式 指定 回调 函 
数 的 名 称 。 比 如 这 个 例子 就 把 回调 函数 的 名 字 指 定 为 handleResponse()。 

JSONP 调用 是 通过 动态 创建 <script> 元 素 并 为 src 属性 指定 跨 域 URL 实现 的 。 此 时 的 <script> 
与 <img> 元 素 类 似 ， 能够 不 受 限制 地 从 其 他 域 加 载 资源 。 因 为 JSONP 是 有 效 的 JavaScript， 所 以 JSONP 
响应 在 被 加 载 完 成 之 后 会 立即 执行 。 比 如 下 面 这 个 例子 : 


function handleResponse(response) { 
console.log(. 
You're at IP address S${response.ip}, which is in 
$s{response.city}, S${response.region name}.); 



























































































































































} 

let Script = document.createElement ("script"); 

script.src = "http://freegeoip.net/json/?callback=handleResponse"; 
document .body.insertBefore(script, document.body.firstChild); 


这 个 例子 会 显示 从 地 理 位 置 服务 获取 的 人 P 地 址 及 位 置信 息 。 

JSONP 由 于 其 简单 易 用 , 在 开发 者 中 非常 流行 。 相 比 于 图 片 探测 ,使 用 JSONP 可 以 直接 访问 响应 ， 
实现 浏览 器 与 服务 器 的 双向 通信 。 不 过 JSONP 也 有 一 些 缺 点 。 

首先 , JSONP 是 从 不 同 的 域 拉 取 可 执行 代码 。 如 果 这 个 域 并 不 可 信 , 则 可 能 在 响应 中 加 入 恶意 内 容 。 
此 时 除了 完全 删除 JSONP 没有 其 他 办 法 。 在 使 用 不 受 控 的 Web 服务 时 ,一定 要 保证 是 可 以 信任 的 。 
第 二 个 缺点 是 不 好 确定 JSONP 请 求 是 否 失 败 。 虽 然 HTML5 规定 了 <script> 元 素 的 onerror 事件 
处 理 程序 ,但 还 没有 被 任何 浏览 器 实现 。 为 此 ， 开 发 者 经 常 使 用 计时 器 来 决定 是 否 放弃 等 待 响 应 。 这 种 
方式 并 不 准确 ， 毕 竞 不 同 用 户 的 网 络 连接 速度 和 带宽 是 不 一 样 的 。 i 


24.5 Fetch API 


Fetch API 能 够 执行 xMLHttpRequest 对 象 的 所 有 任务 ， 但 更 容易 使 用 ， 接 口 也 更 现代 化 ， 能 够 在 
Web 工作 线程 等 现代 Web 工具 中 使 用 。xMLHttpRequest 可 以 选择 异步 ， 而 Fetch API 则 必须 是 异 ; 
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Fetch API 是 WHATWG 的 一 个 “ 活 标 准 ”( living standard )， 用 规范 原文 说 ， 就 是 “Fetch 标准 定义 请 求 、 
响应 ， 以 及 绑 定 二 者 的 流程 : 获取 ( fetch )。 

Fetch API 本 身 是 使 用 JavaScript 请 求 资源 的 优秀 工具 ， 同 时 这 个 API 也 能 够 应 用 在 服务 线程 
( service worker ) 中 ， 提 供 拦截 、 重 定向 和 修改 通过 fetch () 生成 的 请 求 接口 。 


24.5.1 基本 用 法 


fetch () 方 法 是 暴露 在 全 局 作用 域 中 的 ， 包 括 主页 面 执行 线程 、 模 块 和 工作 线程 。 调 用 这 个 方法 ， 
浏览 器 就 会 向 给 定 URL 发 送 请 求 。 

1. 分 派 请 求 
fetch () 只 有 一 个 必需 的 参数 input。 多 数 情况 下 ,这 个 参数 是 要 获取 资源 的 URL。 这 个 方法 返回 
一 个 期 约 : 


let r = fetch('/bar'); 
console.log(r); // Promise <pending> 


URL 的 格式 (相对 路 径 、 绝 对 路 径 等 ) 的 解释 与 XHR 对 象 一 样 。 

请 求 完成 、 资 源 可 用 时 ,期 约会 解决 为 一 个 Response 对 象 。 这 个 对 象 是 API 的 封装 ， 可 以 通过 它 
取得 相应 资源 。 获 取 资 源 要 使 用 这 个 对 象 的 属性 和 方法 ， 掌 握 响应 的 情况 并 将 负载 转换 为 有 用 的 形式 ， 
如 下 所 示 : 


fetch('bar.txt') 
.then((response) => { 
console.log(response); 
}); 























lm 
































// Response { type: "basic", url: ... } 


2. 读 取 响 应 

读 取 响 应 内 容 的 最 简单 方式 是 取得 纯 文本 格式 的 内 容 ， 这 要 用 到 text () 方 法 。 这 个 方法 返回 一 个 
期 约 ， 会 解决 为 取得 资源 的 完整 内 容 : 

fetch('pbar.txt') 


.then( (response) => { 
response.text().then((data) => { 


console.log(data); 
}); 
}); 























// bar.txt 的 内 容 
内 容 的 结构 通常 是 打 平 的 : 


fetch('bar.txt') 
.then( (response) => response.text()) 
.then((data) => console.log(data)); 





// bar.txt 的 内 容 

3. 处 理 状态 码 和 请 求 失败 

Fetch API 支持 通过 Response 的 status (状态 码 ) 和 statusText (状态 文本 ) 属性 检查 响应 状 
态 。 成 功 获取 响应 的 请 求 通常 会 产生 值 为 200 的 状态 码 ， 如 下 所 示 : 
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fetch('/bar') 
.then( (response) => { 
console.log(response.status); // 200 
console.log(response.statusText); // OK 


} 
请 求 不 存在 的 资源 通常 会 产生 值 为 404 的 状态 码 : 


fetch('/does-not-exist') 
.then( (response) => { 
console.log(response.status); // 404 
console.log(response.statusText); // Not Found 


已 
请 求 的 URL 如 果 抛 出 服务 器 错误 会 产生 值 为 500 的 状态 码 : 


fetch('/throw-server-error') 
.then( (response) => { 
console.log(response.status); // 500 
console.log(response.statusText); // Internal Server Error 


}); 
可 以 显 式 地 设置 fetch() 在 过 到 重 定向 时 的 行为 ( 本章 后 面 会 介绍 )， 不 过 默认 行为 是 跟随 重 定向 
并 返回 状态 码 不 是 300~399 的 响应 。 跟 随 重 定 问 时 ， 响 应 对 象 的 redirected 属性 会 被 设置 为 true， 
而 状态 码 仍然 是 200: 


fetch('/permanent-redirect') 
.then( (response) => { 

// 默认 行为 是 跟随 重 定向 直到 最 终 URL 
// 这 个 例子 会 出 现 至 少 两 轮 网 络 请 求 
// <origin url>/permanent-redirect -> <redirect url> 
console.log(response.status); // 200 
console.log(response.statusText); // OK 
console.log(response.redirected); // true 


了 
在 前 面 这 儿 个 例子 中 ， 虽然 请 求 可 能 失败 ( 如 状态 码 为 500 )， 但 都 只 执行 了 期 约 的 解决 处 理 函 数 。 


mA 


事实 上 ， 只 要 服务 器 返回 了 响应 ，fetch () 期 约 都 会 解决 。 这 个 行为 是 合理 的 : 系统 级 网 络 协议 已 经 成 
功 完 成 消息 的 一 次 往返 传输 。 至 于 真正 的 “成 功 ”请 求 ， 则 需要 在 处 理 响应 时 再 定义 。 

通常 状态 码 为 200 时 就 会 被 认为 成 功 了 ， 其 他 情况 可 以 被 认为 未 成 功 。 为 区 分 这 两 种 情况 ， 可 以 在 
状态 码 非 200~299 时 检查 Response 对 象 的 ok 属性 : 


fetch('/bar') 

.then( (response) => { 
console.log(response.status); // 200 
console.log(response.ok); // true 

上 

fetch('/does-not-exist') 

.then( (response) => { 
console.log(response.status); // 404 
console.log(response.ok); // false 

7 


因为 服务 器 没有 响应 而 导致 浏览 器 超时 ， 这 样 真正 的 fet ch () 失败 会 导致 期 约 被 拒绝 : 


fetch('/hangs-forever') 
.then( (response) => { 
console.log(response); 
}, (err) => { 
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console.log(err); 
J} 


// (浏览 器 超时 后 ) 


// TypeError: "NetworkError when attempting to fetch resource." 


违反 CORS、 无 网 络 连 接 、HTTPS 错 配 及 其 他 浏览 器 /网 络 策略 问题 都 会 导致 期 约 被 拒绝 。 
可 以 通过 url 属性 检查 通过 fetch() 发 送 请 求 时 使 用 的 完整 URL: 


// foo.com/bar/baz 发 送 的 请 求 
console.log(window.location.href); // https://foo.com/bar/baz 





fetch('qux') .then( (response) => console.log(response.url)); 
// https://foo.com/bar/qux 


fetch('/qux') .then( (response) => console.log(response.url]l)); 
// https://foo.com/qux 


fetch('//qux.com') .then( (response) => console.log(response.url)); 
// https://qux.com 





fetch('https://qux.com') .then( (response) => console.log(response.url)); 
// https://qux.com 


4. 自 定义 选项 
只 使 用 URL 时 ，fetcnh () 会 发 送 GET 请 求 ， 只 包含 最 低 限度 的 请 求 涉 。 要 进一步 配置 如 何 发 送 请 
求 ， 需 要 传人 可 选 的 第 二 个 参数 init 对 象 。init 对 象 要 按照 下 表 中 的 键 / 值 进行 填充 。 






































键 值 
boqy 指定 使 用 请 求 体 时 请 求 体 的 内 容 
必须 是 Blop、BufferSource、FormData、URLSearchParams 、ReadableStream 或 String 的 
实例 























cache 








于 控制 浏览 器 与 HITP 缓存 的 交互 。 要 跟踪 缓存 的 重 定向 , 请 求 的 redirect 属性 值 必须 是 "follow"， 
而 且 必 须 符合 同 源 策 略 限制 。 必 须 是 下 列 值 之 一 

Default 

口 fetch bn 不 发 送 请 求 

口 we 送 条 件 式 请 求 。 如 果 响 应 已 经 改变 ,， 则 更 新 缓存 的 值 。 然 后 fetch () 
返回 缓存 的 值 

口 未 命中 缓存 会 发 送 请 求 ， 并 缓存 响应 。 然 后 fetch () 返 回响 应 

no-store 

口 浏览 器 不 检查 缓存 ， 直 接 发 送 请 求 
口 不 缓存 响应 ， 直 接 通过 fetch() 返 区 
reload 
口 浏览 名 不 检查 缓存 ， 直 接 发 送 请 求 
口 缓存 响应 ， 再 通过 fetch () 返 回 
no-cache 
口 无 论 命中 有 效 缓存 还 是 无 效 缓存 都 会 发 送 条 件 式 请 求 。 如 果 响 应 已 经 改变 , 则 更 新 缓存 的 值 。 然 
后 fetch () 返 回 缓存 的 值 

口 未 命中 缓存 会 发 送 请 求 ， 并 缓存 响应 。 然 后 fetch () 返 回响 应 


工 
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键 值 





force-cache 
口 无 论 命中 有 效 缓存 还 是 无 效 缓存 都 通过 fetch () 返回 。 不 发 送 请 求 
口 未 命中 缓存 会 发 送 请 求 ， 并 缓存 响应 。 然 后 fetch () 返回 响应 
only-if-cached 
口 只 在 请 求 模式 为 same-origin 时 使 用 缓存 

口 无 论 命中 有 效 缓存 还 是 无 效 缓存 都 通过 fetch () 返回 。 不 发 送 请 求 
口 未 命中 缓存 返回 状态 码 为 504( 网 关 超 时 ) 的 响应 

默认 为 aefault 
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credentials 用 于 指定 在 外 发 请 求 中 如 何 包 含 cookie。 与 XMLHttpRequest 的 withcredentials 标签 类 似 
必须 是 下 列 字符 串 值 之 一 

口 omit: 不 发 送 cookie 

口 same-origin: 只 在 请 求 URL 与 发 送 fetch () 请 求 的 页 面 同 源 时 发 送 cookie 

口 include: 无 论 同 源 还 是 跨 源 都 包含 cookie 


在 支持 Credential Management API 的 浏览 器 中 ， 也 可 以 是 一 个 Federatedcredential 或 
Passwordcredential 的 实例 


默认 为 same-origin 





















































headers 用 于 指定 请 求 头 部 
必须 是 Headers 对 象 实例 或 包含 字符 串 格式 键 / 值 对 的 常规 对 象 
默认 值 为 不 包含 键 / 值 对 的 Headers 对 象 。 这 不 意味 着 请 求 不 包含 任何 头 部 ， 浏 览 器 仍然 会 随 请 求 
发 送 一 些 头 部 。 虽 然 这 些 头 部 对 JavaSeript 不 可 见 ， 但 浏览 器 的 网 络 检查 器 可 以 观察 到 














ee 用 于 强制 子 资源 完整 性 
必须 是 包含 子 资源 完整 性 标识 符 的 字符 
默认 为 空 字符 











好 


Ld 

















keepalive 用 于 指示 浏览 器 允许 请 求 存在 时 间 超 出 页 面 生命 周期 。 适 合 报 告 事件 或 分 析 ， 比 如 页 面 在 fetch() 
请 求 后 很 快 秃 载 。 设 置 keepalive 标志 的 fetch () 请 求 可 用 于 替代 Navigator.sendBeacon () 
必须 是 布尔 值 
默认 为 false 





















































method 








于 指定 HTTP 请 求 方法 
本 上 就 是 如 下 字符 串 值 : 
GET 

POST 

PUT 

PATCH 

DELETE 

HEAD 

OPTIONS 

CONNECT 

TARCE 


默认 为 GET 
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( 续 ) 
键 值 
mode 用 于 指定 请 求 模式 。 这 个 模式 决定 来 自 跨 源 请 求 的 响应 是 否 有 效 ， 以 及 客户 端 可 以 读 取 多 少 响应 。 
违反 这 里 指定 模式 的 请 求 会 抛 出 错误 
必须 是 下 列 字符 串 值 之 一 
口 cors: 允许 遵守 CORS 协议 的 跨 源 请 求 。 响 应 是 “CORS 过 滤 的 响应 ”， 意 思 是 响应 中 可 以 访问 
的 浏览 器 头 部 是 经 过 浏览 器 强制 白 名 单 过 滤 的 
口 no-cors: 人 允许 不 需要 发 送 预 检 请 求 的 跨 源 请 求 HEAD 、GET 和 只 带 有 满足 CORS 请 求 头 部 的 
POST )。 响 应 类 型 是 opaque， 意 思 是 不 能 读 取 响 应 内 容 
口 same-origin: 任何 跨 源 请 求 都 不 允许 发 送 
口 navigate: 用 于 支持 HTML 导航 ， 只 在 文档 间 导 航 时 使 用 。 基 本 用 不 到 
在 通过 构造 函数 手动 创建 Request 实例 时 ， 默 认为 cors; 否则 ， 默 认为 no-cors 
redirect 用 于 指定 如 何 处 理 重 定向 响应 ( 状态 码 为 301、302、303、307 或 308) 
必须 是 下 列 字 符 捉 值 之 一 
口 follow: 跟踪 重 定向 请 求 ， 以 最 终 非 重 定向 URL 的 响应 作为 最 终 响应 
口 error: 重 定向 请 求 会 抛 出 错误 
口 manual: 不 跟踪 重 定向 请 求 ， 而 是 返回 opaqueredirect 类 型 的 响应 ， 同 时 仍然 暴露 期 望 的 重 
定向 URL。 人 允许 以 手动 方式 跟踪 重 定向 
默认 为 follow 
referrer 用 于 指定 HTTP 的 Referer 头 部 的 内 容 
必须 是 下 列 字符 申 值 之 一 
口 no-referrer: 以 no-referrer 作为 值 
口 client/about:client: 以 当前 URL 或 no-referrer (取决 于 来 源 策略 referrerPolicy ) 作 
为 值 
口 <URL>: 以 伪造 URL 作为 值 。 伪 造 URL 的 源 必须 与 执行 脚本 的 源 匹配 
默认 为 client/about :client 
referrerPolicy 用 于 指定 HTTP 的 Referer 头 部 














必须 是 下 列 字符 虽 
no-referrer 


口 请 求 中 不 包含 











origin 
口 对 于 所 有 请 求 


same-origin 








值 之 一 


Referer 头 部 


no-referrer-when-downgrade 
口 对 于 从 安全 HTTPS 上 下 文 发 送 到 HTTP URL 的 请 求 ， 不 包含 Referer 头 部 
口 对 于 所 有 其 他 请 求 ， 将 Referer 设置 为 完整 URL 


， 将 Referer 设置 为 只 包含 源 








口 对 于 跨 源 请 求 
口 对 于 同 源 请 求 














， 不 包含 Referer 头 部 
， 将 Referer 设置 为 完整 URL 
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键 


值 





strict-origin 














origin-when-cross-origin 




















口 对 于 同 源 请 求 ， 将 Referer 设置 为 完整 U 
strict-origin-when-cross-origin 


口 对 于 从 安全 HTTPS 上 下 文 发 送 到 HTTP U 














口 对 于 同 源 请 求 ， 将 Referer 设置 为 完整 U 


unsafe-url 





口 对 于 从 安全 HTTPS 上 下 文 发 送 到 HTTP URL 的 请 求 ， 不 包含 Referer 头 部 
口 对 于 所 有 其 他 请 求 ， 将 Referer 设置 为 只 


包含 源 


口 对 于 跨 源 请 求 ， 将 Referer 设置 为 只 包含 源 


RL 


RL 的 请 求 ， 不 包含 Referer 头 部 


口 对 于 所 有 其 他 跨 源 请 求 ， 将 Referer 设置 为 只 包含 源 


RL 








口 对 于 所 有 请 求 ， 将 Referer 设置 为 完整 U 


默认 为 no-referrer-when-downgrade 


RL 





signal 





























用 于 支持 通过 Abortcontroller 中 断 进 行 中 
必须 是 AbortSignal 的 实例 
默认 为 未 关联 控制 器 的 Abortsignal 实例 


24.5.2 ”常见 Fetch 请 求 模式 


与 XMLHttpRequest 一 样 ，fetch () 既 可 以 发 送 数据 也 可 以 接收 数据 。 使 用 init 对 象 参数 ， 可 


以 配置 fetch () 在 请 求 体 中 发 送 各 种 序列 化 的 数据 。 
1. 发 送 JSON 数据 














可 以 像 下 面 这 样 发 送 简单 JSON 字符 串 : 
let payload = JSON.Sstringify({ 











foo : 
3 


'bar' 


let jsonHeaders = new Headers(t{ 


'Content-Type': 


'application/json' 


fetch('/send-me-json', { 


method: 





headers: 


有 


:POST ' ， // 发 送 请 求 体 时 必须 使 用 一 种 HH 


body: payload, 


jsonHeaders 


2. 在 请 求 体 中 发 送 参 数 
为 请 求 体 文 持 任意 字符 串 值 ， 所 以 可 以 通过 它 发 送 请 求 参 数 : 


let payload = 








'foo=bar&baz=qux'; 


let paramHeaders = new Headers({ 


'Content-Type': 


es 


的 fetch () 请 求 














TTP 方法 


'application/x-www-form-urlencoded; charset=UTF-8"' 
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fetch('/send-me-params', { 
method: 'POST'， // 发 送 请 求 体 时 必须 使 用 一 种 HTTP 方法 
body: payload, 
headers: paramHeaders 

}); 


3. 发 送 文 件 
为 请 求 体 支持 Formpata 实现 ， 所 以 fetch () 也 可 以 序列 化 并 发 送 文件 字段 中 的 文件 : 


let imageFormData = new FormData(); 
let imageInput = document .querySelector("input [type='file']"); 


imageFormData.append('image', imageInput.files[0]); 


fetch('/img-upload', { 
method: 'POST', 

body: imageFormData 

Ps 


这 个 fetch () 实现 可 以 支持 多 个 文件 : 
let imageFormData = new FormData(); 


let imageInput = document .querySelector("input[type='file'] [multiple]"); 


for (let i = 0; i < imageInput.files.length; ++i) { 
imageFormData.append('image', imageInput.files[i]); 
} 


fetch('/img-upload', { 
method: 'POST', 

body: imageFormData 

下 这 


4. 加 载 Blob 文件 
Fetch API 也 能 提供 Blob 类 型 的 响应 ， 而 Blob 又 可 以 兼容 多 种 浏览 器 API。 一 种 常见 的 做 法 是 明确 将 
图 片 文件 加 载 到 内 存 ， 然 后 将 其 添加 到 HTML 图 片 元 素 。 为 此 ， 可 以 使 用 响应 对 象 上 暴露 的 blopb ( ) 方 法 。 
这 个 方法 返回 一 个 期 约 , 解决 为 一 个 Blob 的 实例 。 然后 ,可 以 将 这 个 实例 传 给 URL. createobjectUrl () 
以 生成 可 以 添加 给 图 片 元 素 sre 属性 的 值 ; 24 


const imageElement = document .gquerySelector('img'); 












































fetch('my-image.png') 
.then( (response) => response.blob()) 
.then((blob) => { 
imageElement.src = URL.createObjectURL (blob); 
]) 3 


5. 发 送 跨 源 请 求 
从 不 同 的 源 请 求 资源 ， 响 应 要 包含 CORS 头 部 才能 保证 浏览 器 收 到 响应 。 没 有 这 些 头 部 ， 跨 源 请 求 
会 失败 并 抛 出 错误 。 


fetch('//cross-origin.com'); 
// TypeError: Failed to fetch 
// No 'Access-Control-Allow-Origin' header is present on the requested resource. 


如 果 代 码 不 需要 访问 响应 ,也 可 以 发 送 no-cors 请 求 。 此 时 响应 的 type 属性 值 为 opaque， 因 此 
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种 方式 适合 发 送 探测 请 求 或 者 将 响应 


{ method: 


无 法 读 取 响 应 内 容 。 这 


fetch(' 
.then( (response) 


//cross-origin.com', 'no-cors' 


// opaque 
6. 中 断 请 求 











应 缓存 起 来 供 以 后 使 用 。 
) ) 





=> console.log(response.type)); 


Fetch API 支持 通过 AbortCcontroller/Abortsignal 对 中 断 请 求 。 调 用 Abortcontroller. 























abort () 会 中 断 所 有 网 络 传输 , 特别 适合 希望 停止 传输 大 型 负载 的 情况 。 中断 进 行 中 的 fetch () 请 求 会 
导致 包含 错误 的 拒绝 。 

let abortController = new AbortController(); 

fetch('wikipedia.zip', { signal: abortController.signal }) 

.Catch(() => console.log('aborted!'); 

// 10 毫秒 后 中 断 请 求 

SetTimeout (() => abortController.abort(), 10); 

// 已 经 中 断 
24.5.3 Headers 对 象 

Headers 对 象 是 所 有 外 发 请 求 和 入 站 响应 头 部 的 容器 。 每 个 外 发 的 Request 实例 都 包含 一 个 空 的 


























Headers 实例 , 可 以 通过 Request .prototype.headers 访问 , 每 个 人 站 Response 实例 也 可 以 通过 














Response.prototype.headers 访问 包含 着 响应 头 部 的 Headers 对 象 。 这 两 个 属性 都 是 可 修改 属性 。 








另外 ,使 用 new Headers () 也 可 以 创建 一 个 新 实例 。 
1. Headers 与 Map 的 相似 之 处 





Headers 对 象 与 Map 对 象 极为 相似 。 这 是 合理 的 ， 因 为 HTTP es 





























它们 的 JavaScript 表示 则 是 中 间接 口 。Headers 与 Map 类 型 都 有 get () 、set () 、has () 








和 aqelete() 


等 实例 方法 ， 如 下 硬 





i 的 代码 所 示 : 








let h 
let m 


= new Headers(); 
= new Map(); 
// 设置 键 
h.set('foo', 
m.set('foo', 


' 有 a 
'Dar™ )w 


// 检查 键 
console. 
console. 
console. 
console. 


; // true 
; // true 
; // false 
; // false 


log(h.has 
log(m.has 
log(h.has 
log(m.has 


// 获取 值 
console.log(h.get('fo 
console.log(m.get('fo 


;A Bar 
bar 


// 更 新 值 
h.set('foo', 
m.set('foo', 


My) 
'baz') 
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// 取得 更 新 的 值 


console.log(h.get ('foo')); // baz 
console.log(m.get ('fo0')); // baz 
// 删除 值 


h.delete('foo'); 


m.delete('foo'); 


// 确定 值 已 经 删除 


console.log(h.get ('foo')); // undefined 
console.log(m.get ('foo')); // undefined 

Headers 和 Map 都 可 以 使 用 一 个 可 迭代 对 象 来 初始 化 ， 比 如 : 
let seed = [[ foo'， "bar']]:; 

let h new Headers (seed); 








let m new Map (seed); 

console.log(h.get('fo0')); // bar 

console.log(m.get ('fo0')); // bar 

而 且 ， 它们 也 都 有 相同 的 keys () 、values () 和 entries () 迭代 器 接口 : 
let seed = [['foo', 'bar'], ['baz', 'qux']]; 

let h = new Headers (seed); 

let m = new Map (seed); 

console.log(...h.keys()); // foo, baz 
console.log(...m.keys()); // foo, baz 
console.log(...h.values()); // bar, qux 
console.log(...m.values()); // bar, qux 
console.log(...h.entries()); // ['foo', 'bar'], ['baz', 'qux'] 
console.log(...m.entries()); // ['foo', 'bar'], ['baz', 'qux'] 


2. Headers 独 有 的 特性 
Headers 并 不 是 与 Map 处 处 都 一 样 
而 Map 则 不 可 以 : 


let seed = {foo: 'bar'}; 








上 


let h = new Headers (seed); 
console.log(h.get('fo0')); // bar 


let m = new Map (seed); 
// TypeError: object is not iterable 


一 个 HTTP 头 部 字段 可 以 有 多 个 值 ， 而 Headers 对 象 通过 append() 方 法 支持 添加 多 个 值 。 在 
Headers 实例 中 还 不 存在 的 头 部 上 调用 appena () 方 法 相当 于 调用 set () ,后续 调 用 会 以 逗号 为 分 隔 符 
拼接 多 个 值 : 


let h = new Headers () ; 











h.append('foo', 'bar'); 
console.log(h.get ('fo0')); // "bar" 


,在 初始 化 Headers 对 象 时 ， 也 可 以 使 用 键 / 值 对 形式 的 对 象 ， 24 





h.append('foo', 'baz'); 

console.log(h.get('foo0o')); // "bar, baz" 

3. 头 部 护卫 

某 些 情况 下 ， 并非 所 有 HTTP oh es 而 Headers 对 象 使 用 护卫 来 防止 不 被 多 
许 的 修改 。 不 同 的 护卫 设置 会 改变 set () 、append() 和 delete() 的 行为 。 违 反 护 卫 限 制 会 抛 出 
TypeErroro 

Headers 实例 会 因 来 源 不 同 而 展现 不 同 的 行为 ， 它 们 的 行为 由 护卫 来 控制 。JavaScript 可 以 决定 
Headers 实例 的 护卫 设置 。 下 表 列 出 了 不 同 的 护卫 设置 和 每 种 设置 对 应 的 行为 。 















































































































































护 ” 卫 适用 情形 限 制 

none 在 通过 构造 函数 创建 Headers 实例 时 激活 无 

request 在 通过 构造 函数 初始 化 Reauest 对 象 , 且 mode 不 允许 修改 禁止 修改 的 头 部 ( 4 MDN 文档 中 
值 为 非 no-cors 时 激活 的 forbidden header name 词 条 

request-no-cors 在 通过 构造 函数 初始 化 Request 对 象 , 且 mode “不 允许 修改 非 简单 头 部 ( MDN 文档 中 的 
值 为 no-cors 时 激活 simple header 词 条 ) 

SS 在 通过 构造 函数 初始 化 Response 对 象 时 激活 ”不 允许 修改 禁止 修改 的 响应 头 部 〈 参 见 MDN 文 

档 中 的 forbidden response header name 词 条 ) 
immutable 在 通过 error () 或 redirect () 静 态 方 法 初始 ”不 允许 修改 任何 头 部 





化 Response 对 象 时 激活 


24.5.4 ”Request 对 象 


顾名思义 ，Request 对 象 是 获取 资源 请 求 的 接口 。 这 个 接口 暴露 了 请 求 的 相关 信息 ， 也 暴露 了 使 
用 请 求 体 的 不 同方 式 。 











注意 与 请 求 体 相关 的 属性 和 方法 将 在 本 章 24.5.6 节 介 绍 。 





1. 创建 Request 对 象 
可 以 通过 构造 函数 初始 化 Request 对 象 。 为 此 需要 传人 一 个 input 参数 ， 一 般 是 URL: 


let r = new Redquest ('https://foo.com'); 
console.log(r);} 
// Request {...} 


Request 构造 函数 也 接收 第 二 个 参数 一 一 一 个 init 对 象 。 这 个 init 对 象 与 前 面 介 绍 的 fetch () 
的 init 对 象 一 样 。 没 有 在 init 对 象 中 涉及 的 值 则 会 使 用 默认 值 : 
// 用 所 有 默认 值 创建 Request 对 象 


console.log(new Request('')); 


// Request { 

Wh bodyUsed: false 

// cache: "default" 

// credentials: "same-origin" 
// destination: 

// headers: Headers {} 
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// integrity: "" 

A keepalive: false 

/ method: "GET" 

yA mode: "cors" 

yA redirect: "follow" 

yA referrer: "about:client" 

// referrerPolicy: "" 

// signal: AbortSignal {aborted: false, onabort: null} 
// Url: "<current URES” 


// 用 指定 的 初始 值 创建 Request 对 象 
console.log(new Request ('https://foo.com', 
{ method: 'POST' })); 


// Request { 

pi bodyUsed: false 

4 cache: "default" 

// credentials: "same-origin" 
// destination: "" 

/这 headers: Headers {} 

Vy integrity: "" 

// keepalive: false 

这 method: "POST" 

人 mode: "cors" 

EA redirect: "follow" 

// referrer: "about:client" 
// referrerPolicy: "" 

// signal: AbortSignal {aborted: false, onabort: null} 
A url: "https://foo.com/" 


2. 克隆 Request 对 象 

Fetch API 提供 了 两 种 不 太一 样 的 方式 用 于 创建 Request 对 象 的 副本 :使 用 Request 构造 函数 和 使 
用 clone () 方 法 。 

将 Request 实例 作为 input 参数 传 给 Request 构造 函数 ， 会 得 到 该 请 求 的 一 个 副本 : 


let rl = new Request('https://foo.com'); 

let r2 = new Request (r1); 24 
console.log(r2.ur1l); // https://foo.com/ 

如 果 再 传人 init 对 象 ， 则 init 对 象 的 值 会 覆盖 源 对 象 中 同名 的 值 : 


let rl = new Request('https://foo.com'); 
let r2 = new Reduest (1， {method: 'POST'}); 




















console.log(rl.method); // GET 
console.log(r2.method); // POST 


这 种 克隆 方式 并 不 总 能 得 到 一 模 一 样 的 副本 。 最 明显 的 是 ,第 一 个 请 求 的 请 求 体会 被 标记 为 “已 使 用 ”: 


let rl = new Request('https://foo.com', 
{ method: 'POST', body: 'foobar' });} 
let r2 = new Request (r1); 





console.log(rl.bodyUsed); // true 
console.log(r2.bodyUsed); // false 
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如 果 源 对 象 与 创建 的 新 对 象 不 同 源 ， 则 referrer 属性 会 被 清除 。 此 外 ， 如 果 源 对 象 的 mode 为 
navigate， 则 会 被 转换 为 same-origin。 
第 二 种 克隆 Request 对 象 的 方式 是 使 用 clone ( ) 方法， 这 个 方法 会 创建 一 模 一 样 的 副本 ， 任 何 值 
都 不 会 被 覆盖 。 与 第 一 种 方式 不 同 ， 这 种 方法 不 会 将 任何 请 求 的 请 求 体 标记 为 “已 使 用 ”: 











Lb 








let rl = new Request('https://foo.com', { method: 'POST', body: 'foobar' }); 
let r2 = rl.clone(); 

console.log(rl.url); // https://foo.com/ 

console.log(r2.url); // https://foo.com/ 


console.log(rl.bodyUsed); // false 
console.log(r2.bodyUsed); // false 


如 果 请 求 对 象 的 bodyUsed 属性 为 true ( 即 请 求 体 已 被 读 取 ), 那么 上 述 任何 一 种 方式 都 不 能 用 来 
创建 这 个 对 象 的 副本 。 在 请 求 体 被 读 取 之 后 再 克隆 会 导致 抛 出 TypeError。 


let r = new Request ('https://foo.com’'); 
r.clone(); 

new Request (r); 

// 没有 错误 









































r.text(); // 设置 bodyUsed 为 true 
r.clone(); 
// TypeError: Failed to execute 'clone' on 'Request': Request body is already used 


new Request (r); 
// TypeError: Failed to construct 'Request': Cannot construct a Request with a 
Request object that has already been used. 


3. 在 fetch() 中 使 用 Request 对 象 

fetch() 和 Request 构造 函数 拥有 相同 的 函数 签名 并 不 是 巧合 。 在 调用 fetch () 时 ， 可 以 传人 已 
经 创建 好 的 Request 实例 而 不 是 URL。 与 Request 构造 函数 一 样 传 给 fetch () 的 init 对 象 会 履 
盖 传 人 请 求 对 象 的 值 : 


let r = new Request('https://foo.com’'); 





























// 向 foo.conm 发 送 GET 请 求 
fetch(r); 


// 向 foo.com 发 送 POST 请 求 
fetch(r, { method: 'POST' }); 


fetch () 会 在 内 部 克隆 传人 的 Request 对 象 。 与 克隆 Request 一 样 ，fetch () 也 不 能 拿 请 求 体 已 
经 用 过 的 Request 对 象 来 发 送 请 求 : 


let r = new Request('https://foo.com', 
{ method: 'POST', body: 'foobar' });} 














r.text(); 





fetch(r); 
// TypeError: Cannot construct a Reduest with a Request object that has already 
been used. 
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关键 在 于 , 通过 fetch 使 用 Request 会 将 请 求 体 标记 为 已 使 用 。 也 就 是 说 ， 有 请 求 体 的 Request 
只 能 在 一 次 fetch 中 使 用 。( 不 包含 请 求 体 的 请 求 不 受 此 限制 。) 演示 如 下 : 


let r = new Request('https://foo.com', 
{ method: 'POST', body: 'foobar' });} 





fetch(r); 


fetch(r); 
// TypeError: Cannot construct a Request with a Request object that has already 
been used. 


要 想 基 于 包含 请 求 体 的 相同 Request 对 象 多 次 调用 fetch () , 必须 在 第 一 次 发 送 fetch () 请 求 前 
调用 clone(): 
let r = new Request('https://foo.com', 


{ method: 'POST', body: 'foobar' });} 


// 3 个 都 会 成 功 
fetch(r.clone()); 
fetch(r.clone()); 
fetch(r); 


24.5.5 Response 对 象 


顾名思义 ，Response 对 象 是 获取 资源 响应 的 接口 。 这 个 接口 暴露 了 响应 的 相关 信息 ， 也 暴露 了 使 
用 响应 体 的 不 同方 式 。 





注意 与 响应 体 相关 的 属性 和 方法 将 在 本 章 24.5.6 节 介绍 。 





1. 创建 Response 对 象 
可 以 通过 构造 函数 初始 化 Response 对 象 且 不 需要 参数 。 此 时 响应 实例 的 属性 均 为 默认 值 , 因为 它 
并 不 代表 实际 的 HTTP 响应 : 


let r = new Response(); 
console.1log(r); 124 
// Response { 

// bedys, (Cs 3) 

// bodyUsed: false 

A headers: Headers {} 
A ok: true 

PA redirected: false 
4 Status: 200 

A statusText: "OK" 

Wt type: "default" 

A LO eh 得 











Response 构造 函数 接收 一 个 可 选 的 body 参数 。 这 个 body 可 以 是 null， 等 同 于 fetcn () 参 数 
init 中 的 body。 还 可 以 接收 一 个 可 选 的 init 对 象 ， 这 个 对 象 可 以 包含 下 表 所 列 的 键 和 值 。 
























































736 ”第 24 章 网 络 请 求 与 远程 资源 
键 值 
headers 必须 是 Headers 对 象 实例 或 包含 字符 串 键 / 值 对 的 常规 对 象 实例 
默认 为 没有 键 / 值 对 的 Headers 对 象 
status 表示 HTTP 响应 状态 码 的 整数 
默认 为 200 
statusText 表示 HTTP 响应 状态 的 字符 串 
默认 为 空 字符 串 
可 以 像 下 面 这 样 使 用 body 和 init 来 构建 Response 对 象 : 
let r = new Response('foobar', { 
Status: 418; 
statusText: 'I\'m a teapot' 


}) 
console.log(r);} 


// Response { 


// bodys ‘(se) 

fk bodyUsed: false 

这 headers: Headers {} 

/这 ok: false 

// redirected: false 

// status: 418 

// statusText: "I'm a teapot" 
// type: "default" 

// 让 各 

和 的 





大 多 数 情况 下 ， 产生 Response 对 象 的 主要 方式 是 调用 fetch() ， 它 返 
Response 对 象 的 期 约 ， 这 个 Response 对 象 代表 实际 的 HTTP 响应 。 下 也 
Response 对 象 : 














fetch('https:/ /foo.com') 
.then( (response) => { 
console.log(response); 
直人 


// Response { 


// bod eC) 

和 bodyUsed: false 

// headers: Headers {} 

// ok: true 

// redirected: false 

// status: 200 

// statusText: "OK" 

// type: "basic" 

// url: "https://foo.com/" 
/A 











Response 类 还 有 两 个 





的 代码 


回 一 个 最 后 会 解决 为 
展示 了 这 样 得 到 的 








于 生成 Response 对 象 的 静态 方法 : Response.redirect () 和 Response. 


error ()。 前 者 接收 一 个 URL 和 一 个 重 定向 状态 码 (301、302、303、307 或 308 ), 返回 重 定向 的 Response 


对 象 : 
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console.log(Response.redirect('https://foo.com', 301)); 
// Response { 

/i bboy c(s0) 

A bodyUsed: false 

yA headers: Headers {} 
V4 ok: false 

// redirected: false 
// status: 301 

// statusText: "" 

// type: "default" 

VA UEL 











提供 的 状态 码 必须 对 应 重 定向 ， 否 则 会 抛 出 错误 


Response.redirect ('https://foo.com', 200); 
// RangeError: Failed to execute 'redirect' on 'Response': Invalid status code 


另 一 个 静态 方法 Response .error () 用 于 产生 表示 网 络 错误 的 Response 对 象 ( 网 络 错误 会 导致 
fetch() 期 约 被 拒绝 )。 


console.log (Response.error()); 
// Response { 

// bodys, ‘Cass) 

VA bodyUsed: false 

// headers: Headers {} 
A ok: false 

A redirected: false 
We status: 0 

4 statusText: "" 

// type: "error" 

// QE 





2. 读 取 响应 状态 信 言 息 
Response 对 象 包含 一 组 只 读 属 性 ， 描 述 了 请 求 完成 后 的 状态 ， 如 下 表 所 示 。 

















局 在 和 
headers 响应 包含 的 Headers 对 象 
ok 布尔 值 ， 表 示 HTTP De 含义 。200~299 的 状态 码 返 回 true， 其 他 状态 码 返 回 false 24 
redirected ”布尔 值 ， 表 示 响 应 是 否 至 少 经 过 一 次 重 定向 
status 整数 ， a HTTP 状态 码 





statusText ”字符 串 ， 包含 对 HTTP 状态 码 的 正式 描述 。 这 个 值 派生 自 可 选 的 HTTP Reason-Phrase 字段 ， 因 此 如 果 服 
务 器 以 Reason-Phrase 为 由 拒绝 响应 ， 这 个 字段 可 能 是 空 字符 串 


EyPS 字符 串 ， 包 含 响 应 类 型 。 可 能 是 下 列 字符 串 值 之 一 
basic: 表示 标准 的 同 源 响 应 
cors: 表示 标准 的 跨 源 响应 
error: 表示 响应 对 象 是 通过 Response .error () 创 建 的 
opaque: 表示 no-cors 的 fetch() 返 回 的 跨 源 响应 
opaqueredirect: 表示 对 redirect 设置 为 manual 的 请 求 的 响应 
A 含 响应 URL 的 字符 串 。 对 于 重 定向 响应 ， 这 是 最 终 的 URL， 非 重 定向 响应 就 是 它 产生 的 










































































呈 DOODO DO DO 
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以 下 代码 演示 了 返回 200、302、404 和 500 状态 码 的 URL 对 应 的 响应 : 


fetch('//foo.com') .thenl(console.1og); 
// Response { 

/¥ Dody sd 22) 

// bodyUsed: false 

// headers: Headers {} 

// ok: true 

// redirected: false 

// status: 200 

// statusText: "OK" 

VB type: "basic" 

A UrL "tts E00Comy" 
/ls 





fetch('//foo.com/redirect-me') .then(console.1og); 
// Response { 

ZX Sa (sx.) 

// bodyUsed: false 

// headers: Headers {} 

yh ok: true 

vA redirected: true 

// status: 200 

[A statusText: "OK" 

// type: "basic" 

// url: "https://foo.com/redirected-url/" 


fetch('//foo.com/does-not-exist') .thenl(console.l1og); 
// Response { 

和 el 人) 

£2 bodyUsed: false 

/这 headers: Headers {} 

// ok: false 

// redirected: true 

// status: 404 

// statusText: "Not Found" 

// type: "basic" 

// url: "https://foo.com/does-not-exist/" 


fetch('//foo.com/throws-error') .then(console.1og); 
// Response { 

// BOdye/ (a sy) 

// bodyUsed: false 

// headers: Headers {} 

// ok: false 

// redirected: true 

// status: 500 

Wak statusText: "Internal Server Error" 
5 type: "basic" 

// url: "https://foo.com/throws-error/" 


3. 克隆 Response 对 象 
克隆 Response 对 象 的 主要 方式 是 使 用 clone () 方 法 ， 这 个 方法 会 创建 一 个 一 模 一 样 的 副本 ， 不 
会 覆盖 任何 值 。 这 样 不 会 将 任何 请 求 的 请 求 体 标记 为 已 使 用 : 
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let rl = new Response('foobar'); 
let r2 = ril.clone(); 


console.log(rl.bodyUsed); // false 
console.log(r2.bodyUsed); // false 


如 果 响 应 对 象 的 bodyUsed 属性 为 true ( 即 响 应 体 已 被 读 取 )， 则 不 能 再 创建 这 个 对 象 的 副本 。 在 
响应 体 被 读 取 之 后 再 克隆 会 导致 搜 出 TypeError。 


let r = new Response('foobar'); 
On) 
// 没有 错误 








Ir.text(); // 设置 bodyUsed 为 true 
r.clone(); 


// TypeError: Failed to execute 'clone' on 'Response': Response body is 
already used 


有 响应 体 的 Response 对 象 只 能 读 取 一 次 。( 不 包含 响应 体 的 Response 对 象 不 受 此 限制 。) 比如 : 


let r = new Response('foobar'); 
r.text().then(console.log); // foobar 


r.text().then(console.1o0g); 
// TypeError: Failed to execute 'text' on 'Response': body stream is locked 


要 多 次 读 取 包 含 响应 体 的 同一 个 Response 对 象 ， 必 须 在 第 一 次 读 取 前 调用 clone () : 


let r = new Response('foopbar' ) :; 














xz.ClLone().text() .then(console.1og); // foobar 
xz.ClLone().text() .then(console.1og); // foobar 
r.text().thenl(console.1og); // foobar 


此 外 , 通过 创建 带 有 原始 响应 体 的 Response 实例 ,可 以 执行 伪 克 隆 操作 。 关 键 是 这 样 不 会 把 委 
个 Response 实例 标记 为 已 读 ， 而 是 会 在 两 个 响应 之 间 共 享 : 


let rl = new Response('foobar'); 
let r2 = new Responsel(rl.body); 


直 
| 




















console.log(rl.bodyUsed); // false 
console.log(r2.bodyUsed); // false 


上 2 .ext () .then(console.l1og); // foobar 


rl.text().then(console.1o0g); 
// TypeError: Failed to execute 'text' on 'Response': body stream is locked 


24.5.6 Request、Response 及 Body 混入 








Request 和 Response 都 使 用 了 Fetch API 的 Body 混和 人 ， 以 实现 两 者 承担 有 效 载荷 的 能 力 。 这 个 
混入 为 两 个 类 型 提供 了 只 读 的 body 属性 (实现 为 Readablestream )、 只 读 的 bodyUsed 布尔 值 ( 表 
示 body 流 是 否 已 读 ) 和 一 组 方法 ， 用 于 从 流 中 读 取 内 容 并 将 结果 转换 为 某 种 JavaScript 对 象 类 型 。 

通常 ,将 Request 和 Response 主体 作为 流 来 使 用 主要 有 两 个 原因 。 一 个 原因 是 有 效 载 荷 的 大 小 
可 能 会 导致 网 络 延 退 ， 另 一 个 原因 是 流 API 本 身 在 处 理 有 效 载 荷 方面 是 有 优势 的 。 除 此 之 外 ,最 好 是 一 
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次 性 获取 资源 主体 。 

Body 混入 提供 了 5 个 方法 ， 用 于 将 Readablestream 转 存 到 绥 冲 区 的 内 存 里 , 将 缓冲 区 转换 为 某 
种 JavaScript 对 象 类 型 ， 以 及 通过 期 约 来 产生 结果 。 在 解决 之 前 ， 期 约会 等 待 主体 流 报告 完成 及 缓冲 被 
解析 。 这 意味 着 客户 端 必须 等 待 响应 的 资源 完全 加 载 才 能 访问 其 内 容 。 

1. Body .text () 

Body .text () 方 法 返回 期 约 ， 解 决 为 将 缓冲 区 转 存 得 到 的 UTF-8 格式 字符 串 。 下 面 的 代码 展示 了 
在 Response 对 象 上 使 用 Body .text () : 


fetch('https://foo.com') 
.then((response) => response.text()) 
.then(console.1og) ; 






























































// <!doctype html><html lang="en"> 


// <head> 
// <meta charset="utf-8"> 
// 


以 下 代码 展示 了 在 Request 对 象 上 使 用 Body .text () : 
let request = new Request('https://foo.com', 


{ method: 'POST', body: 'barbazqux' }); 


request .text () 
.then(console.1og); 


// barbazqux 


2. Body .json() 


Body .json() 方 法 返回 期 约 ， 解决 为 将 缓冲 区 转 存 得 到 的 JSON。 下 面 的 代码 展示 了 在 Response 
对 象 上 使 用 Body .json(): 


fetch('https://foo.com/foo.json') 
.then( (response) => response.json()) 
.then(console.1og) ; 














A A foo Das"y 


以 下 代码 展示 了 在 Request 对 象 上 使 用 Body .json(): 
let request = new Request('https://foo.com', 


{ method:'POST', body: JSON.stringify({ bar: 'baz' }) }); 


request .json() 
.then(console.1og); 


// {bar: 'baz'} 
3. Body .formData() 
浏览 器 可 以 将 Formpata 对 象 序列 化 / 反 序 列 化 为 主体 。 例 如 ， 下 面 这 个 Formpata 实例 : 


Jet myFormData = new FormData() 
myFormData.append('foo', 'bar'); 


在 通过 HTTP 传送 时 ，WebKit 浏览 器 会 将 其 序列 化 为 下 列 内 容 : 


-----~ WebKitFormBoundarydR902kOzE6nbN7eR 
Content-Disposition: form-data; name="foo" 
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过 本 WebKitFormBoundarydR9Q02kOzE6nbN7eR-- 
Body . formData() 方 法 返回 期 约 ， 解决 为 将 缓冲 区 转 存 得 到 的 FormData 实例 。 下 面 的 代码 展示 
了 在 Response 对 象 上 使 用 Body .formData(): 


fetch('https://foo.com/form-data') 
.then( (response) => response.formData()) 
.then( (formData) => console.log(formData.get('foo')); 





// bar 
以 下 代码 展示 了 在 Request 对 象 上 使 用 Body .formData(): 


let myFormData = new FormData(); 
myFormData.append('foo', 'bar'); 


let request = new Request('https://foo.com', 
{ method:'POST', body: myFormData }); 


request .formData() 
.then( (formData) => console.log(formData.get('foo')); 


// bar 

4. Body .arrayBuffer() 

有 时 候 ， 可 能 需要 以 原始 二 进 制 格式 查看 和 修改 主体 。 为 此 ， 可 以 使 用 Body .arrayBuffer() 将 
主体 内 容 转换 为 ArrayBuffet 实例 。Body .arrayBuffer () 方 法 返回 期 约 , 解决 为 将 缓冲 区 转 存 得 到 
的 ArrayBuffer 实例 。 下 面 的 代码 展示 了 在 Response 对 象 上 使 用 Body .arrayBuffer(): 


fetch('https://foo.com') 
.then( (response) => response.arrayBuffer()) 
.then(console.1o0g); 
































// ArrayBuffer(...) {} 


以 下 代码 展示 了 在 Request 对 象 上 使 用 Body .arrayBuffer (): 


let request = new Request('https://foo.com', 
{ method:'POST', body: 'abcdefg' }); 





// 以 整数 形式 打印 二 进 制 编码 的 字符 囊 
request .arrayBuffer() 
.then( (buf) => console.log(new Int8Array (buf))); 


A ThEBArraw ty [S99 S08. Se LT00. .TO0l T0203 

5. Body .blob() 

有 了 时候 ， 可 能 需要 以 原始 二 进 制 格式 使 用 主体 ， 不 用 查看 和 修改 。 为 此 ， 可 以 使 用 Body .blop () 
将 主体 内 容 转换 为 Blob 5 Body.blob () 方 法 返回 期 约 ， 解 决 为 将 缓冲 区 转 存 得 到 的 Blob 实例 。 
下 面 的 代码 展示 了 在 Response 对 象 上 使 用 Body .blob(): 


fetch('https://foo.com') 
.then((response) => response.blob()) 
.then(console.1og) ; 
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以 下 代码 展示 了 在 Request 对 象 上 使 用 Body .blob(): 


let request = new Request('https://foo.com', 
{ method:'POST', body: 'abcdefg' 


request .blob() 
.then(console.1og) ; 


// Blob(7) {size: 7, type: "text/plain;charset=utf-8"} 


6. 一 次 性 流 
因为 Body 混入 是 构建 在 ReadableStream 之 上 的 ， 所 以 主体 流 只 


})s 





二 


用 一 次 。 这 意味 着 所 有 主 


侣 已 
BE 








体温 入 方法 都 只 能 调用 一 次 ,再 次 调用 就 会 抛 出 错误 。 


fetch('https://foo.com') 


.then( (response) => response.blob() .then(() => response.blob())); 


// TypeError: Failed to execute 'blob' on 'Response': body 
let request = new Request('https://foo.com', 
{ method: 'POST', body: 'foobar' 


request.blob() .then(() => request.blob()); 


stream is locked 


}); 


// TypeError: Failed to execute 'blob' on 'Request': body stream is locked 


























即使 是 在 读 取 流 的 过 程 中 ， 所 有 这 些 方法 也 会 在 它们 被 调用 时 给 Readablestream 加 锁 ， 以 阻止 





其 他 读 取 器 访问 : 
fetch('https://foo.com') 
.then( (response) => { 





response.blob(); // 第 一 次 调用 给 流 加 锁 
response.blob(); // 第 二 次 调用 再 次 加 锁 会 失败 
}); 


// TypeError: Failed to execute 'blob' on 'Response': body 
let request = new Request('https://foo.com', 
{ method: 'POST', body: 'foobar' 


request.blob(); // 第 一 次 调用 给 流 加 锁 
request.blob(); // 第 二 次 调用 再 次 加 锁 会 失败 


stream is locked 


}) 3 


// TypeError: Failed to execute 'blob' on 'Request': body stream is locked 


作为 Body 混入 的 一 部 分 ，bodyUsed 布尔 值 属 性 表示 ReadapblesStream 是 否 已 摄 受 ( disturbed )， 























意思 是 读 取 需 是否 已 经 在 流 上 加 了 锁 。 这 不 一 定 表示 流 已 经 被 完全 读 取 。 


let request = new Request('https://foo.com', 
{ method: 'POST', body: 'foobar' 
let response = new Response('foobar'); 


console.log(request .bodyUsed); // false 
console.log(response.bodyUsed); // false 
request.text() .then(console.log); // foobar 


response.text() .thenl(console.l1log); // foobar 


console.log(request .bodyUsed) ， // true 
console.log(response.bodyUsed); // true 








下 面 的 代码 演示 了 这 个 属性 : 


上 
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7. 使 用 Readablestream 主体 

JavaScript 编程 逻辑 很 多 时 候 会 将 访问 网 络 作为 原子 操作 ， 比 如 请 求 是 同时 创建 和 发 送 的 ， 响 应 数 
据 也 是 以 统一 的 格式 一 次 性 暴露 出 来 的 。 这 种 约定 隐藏 了 底层 的 混乱 ， 让 涉及 网 络 的 代码 变 得 很 清晰 。 

从 TCP/IP 角度 来 看 ， 传 输 的 数据 是 以 分 块 形式 抵达 端点 的 ， 而 且 速 度 受到 网 速 的 限制 。 接 收 端点 
会 为 此 分 配 内 存 ， 并 将 收 到 的 块 写 入 内 存 。Fetch API 通 过 ReadablesStream 支持 在 这 些 块 到 达 时 就 实 
时 读 取 和 操作 这 些 数 据 。 


















































注意 ”本 节 会 以 获取 Fetch API 规范 的 HTML 为 例 。 这 个 页 面 差不多 有 1MB 大 小 ， 足 以 


让 示例 中 接收 的 数据 分 成 多 个 块 。 





正如 Stream API 所 定义 的 ,Readablestream 暴 露 了 getReaaqer () 方 法 ,用 于 产生 ReadableStream- 
DefaultReadqer， 这 个 读 取 需 可 以 用 于 在 数据 到 达 时 异步 获取 数据 块 。 数 据 流 的 格式 是 Uint 8Array。 
下 面 的 代码 调用 了 读 取 器 的 read () 方 法 ， 把 最 早 可 用 的 块 打 印 了 出 来 : 


fetch('https://fetch.spec.whatwg.org/') 
.then( (response) => response.body) 
.then((body) => { 
let reader = body.getReader(); 

















console.log(reader); // ReadableStreamDefaultReader {} 


reader .read() 
.then(console.1og) ; 
3 


// { value: Uint8Array{}, done: false } 
在 随 着 数据 流 的 到 来 取得 整个 有 效 载荷 ， 可 以 像 下 面 这 样 递归 调用 read() 方 法 : 


fetch('https://fetch.spec.whatwg.org/') 
.then ( (response) => response.body) 
.then((body) => { 
let reader = body.getReader(); 





function processNextChunk({value, done}) { 
if (done) { 
return; 


} 





console.log(value); 


return reader.read() 
.then(processNextChunk); 
} 


return reader.read() 
.then(processNextChunk); 
}); 


// { value: Uint8Array{}, done: false } 
// { value: Uint8Array{}, done: false } 
// { value: Uint8Array{}, done: false } 
YY Ra 
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异步 函数 非常 适合 这 样 的 fetch () 操作 。 可 以 通过 使 用 async/await 将 上 面 的 递归 调用 打 平 : 


fetch('https://fetch.spec.whatwg.org/') 
.then( (response) => response.body) 
.then(async function(body) { 
let reader = body.getReader(); 





while(true) { 
let { value, done } = await reader.read(); 


if (done) { 
break; 
} 


console.log(value); 
} 
a 


// { value: Uint8Array{}, done: false } 
// { value: Uint8Array{}, done: false } 
// { value: Uint8Array{}, done: false } 





另外 ，read() 方 法 也 可 以 真 接 封装 到 Iteraple 接口 中 。 因 此 就 可 以 在 for-await-of 循环 中 方 
便 地 实现 这 种 转换 : 


fetch('https://fetch.spec.whatwg.org/') 
.then( (response) => response.body) 
.then(async function(body) { 
let reader = body.getReader(); 











let asyncIterable = { 


[Symbol .asyncIterator]() { 
return { 
next() { 
return reader.read(); 
} 
}; 


for await (chunk of asyncIterable) { 
console.log(chunk); 
} 
> 


// { value: Uint8Array{}, done: false } 
// { value: Uint8Array{}, done: false } 
// { value: Uint8Array{}, done: false } 


























通过 将 异步 池 午 包装 绪 到 一 个 生成 器 函数 中 ,还 可 以 进一步 简化 代码 。 而 且 ， 这 个 实现 通过 支持 只 读 
取 部 分 流 也 变 得 更 稳健 。 如 果 流 因为 耗 尽 或 错误 而 终止 ， 读 取 器 会 释放 锁 ， 以 允许 不 同 的 流 读 取 器 继续 
操作 : 


async function* streamGenerator(stream) { 
const reader = stream.getReader(); 
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try { 
while (true) { 
const { value, done } = await reader.re 
if (done) { 
break; 


} 


yield value; 
} 
} finally { 
reader.releaseLock (); 
} 
} 


fetch('https://fetch.spec.whatwg.org/') 
.then( (response) => response.body) 
.then(async function(body) { 
for await (chunk of streamGenerator (body) 
console.log (chunk);} 
} 
有 


在 这 些 例子 中 ， 当 读 取 完 Uint 8Array 抉 之 后 , 浏览 器 会 将 其 标记 为 可 以 被 垃圾 














ad(); 


) { 


回收 。 对 于 需要 在 








不 连续 的 内 存 中 连续 检查 大 量 数据 的 情况 ， 这 样 可 以 节省 很 多 内 存 空间 。 
缓冲 区 的 大 小 ， 以 及 浏览 








实现 。 浏 览 锅 会 探 人 
送 到 流 。 


是 否 等 待 缓冲 区 被 填充 后 才 将 其 推 到 流 中 ， 要 根据 JavaScript 运行 时 的 
出 等 待 分 配 的 缓冲 区 被 填 满 ， 同 时 会 尽快 将 缓冲 区 数据 ( 有 时 候 可 能 未 填充 数据 ) 发 





不 同 浏览 器 中 分 块 大 小 可 能 不 同 ， 这 取决 于 带宽 和 网 络 延迟 。 此 外 ， 浏 览 器 如 果 决 定 不 等 待 网 络 ， 


也 可 以 将 部 分 填充 的 缓冲 
口 不 同 大 小 的 Uint8Array 块 ; 

口 部 分 填充 的 Uint8Array 块 ; 

口 块 到 达 的 时 间 间 隔 不 确定 。 

默认 情况 下 , 块 是 以 Uint8Array 格式 抵达 的 。 











区 发 送 到 流 。 最 终 ， 我 们 的 代码 要 准备 好 处 理 以 下 情况 : 





因为 块 的 分 割 不 会 考虑 编码 , 所 以 会 出 现 某 些 值 作 

















这些 情况 是 很 麻烦 的 ， 但 很 多 时 候 可 以 使 用 





为 多 字 节 字符 被 分 散 到 两 个 连续 块 中 的 情况 。 手 动 处 更 
Encoding API 的 可 搬 拔 方案 。 
要 将 Uint8Array 转换 为 可 读 文 本 ， 可 以 将 缓冲 











let decoder = new TextDecoder(); 
async function* streamGenerator(stream) { 
const reader stream.getReader ();，; 


ty 
while (true) { 
const { value, done } 


if (done) { 
break; 


} 


区 传 给 TextDecoder， 返 


置 stream: true， 可 以 将 之 前 的 缓冲 区 保留 在 内 存 ， 从 而 让 跨越 两 个 块 的 内 











回转 换 后 的 值 。 通 过 设 
够 被 正确 解码 : 














Db 


合 乳 


= await reader.read(); 
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Yield value; 
} 
finally 
reader.releaseLock (); 
} 
3 


fetch('https://fetch.spec.whatwg.org/') 
.then( (response) => response.body) 
.then(async function(body) { 
for await (chunk of streamGenerator(body)) { 
console.log(decoder.decode(chunk, { stream: true })); 
} 
ss 


// <!doctype html><html lang="en"> 
// whether a <a data-link-type="dfn" href="#concept-header" 
// result to <var>rangeValue</var>. 


// 
因为 可 以 使 用 ReadableStream 创建 Response 对 象 ， 所 以 就 可 以 在 读 取 流 之 后 ， 将 其 通过 管道 
导入 另 一 个 流 。 然 后 在 这 个 新 流 上 再 使 用 Body 的 方法 ， 如 text () 。 这 样 就 可 以 随 着 流 的 到 达 实时 检 
查 和 操作 流 内 容 。 下 面 的 代码 展示 了 这 种 双流 技术 : 
fetch('https://fetch.spec.whatwg.org/') 
.then( (response) => response.body) 
.then((body) => { 
const reader = body.getReader(); 





























// 创建 第 二 个 流 
return new ReadableStream({ 
async start (controller) { 
try { 
while (true) { 
const { value, done } = await reader.read(); 





if (done) { 
break; 


} 


// 将 主体 流 的 块 推 到 第 二 个 流 
controller.enqueue (value); 
} 

} finally { 
controller.close(); 
reader.releaseLock (); 

} 

} 
}) 
} 
.then((secondaryStream) => new Response(secondaryStream)) 
.then(response => response.text()) 
.then(console.1o0g); 


// <!doctype html><html lang="en"><head><meta charset="utf-8"> 
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24.6 Beacon API 


为 了 把 尽量 多 的 页 面 信息 传 到 服务 器 , 很 多 分 析 工 具 需 要 在 页 面 生命 周期 中 尽量 晚 的 时 候 向 服务 器 
发 送 遥 测 或 分 析 数 据 。 因 此 ,理想 的 情况 下 是 通过 浏览 絮 的 unload 事件 发 送 网 络 请 求 。 这 个 事件 表示 
用 户 要 离开 当前 页 面 ， 不 会 再 生成 别 的 有 用 信息 了 。 

在 unload 事件 触发 时 , 分 析 工 具 要 停止 收集 信息 并 把 收集 到 的 数据 发 给 服务 器 。 这 时 候 有 一 个 问题 ， 
因为 unloag 事件 对 浏览 器 意味 着 没有 理由 再 发 送 任何 结果 未 知 的 网 络 请 求 〈 因为 页 面 都 要 被 销毁 了 )。 
例如 ,在 unloaa 事件 处 理 程序 中 创建 的 任何 异步 请 求 都 会 被 浏览 器 取消 。 为 此 ,异步 XMLHttpRequest 
或 fetch () 不 适合 这 个 任务 。 分 析 工 具 可 以 使 用 同步 xMLHttpRequest 强制 发 送 请 求 ， 但 这 样 做 会 导 
致 用 户 体验 问题 。 浏 览 器 会 因为 要 等 待 un1oag 事件 处 理 程序 完成 而 延迟 导航 到 下 一 个 页 面 。 

为 解决 这 个 问题 ，W3C 引入 了 补充 性 的 Beacon API。 这 个 API 给 navigator 对 象 增 加 了 一 个 
sendBeacon () 方 法 。 这 个 简单 的 方法 接收 一 个 URL 和 一 个 数据 有 效 载荷 参数 ， 并 会 发 送 一 个 POST 
请 求 。 可 选 的 数据 有 效 载荷 参数 有 ArrayBufferVview、Blob、DOMString、FormData 实例 。 如 果 请 
求 成 功 进 入 了 最 终 要 发 送 的 任务 队列 ， 则 这 个 方法 返回 true， 和 否则 返回 false。 

可 以 像 下 面 这 样 使 用 这 个 方法 : 

// 发 送 POST 请 求 


// URL: 'https://example.com/analytics-reporting-url' 
// 请 求 负载 : ' {foo: "bar"}' 




















































































































navigator.sendBeacon('https://example.com/analytics-reporting-url', '{foo: "bar"}'); 
这 个 方法 虽然 看 起 来 只 不 过 是 POST 请 求 的 一 个 语法 糖 ， 但 它 有 几 个 重要 的 特性 。 
口 senqBeacon () 并 不 是 只 能 在 页 面 生命 周期 末尾 使 用 ， 而 是 任何 时 候 都 可 以 使 用 。 
口 调用 sendBeacon() 后 ,浏览 器 会 把 请 求 添加 到 一 个 内 部 的 请 求 队列 。 浏 览 器 会 主动 地 发 送 队 
列 中 的 请 求 。 
口 浏览 器 保证 在 原始 页 面 已 经 关闭 的 情况 下 也 会 发 送 请 求 。 
口 状态 码 、 超 时 和 其 他 网 络 原因 造成 的 失败 完全 是 不 透明 的 ， 不 能 通过 编程 方式 处 理 。 
口 信 标 (beacon ) 请 求 会 携带 调用 senqBeacon () 时 所 有 相关 的 cookie。 
让 To 


24.7 Web Socket i 
频 讲解 


Web Socket ( 套 接 字 ) 的 目标 是 通过 一 个 长 时 连接 实现 与 服务 器 全 双 工 、 双 向 的 通信 。 在 JavaScript 
中 创建 Web Socket 时 ,一 个 HTTP 请 求 会 发 送 到 服务 器 以 初始 化 连接 。 服 务 器 响应 后 ， 连 接 使 用 HTTP 
的 Upgrade 头 部 从 HTTP 协议 切换 到 Web Socket 协议 。 这 意味 着 Web Socket 不 能 通过 标准 HTTP 服务 
器 实现 ， 而 必须 使 用 支持 该 协议 的 专 有 服务 器 。 

为 Web Socket 使 用 了 自 定义 协议 ， 所 以 URL 方案 ( scheme ) 稍 有 变化 : 不 能 再 使 用 http:/ 或 https://， 
而 要 使 用 ws:// 和 wss://。 前 者 是 不 安全 的 连接 ， 后 者 是 安全 连接 。 在 指定 Web Socket URL 时 ， 必 须 包 
含 URL 方案 ， 因 为 将 来 有 可 能 再 支持 其 他 方案 。 

使 用 自 定 义 协 议 而 非 HTTP 协议 的 好 处 是 ， 客 户 端 与 服务 器 之 间 可 以 发 送 非常 少 的 数据 ， 不 会 对 
HTTP 造成 任何 负担 。 使 用 更 小 的 数据 包 让 Web Socket 非常 适合 带宽 和 延迟 问题 比较 明显 的 移动 应 用 。 
使 用 自 定 义 协 议 的 缺点 是 ， 定 义 协 议 的 时 间 比 定义 JavaScript API 要 长 。Web Socket 得 到 了 所 有 主流 浏 
览 器 支持 。 
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24.7.1 API 





要 创建 一 个 新 的 Web Socket， 就 要 实例 化 一 个 Websocket 对 象 并 传人 提供 连接 的 URL: 


Jet socket = new WebSocket ("ws://www.example.com/server.php"); 


注意 ， 必 须 给 websocket 构造 函数 传人 一 个 绝对 URL。 同 源 策略 不 适 月 
打开 到 任意 站 点 的 连接 。 至 于 是 否 与 来 自 特定 源 的 页 面 通信 ， 则 完全 取决 于 
以 确定 请 求 来 自 哪里 。) 
































用 于 Web Socket， 因 此 可 以 
服务 器 。( 在 握手 阶段 就 可 





浏览 器 会 在 初始 化 Websocket 对 象 之 后 立即 创建 连接 。 与 XHR 类 似 ，websocket 也 有 一 个 


readyState 属性 表示 当前 状态 。 不 过 ， 这 个 值 与 XHR 中 相应 的 值 不 一 样 。 
口 WebSocket .OPENING(0): 连接 正在 建立 。 

口 WebSocket .OPEN (1 ): 连接 已 经 建立 。 

DQ webSocket .CLOSING (2 ): 连接 正在 关闭 。 

口 websocket .CLOSE (3 ): 连接 已 经 关闭 。 
































WebSocket 对 象 没 有 readystatechange 事件 ， 而 是 有 与 上 述 不 同 状态 对 应 的 其 他 事件 。 


readyState 值 从 0 开始 。 
任何 时 候 都 可 以 调用 close () 方 法 关闭 Web Socket 连接 : 


socket .close(); 
































调用 close() 之 后 ，readyState 立即 变 为 2 (连接 正在 关闭 )， 并 会 在 关闭 后 变 为 3 ( 连接 已 经 关闭 )。 





24.7.2 发送 和 接收 数据 


打开 Web Socket 之后， 可 以 通过 连接 发 送 和 接收 数据 。 要 向 服务 器 发 送 数据 ,使 用 sena ( ) 方 法 并 





传人 一 个 字符 串 、ArrayBuffer 或 Blob， 如 下 所 示 : 


Jet socket = new WebSocket ("ws://www.example.com/server.php"); 


let stringData = "Hello world!"; 
let arrayBufferData = Uint8Array.from(['f', 'o', '0']); 
let blobData = new Blob(['f', 'o', '0']); 


socket .send(stringData); 
Socket .send(arrayBufferData.buffer); 
socket .send (blobData); 


服务 器 向 客户 端 发 送 消息 时 ，websocket 对 象 上 会 触发 message 事件 
他 消息 协议 类 似 ， 可 以 通过 event .aata 属性 访问 到 有 效 载荷 : 
socket .onmessage = function(event) { 
let data = event.data; 
// 对 数据 执行 某 些 操作 
于 


由 


























。 这 个 message 事件 与 其 























与 通过 send () 方 法 发 送 的 数据 类 似 ，event .data 返回 的 数据 也 可 能 是 ArrayBuffer 或 Blob。 
这 由 WebSocket 对 象 的 binaryType 属性 决定 ， 该 属性 可 能 是 "blob "或 "arraybuffer"。 




















24.7.3 ”其 他 事件 
Websocket 对 象 在 连接 生命 周期 中 有 可 能 触发 3 个 其 他 事件 。 
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口 open: 在 连接 成 功 建立 时 触发 。 

口 error: 在 发 生 错 误 时 触发 。 连 接 无 法 存续 。 

口 close: 在 连接 关闭 时 触发 。 

WebSocket 对 象 不 支持 DOM Level 2 事件 监听 器 ， 因 此 需要 使 用 DOM Level 0 风格 的 事件 处 理 程 
序 来 监听 这 些 事件 : 


let Socket = new WebSocket ("ws://www.example.com/server.php"); 
Socket .onopen = function() { 
alert ("Connection established."); 














地 
Socket .onerror = function() { 
alert ("Connection error."); 





es 
Socket .onclose = function() { 
alert ("Connection closed."); 











讨 工 











这 些 事件 中 ， 只 有 close 事件 的 event 对 象 上 有 额外 信息 。 这 个 对 象 上 有 3 个 额外 属性 : 
wasClean、code 和 reason。 其 中 , wasclean 是 一 个 布尔 值 ， 表示 连接 是 否 干净 地 关闭 ; code 是 一 
个 来 自 服务 器 的 数值 状态 码 ; reason 是 一 个 字符 串 ， 包 含 服 务 器 发 来 的 消息 。 可 以 将 这 些 信息 显示 给 
用 户 或 记录 到 日 志 : 

Socket .onclose = function(event) { 


console.1log( as clean? S${event.wasClean} Code=${event.code} Reason=${ 
event .reason}. ); 









































}; 
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探讨 Ajax 安全 的 文章 已 经 有 了 很 多 ,事实 上 也 出 版 了 很 多 专门 讨论 这 个 话题 的 书 。 大 规模 Ajax 应 
用 程序 需要 考虑 的 安全 问题 非常 多 ， 但 在 通用 层面 上 一 般 需 要 考虑 以 下 几 个 问题 。 
首先 ， 任 何 Ajax 可 以 访问 的 URL， 也 可 以 通过 浏览 器 或 服务 器 访问 ， 例 如 下 面 这 个 URL: 
/getuserinfo.php?id=23 
请 求 这 个 URL， 可 以 假定 返回 ID 为 23 的 用 户 信 息 。 访 问 者 可 以 将 23 改 为 24 或 56， 其 至 其 他 任 
何 值 。getuserinfo.php 文件 必须 知道 访问 者 是 否 拥有 访问 相应 数据 的 权限 。 和 否则， 服务 器 就 会 大 门 敞开 ， 
泄露 所 有 用 户 的 信息 。 
在 未 授权 系统 可 以 访问 某 个 资源 时 ， 可 以 将 其 视 为 跨 站 点 请 求 伪 造 (CSRF，cross-site request forgery ) 
攻击 。 未 授权 系统 会 按照 处 理 请 求 的 服务 器 的 要 求 伪 装 自己 。Ajax 应 用 程序 , 无 论 大 小 , 都 会 受到 CSRF 
攻击 的 影响 ， 包 括 无 害 的 漏洞 验证 攻击 和 恶意 的 数据 盗窃 或 数据 破坏 攻击 。 
关于 安全 防护 Ajax 相关 URL 的 一 般 理 论 认为 ， 需要 验证 请 求 发 送 者 拥有 对 资源 的 访问 权限 。 可 以 
通过 如 下 方式 实现 。 
口 要 求 通过 SSL 访问 能 够 被 Ajax 访问 的 资源 。 
口 要 求 每 个 请 求 都 发 送 一 个 按 约定 算法 计算 好 的 令 牌 (token )。 
注意 ， 以 下 手段 对 防护 CSRF 攻击 是 无 效 的 。 
口 要 求 POST 而 非 GET 请 求 〈 很 容易 修改 请 求 方法 )。 
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口 使 用 来 源 URL 验证 来 源 (来 源 URL 很 容易 伪造 )。 
口 基于 cookie 验证 ( 同样 很 容易 伪造 )。 


24.9 小 结 




















Ajax 是 无 须 刷新 当前 页 面 即 可 从 服务 器 获取 数据 的 一 个 方法 ， 具 有 如 下 特点 。 
口 让 Ajax 迅速 流行 的 中 心 对 象 是 xMLHttpRequest (XHR )。 
口 这 个 对 象 最 早 由 微软 发 明 , 并 在 下 5 中 作为 通过 JavaScript 从 服务 器 获取 XML 数据 的 一 种 手段 。 
口 之 后 ，Firefox 、Safari 、Chrome 和 Opera 都 复 刻 了 相同 的 实现 。W3C 随后 将 XHR 行为 写 人 Web 
标准 。 
口 虽然 不 同 浏览 器 的 实现 有 些 差异 ,但 XHR 对 象 的 基本 使 用 在 所 有 浏览 器 中 相对 是 规范 的 ， 因 此 
可 以 放心 地 在 Web 应 用 程序 中 使 用 。 

XHR 的 一 个 主要 限制 是 同 源 策略 ， 即 通信 和 只 能 在 相同 域名 、 相 同 端口 和 相同 协议 的 前 提 下 完成 。 
访问 超出 这 些 限 制 之 外 的 资源 会 导致 安全 错误 ， 除 非 使 用 了 正式 的 跨 域 方案 。 这 个 方案 叫 作 跨 源 资源 共 
享 (CORS，Cross-Origin Resource Sharing )，XHR 对 象 原生 支持 CORS。 图片 探测 和 JSONP 是 另外 两 种 
跨 域 通信 技术 ， 但 没有 CORS 可 靠 。 

Fetch API 是 作为 对 XHR 对 象 的 一 种 端 到 端的 替代 方案 而 提出 的 。 这 个 API 提 供 了 优秀 的 基于 期 约 
的 结构 、 更 直观 的 接口 ， 以 及 对 Stream API 的 最 好 支持 。 

Web Socket 是 与 服务 器 的 全 双 工 、 双 向 通信 渠道 。 与 其 他 方案 不 同 ，Web Socket 不 使 用 HITP， 而 
使 用 了 自 定 义 协 议 ， 目 的 是 更 快 地 发 送 小 数据 块 。 这 需要 专用 的 服务 器 ， 但 速度 优势 明显 。 









































































































































第 DD 间 
客户 端 存储 


本 章 内 容 

DQ cookie 

口 浏览 器 存储 API 
口 mdexedDB 

















随 着 Web 应 用 程序 的 出 现 ， 直 接 在 客户 端 存 储 用 户 信 息 的 需求 也 随 之 出 现 。 这 背后 的 想法 是 合理 
的 : 与 特定 用 户 相 关 的 信息 应 该 保存 在 用 户 的 机 器 上 。 无 论 是 登录 信息 、 个 人 偏好 ， 还 是 其 他 数据 ， 
Web 应 用 程序 提供 者 都 需要 有 办 法 把 它们 保存 在 客户 端 。 对 该 问题 的 第 一 个 解决 方案 就 是 cookie, cookie 
| 古老 的 网 景 公司 发 明 ， 由 一 份 名 为 Persistent Client State: HTTP Cookies 的 规范 定义 。 今 天 ，cookie 只 
是 在 客户 端 存储 数据 的 一 个 选项 。 


25.1 cookie 


HTTP cookie 通常 也 叫 作 cookie ， 最 初 用 于 在 客户 端 存储 会 话 信息 。 这 个 规范 要 求 服务 器 在 响应 
HTTP 请 求 时 ,通过 发 送 set -cookie HTTP 头 部 包含 会 话 信息 。 例 如 ,下 面 是 包含 这 个 头 部 的 一 个 HTTP 
响应 : 


HTTP/1.1 200 OK 

Content-type: text/html 
Set-Cookie: name=value 
Other-header: other-header-value 


这 个 HTTP 响应 会 设置 一 个 名 为 "name" ， 值 为 "value" 的 cookie。 名 和 值 在 发 送 时 都 会 经 过 URL 
编码 。 浏览 如 会 存储 这 些 会 话 信息 ,并 在 之 后 的 每 个 请 求 中 都 会 通过 HTTP 头 部 cookie 再 将 它们 发 回 服 
务 右 ， 比 如 : 


GET /index.jsl HTTP/1.1 
Cookie: name=value 
Other-header: other-header-value 

































































































































































这 些 发 送 回 服务 器 的 额外 信息 可 用 于 唯一 标识 发 送 请 求 的 客户 端 。 
25.1.1 限制 

cookie 是 与 特定 域 绑 定 的 。 设 置 cookie 后 ， 它 会 与 请 求 一 起 发 送 到 创建 它 的 域 。 这 个 限制 能 保证 
cookie 中 存储 的 信息 只 对 被 认可 的 接收 者 开放 ， 不 被 其 他 域 访 问 。 


因为 cookie 存储 在 客户 端 机 器 上 , 所 以 为 保证 它 不 会 被 恶意 利用 , 浏览 器 会 施加 限制 。 同 时 , cookie 
也 不 会 占用 太 多 磁盘 空间 。 
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通常 ， 只 要 遵守 以 下 大 致 的 限制 ， 就 不 会 在 任何 浏览 器 中 碰 到 问题 : 

口 不 超过 300 个 cookie; 

口 每 个 cookie 不 超过 4096 字 节 ，; 

口 每 个 域 不 超过 20 个 cookie; 

口 每 个 域 不 超过 81 920 字 节 。 

每 个 域 能 设置 的 cookie 总 数 也 是 受 限 的 ， 但 不 同 浏 览 器 的 限制 不 同 。 例 如 ; 
口 最 新 版 下 和 Edge 限制 每 个 域 不 超过 50 个 cookie; 
口 最 新 版 Firefox 限制 每 个 域 不 超过 150 个 cookie; 

口 最 新 版 Opera 限制 每 个 域 不 超过 180 个 cookie; 

口 Safari 和 Chrome 对 每 个 域 的 cookie 数 没有 硬性 限于 
如 果 cookie 总 数 超过 了 单个 域 的 上 限 , 浏览 器 就 会 删除 之 前 设置 的 cookie。IE 和 Opera 会 按照 最 近 
使 用 (LRU, Least Recently Used ) 原则 删除 之 前 的 cookie, 以 便 为 新 设置 的 cookie 腾 出 空间 。Firefox 
会 随机 删除 之 前 的 cookie， 因 此 为 避免 不 确定 的 结果 ， 最 好 不 要 超出 限制 。 

浏览 器 也 会 限制 cookie 的 大 小 。 大 多 数 浏览 器 对 cookie 的 限制 是 不 超过 4096 字 节 ， 上 下 可 以 有 一 
节 的 误差 。 为 跨 浏览 器 兼容 ， 最 好 保证 cookie 的 大 小 不 超过 4095 字 节 。 这 个 大 小 限制 适用 于 一 个 
所 有 cookie， 而 不 是 单个 cookie。 

如 果 创 建 的 cookie 超过 最 大 限制 ， 则 该 cookie 会 被 静默 删除 。 注意, 一 个 字符 通常 会 占 1 字 节 。 如 
有 多 字 节 字符 ( 如 UTF-8 Unicode 字符 )， 则 每 个 字符 最 多 可 能 占 4 字 节 。 
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25.1.2 “cookie 的 构成 





cookie 在 浏览 器 中 是 由 以 下 参数 构成 的 。 

口 名 称 : 唯一 标识 cookie 的 名 称 。cookie 名 不 区 分 大 小 写 ， 因 此 mycookie 和 Mycookie 是 同一 
个 名 称 。 不 过 ， 实 践 中 最 好 将 cookie 名 当成 区 分 大 小 写 来 对 待 ， 因 为 一 些 服 务 器 软件 可 能 这 样 
对 待 它们 。cookie 名 必须 经 过 URL 编码 。 

口 值 : 存储 在 cookie 里 的 字符 串 值 。 这 个 值 必须 经 过 URL 编码 。 

口 域 : cookie 有 效 的 域 。 发送 到 这 个 域 的 所 有 请 求 都 会 包含 对 应 的 cookie。 这 个 值 可 能 包含 子 域 (如 
www.wrox.com )， 也 可 以 不 包含 ( 如 .wrox.com 表示 对 wrox.com 的 所 有 子 域 都 有 效 )。 如 果 不 明 
确 设置 ， 则 默认 为 设置 cookie 的 域 。 

口 路 径 : 请 求 URL 中 包含 这 个 路 径 才 会 把 cookie 发 送 到 服务 器 。 例 如 ， 可 以 指定 cookie 只 能 由 
http://www.wrox.com/books/ 访 问 ,因此 访问 http://www.wrox.com/ 下 的 页 面 就 不 会 发 送 cookie, 即 
使 请 求 的 是 同一 个 域 。 

口 过 期 时 间 : 表示 何 时 删除 cookie 的 时 间 戳 ( 即 什么 时 间 之 后 就 不 发 送 到 服务 器 了 ), 默认 情况 下 ， 
浏览 器 会 话 结 束 后 会 删除 所 有 cookie。 不 过 ,也 可 以 设置 删除 cookie 的 时 间 。 这 个 值 是 GMT 格 
式 (Wdy, DD-Mon-YYYY HH:MM:SS GMT )， 用 于 指定 删除 cookie 的 具体 时 间 。 这 样 即使 关闭 
浏览 器 cookie 也 会 保留 在 用 户 机 器 上 。 把 过 期 时 间 设 置 为 过 去 的 时 间 会 立即 删除 cookie。 

口 安全 标志 : 设置 之 后 ， 只 在 使 用 SSL 安全 连接 的 情况 下 才 会 把 cookie 发 送 到 服务 器 。 例 如 ， 请 
求 https://www.wrox.com 会 发 送 cookie， 而 请 求 http://www.wrox.com 则 不 会 。 

这 些 参 数 在 set -cookie 头 部 中 使 用 分 号 加 空格 隔 开 ， 比 如 : 
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HITTPYT a1 WO0. OK 

Content-type: text/html 

Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com 
Other-header: other-header-value 


这 个 头 部 设置 一 个 名 为 "name" 的 cookie， 这 个 cookie 在 2007 年 1 月 22 日 7:10:24 过 期 ,对 
www.wrox.com 及 其 他 wrox.com 的 子 域 ( 如 p2p.wrox.com ) 有 效 。 
安全 标志 secure 是 cookie 中 唯一 的 非 名 / 值 对 ， 只 需 一 个 secure 就 可 以 了 。 比 如 : 


HTTP/1.1 200 OK 

Content-type: text/html 

Set-Cookie: name=value; domain=.wrox.com; path=/; secure 
Other-header: other-header-value 


这 里 创建 的 cookie 对 所 有 wrox.com 的 子 域 及 该 域 中 的 所 有 页 面 有 效 (通过 path=/ 指 定 )。 不过， 
这 个 cookie 只 能 在 SSL 连接 上 发 送 ， 因 为 设置 了 secure 标志 。 
要 知道 , 域 、 路 径 、 过 期 时 间 和 secure 标志 用 于 告诉 浏览 器 什么 情况 下 应 该 在 请 求 中 包含 cookie。 
这 些 参数 并 不 会 随 请 求 发 送 给 服务 器 ， 实 际 发 送 的 只 有 cookie 的 名 / 值 对 。 






























































25.1.3 JavaScript 中 的 cookie 


在 JavaScript 中 处 理 cookie 比较 麻烦 ， 因 为 接口 过 于 简单 , 只 有 BOM 的 aocument .cookie 属性。 
根据 用 法 不 同 ,该 属性 的 表现 过 异 。 要 使 用 该 属性 获取 值 时 ，document .cookie 返回 包含 页 面 中 所 有 
有 效 cookie 的 字符 串 ( 根据 域 、 路 径 、 过 期 时 间 和 安全 设置 )， 以 分 号 分 隔 ， 如 下 面 的 例子 所 示 : 

namel=valuel;name2=value2;name3=value3 

所 有 名 和 值 都 是 URL 编码 的 ， 因 此 必须 使 用 decodeURIComponent () 0 〇 解码 。 

在 设置 值 时 , 可 以 通过 document .cookie 属性 设置 新 的 cookie 字符 串 。 这 个 字符 串 在 被 解析 后 会 
添加 到 原 有 cookie 中 。 设 置 socument .cookie 不 会 覆盖 之 前 存在 的 任何 cookie， 除 非 设置 了 已 有 的 
cookie。 设 置 cookie 的 格式 如 下 ,与 Set-Cookie 头 部 的 格式 一 样 : 

name=value; expires=expiration time; path=domain path; domain=domain name; secure 

在 所 有 这 些 参数 中 ， 只 有 cookie 的 名 称 和 值 是 必需 的 。 下 面 是 个 简单 的 例子 : 


document .cookie = "name=Nicholas"; 


这 行 代码 会 创建 一 个 名 为 "name" 的 会 话 cookie, 其 值 为 "Nicholas"。 这 个 cookie 在 每 次 客户 端 向 
服务 器 发 送 请 求 时 都 会 被 带 上 , 在 浏览 器 关闭 时 就 会 被 有 删除。 虽然 这 样 直 接 设 置 也 可 以 ， 因 为 不 需要 在 
名 称 或 值 中 编码 任何 字符 ， 但 最 好 还 是 使 用 encodeURIComponent () 对 名 称 和 值 进行 编码 ， 比 如 : 


document .cookie = encodeURIComponent ("name") + "=" + 
encodeURIComponent ("Nicholas"); 


要 为 创建 的 cookie 指定 额外 的 信息 ， 只 要 像 set -cookie 头 部 一 样 直接 在 后 面 追 加 相同 格式 的 字 
符 串 即 可 : 


document .cookie = encodeURIComponent ("name") + "=" + 
encodeURIComponent ("Nicholas") + "; domain=.wrox.com; path=/"; 


因为 在 JavaScript 中 读 写 cookie 不 是 很 直观 ， 所 以 可 以 通过 辅助 函数 来 简化 相应 的 操作 。 与 cookie 
相关 的 基本 操作 有 读 、 写 和 删除 。 这 些 在 cookieUtil 对 象 中 表示 如 下 : 
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class CookieUtil { 
static get (name) { 
let cookieName = `${encodeURIComponent (name)}=, 
cookieStart = document .cookie.indexOf (cookieName), 
cookieValue = null; 


if (cookieStart > -1)f{ 
let cookieEnd = document .cookie.indexOf(";", cookieStart); 
if (cookieEnd == -1){ 
cookieEnd = document .cookie.length; 
} 
cookieValue = decodeURIComponent (document .cookie.substring (cookieStart 
+ CookieName.length, cookieEnd)); 





} 


return cookieValue; 


} 


static set (name, value, expires, path, domain, secure) { 
let cookieText = 
‘Ss{encodeURIComponent (name) }=$ {encodeURIComponent (value)}. 


if (expires instanceof Date) { 
CookieText += `; expires=${expires.toGMTString()}.，} 


} 


if (path) { 
cookieTex 


9 
下 
ll 


‘; path=$ {path} ; 
} 


if (domain) { 
cookieText += `; domain=$ {domain}.，; 





} 


if (secure) { 
cookieText += "; secure"; 


} 








document .cookie = cookieText,; 


} 


static unset (name, path, domain, secure) { 
CookieUtil.set (name, "", new Date(0), path, domain, secure); 

pe 

CookieUtil.get() 方 法 用 于 取得 给 定名 称 的 cookie 值 。 为 此 , 需要 在 document .cookie 返回 的 
字符 串 中 查找 是 否 存 在 名 称 后 面 加 上 等 号 。 如 果 找 到 了 ， 则 使 用 inaexof () 再 查找 该 位 置 后 面 的 分 号 
(表示 该 cookie 的 末尾 )。 如 果 没 有 找到 分 号 , 说 明 这 个 cookie 在 字符 串 末 尾 , 因此 字符 串 剩余 部 分 都 是 
cookie 的 值 。 取 得 cookie 值 后 使 用 decodeURIComponent () 解码 ， 然 后 返回 。 如 果 没 有 找到 cookie， 
则 返回 null。 

CookieUtil.set() 方 法 用 于 设置 页 面 上 的 cookie， 接 收 多 个 参数 : cookie 名 称 、cookie 值 、 可 
选 的 Date 对 象 (表示 何 时 删除 cookie )、 可 选 的 URL 路 径 、 可 选 的 域 以 及 可 选 的 布尔 值 ( 表示 是 否 添 
加 secure 标志 )。 这 些 参 数 以 它们 的 使 用 频率 为 序 ， 只 有 前 两 个 是 必需 的 。 在 方法 内 部 ， 使 用 了 
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encodeURIComponent () 对 名 称 和 值 进行 编码 , 然后 再 依次 检查 其 他 参数 。 如 果 expires 参数 是 Date 
对 象 ， 则 使 用 Date 对 象 的 toGMTString () 方 法 添加 一 个 expires 选项 来 获得 正确 的 日 期 格式 。 剩 下 
的 代码 就 是 简单 地 追加 cookie 字符 串 ， 最 终 设 置 给 document .cookie。 

没有 直接 删除 已 有 cookie 的 方法 ,为 此 ,需要 再 次 设置 同名 cookie( 包括 相同 路 径 、 域 和 安全 选项 )， 
但 要 将 其 过 期 时 间 设 置 为 某 个 过 去 的 时 间 。cookieUutil.unset () 方 法 实现 了 这 些 处 理 。 这 个 方法 接收 
4 个 参数 : 要 删除 cookie 的 名 称 、 可 选 的 路 径 、 可 选 的 域 和 可 选 的 安全 标志 。 

这 些 参数 会 传 给 cookieUtil.set(), 将 cookie 值 设置 为 空 字符 串 , 将 过 期 时 间 设 置 为 1970 锋 
1 月 1 日 (以 0 毫秒 初始 化 的 Date 对 象 的 值 )。 这 样 可 以 保证 删除 cookie。 

可 以 像 下 面 这 样 使 用 这 些 方法 : 


// 设置 cookie 
CookieUtil.set ("name", "Nicholas"); 
CookieUtil.set ("book", "Professional JavaScript"); 
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// 读 取 cookie 
alert (CookieUtil.get ("name")); // "Nicholas" 
alert (CookieUtil.get ("book")); // "Professional JavaScript" 





// 删除 cookie 
CookieUtil.unset ("name"); 
CookieUtil.unset ("book"); 





// 设置 有 路 径 、 域 和 过 期 时 间 的 cookie 
CookieUtil.set ("name", "Nicholas", "/books/projs/", "www.wrox.com", 
new Date("January 1, 2010")); 


// 删除 刚刚 设置 的 cookie 
CookieUtil.unset ("name", "/books/projs/", "WWww.wrox.com"); 


// 设置 安全 cookie 
CookieUtil.set ("name", "Nicholas", null, null, null, true); 


这 些 方法 通过 处 理解 析 和 cookie 字符 串 构建 ， 简 化 了 使 用 cookie 存储 数据 的 操作 。 



































25.1.4 子 cookie 


为 绕 过 浏览 器 对 每 个 域 cookie 数 的 限制 ， 有 些 开发 者 提出 了 子 cookie 的 概念 。 子 cookie 是 在 单个 
cookie 存储 的 小 块 数据 , 本 质 上 是 使 用 cookie 的 值 在 单个 cookie 中 存储 多 个 名 / 值 对 。 最 常用 的 子 cookie 
模式 如 下 : 

name=namel=valuel&name2=value2&name3=value3&name4=value4&name5=value5 

子 cookie 的 格式 类 似 于 查询 字符 串 。 这 些 值 可 以 存储 为 单个 cookie， 而 不 用 单独 存储 为 自己 的 名 / 
值 对 。 结 果 就 是 网 站 或 Web 应 用 程序 能 够 在 单 域 cookie 数 限 制 下 存储 更 多 的 结构 化 数据 。 

要 操作 子 cookie， 就 需要 再 添加 一 些 辅助 方法 。 解 析 和 序列 化 子 cookie 的 方式 不 一 样 ， 且 因为 对 子 
cookie 的 使 用 而 变 得 更 复杂 。 比 如 ， 要 取得 某 个 子 cookie， 就 需要 先 取 得 cookie， 然 后 在 解码 值 之 前 需 
要 先 像 下 面 这 样 找到 子 cookie: 


class SubCookieUtil { 
static get (name, subName) { 
let subCookies = SubCookieUtil.getAll (name); 
return subCookies ? subCookies[subName] : null; 


















































static getAll (name) { 
let cookieName = encodeURIComponent (name) + "=", 
cookieStart = document .cookie.indexOf (cookieName), 
cookieValue = null, 
cookieEngd, 


subCookies, 
parts, 
result = {}; 


if (cookieStart > -1) { 
cookieEnd = document .cookie.indexOf(";", cookieStart); 
if (cookieEnd == -1) { 
cookieEnd = document .cookie.length; 
} 
cookieValue = document.cookie.substring(cookieStart + 
cookieName.length, cookieEnd); 





if (cookieValue.length > 0) { 
subCookies = cookieValue.split("&"); 


for (let i = 0, len = subCookies.length; i < len; i++) { 
parts = subCookies[i].split("="); 
result [decodeURIComponent (parts[0])] = 
decodeURIComponent (parts[1]); 
} 


return result; 
} 
} 
return null; 


} 

// 省 略 其 他 代码 

取得 子 cookie 有 两 个 方法 : get () 和 getall()。get () 用 于 取得 一 个 子 cookie 的 值 ，getall () 
用 于 取得 所 有 子 cookie , 并 以 对 象形 式 返回 , 对 象 的 属性 是 子 cookie 的 名 称 , 值 是 子 cookie 的 值 , get () 
方法 接收 两 个 参数 : cookie 的 名 称 和 子 cookie 的 名 称 。 这 个 方法 先 调用 getall () 取得 所 有 子 cookie， 
然后 返回 要 取得 的 子 cookie( 如 果 不 存在 则 返回 null )。 

SubCookieUtil.getAll() 方 法 在 解析 cookie 值 方面 与 cookieUtil.get () 方 法 非常 相似 。 不 同 
的 是 subcookieUtil.getaAll() 方 法 不 会 立即 解码 cookie 的 值 ， 而 是 先 用 和 号 (& ) 拆 分 ， 将 所 有 子 
cookie 保存 到 数组 。 然 后 , 再 基于 等 号 ( = ) 拆 分 每 个 子 cookie, 使 parts 数组 的 第 一 个 元 素 是 子 cookie 
的 名 称 , 第 二 个 元 素 是 子 cookie 的 值 。 两 个 元 素 都 使 用 decodeURIComponent () 解 码 ,并 添加 到 result 
对 象 ， 最 后 返回 result 对 象 。 如 果 cookie 不 存在 则 返回 nu11。 

可 以 像 下 面 这 样 使 用 这 些 方法 : 


// 假设 document .cookie=data=name=Nicholas&book=Professional%20JavaScript 






























































// 取得 所 有 子 cookie 
let data = SubCookieUtil.getAll("data"); 

alert (data.name); // "Nicholas" 

alert (data.book); // "Professional JavaScript" 
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// 取得 个 别 子 cookie 
alert (SubCookieUtil.get ("data", "name")); // "Nicholas" 
alert (SubCookieUtil.get ("data", "book")); // "Professional JavaScript" 


要 写 入 子 cookie， 可 以 使 用 另外 两 个 方法 : set () 和 setAl1()。 这 两 个 方法 的 实现 如 下 : 


class SubCookieUtil { 
// 省 略 之 前 的 代码 


static set (name, subName, value, expires, path, domain, secure) { 
let subcookies = SubCookieUtil.getAll (name) || {}; 
subcookies[subName] = value; 
SubCookieUtil.setAll (name, subcookies, expires, path, domain, secure); 


} 


static setAll (name, subcookies, expires, path, domain, secure) { 

let cookieText = encodeURIComponent (name) + "=", 
subcookieParts = new Array(), 
subName; 

for (SubName in subcookies){ 

if (subName.length > 0 && subcookies .hasOwnProperty (SubName) ) { 
SubcookieParts.push ( 
"SS{encodqeURIComponent (subName) }=$ {encodeURIComponent (subcookies [subName])} ') 


} 


if (cookieParts.length > 0) { 
CookieText += subcookieParts.join("g&"); 


if (expires instanceof Date) { 
CookieText += `; expires=$ {expires.toGMTString()}，; 


cookieText += `; path=${path}.; 


CookieText += `; domain=$ {domain}.; 











CookieText += "; secure"; 
小 
} else { 
CookieText += `; expires=${ (new Date(0)) .toGMTString()}.，; 





} 
document .cookie = cookieText; 


} 
, // 省 略 其 他 代码 
set () 方 法 接收 7 个 参数 : cookie 的 名 称 、 子 cookie 的 名 称 、 子 cookie 的 值 、 可 选 的 Date 对 象 用 
于 设置 cookie 的 过 期 时 间 、 可 选 的 cookie 路 径 、 可 选 的 cookie 域 和 可 选 的 布尔 值 secure 标志 。 所 有 
可 选 的 参数 都 作用 于 cookie 本 身 ， 而 不 是 子 cookie。 为 了 在 同一 个 cookie 中 存储 多 个 子 cookie， 路 径 、 
域 和 secure 标志 也 必须 相同 。 过 期 时 间作 用 于 整个 cookie， 可 以 在 写 入 个 别 子 cookie 时 另行 设置 。 在 
这 个 方法 内 部 , 第 一 步 是 取得 给 定 cookie 名 称 下 包含 的 所 有 子 cookie。 逮 辑 或 操作 符 ( | | ) 在 这 里 用 于 
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在 getAll() 返 回 null 的 情况 下 将 subcookies 设置 为 新 对 象 。 然 后 ， 在 supcookies 上 设置 完 子 











cookie 的 值 ， 再 将 参数 传 给 setAll ()。 











setAll () 方 法 接收 6 个 参数 : cookie 的 名 称 、 包 含 所 有 子 cookie 的 对 象 ， 然 后 是 set () 方 法 中 使 
用 的 4 个 可 选 参数 。 这 个 方法 会 在 for-in 循环 中 迭代 第 二 个 参数 的 属性 。 为 保证 只 存储 合适 的 数据 ， 
这 里 使 用 了 hasownProperty () 方 法 确保 只 有 实例 属性 才 会 序列 化 为 子 cookie。 因 为 存在 属性 名 等 于 
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空 字 符 串 的 可 能 , 所 以 在 添加 到 subcookieParts 数组 之 前 也 要 检查 属性 名 的 长 度 。subcookieParts 
数组 包含 了 子 cookie 的 名 / 值 对 , 这 样 我 们 可 以 方便 地 使 用 join () 方 法 用 和 号 将 它们 拼接 成 字符 串 。 晋 

















下 的 逻辑 与 cookieUtil.set () 一 样 。 
可 以 像 下 面 这 样 使 用 这 些 方法 : 


// 假设 document .cookie=data=name=Nicholas&book=Professional%20JavaScript 





























// 设置 两 个 子 cookie 
SubCookieUtil.set ("data", "name", "Nicholas"); 
SubCookieUtil.set ("data", "book", "Professional JavaScript"); 


// 设置 所 有 子 cookie 并 传 入 过 期 时 间 


SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" }, 


new Date("January 1, 2010")); 











// 修改 "name'" 的 值 并 修改 整个 cookie 的 过 期 时 间 
SubCookieUtil.set ("data", "name", "Michael", new Date("February 1, 2010")); 











最 后 一 组 子 cookie 相关 的 方法 是 要 删除 子 cookie 的 。 常 规 cookie 可 以 通过 直接 设置 过 期 时 间 为 某 
个 过 去 的 时 间 删 除 ， 但 删除 子 cookie 没有 这 么 简单 。 为 了 删除 子 cookie， 需 要 先 取 得 所 有 子 cookie， 把 























要 删除 的 那个 删 掉 ， 然 后 再 把 剩 下 的 子 cookie 设置 回去 。 下 面 是 相关 方法 的 实现 : 


class SubCookieUtil { 
// 省 略 之 前 的 代码 

















static unset (name, subName, path, domain, secure) { 
let subcookies = SubCookieUtil.getAll (name); 
if (subcookies)t 
delete subcookies[subName]; // 删除 
SubCookieUtil.setAll (name, subcookies, null, path, domain, secure); 
} 
} 


static unsetAll (name, path, domain, secure) { 
SubCookieUtil.setAll (name, null, new Date(0), path, domain, secure); 
} 
} 





这 里 定义 的 这 两 个 方法 有 两 个 不 同 的 目的 。unset () 方 法 用 于 从 cookie 中 删除 一 个 子 cookie,， 其 他 





子 cookie 不 受 影响 ; 而 unsetAl1l () 方 法 与 cookieUtil.unset () 一 样 , 会 删除 整个 cookie。 与 set 








和 setaAll1() 一 样 ， 路 径 、 域 和 secure 标志 必须 与 创建 cookie 时 使 用 的 一 样 。 可 以 像 下 面 这 样 使 用 这 


两 个 方法 : 
// 只 删除 "name" 子 cookie 
SubCookieUtil.unset ("data", "name"); 


// 删除 整个 cookie 
SubCookieUtil.unsetAll ("data"); 





() 
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如 果实 际 开发 中 担心 磁 到 每 个 域 的 cookie 限制 , 则 可 以 考虑 使 用 子 cookie 这 个 方案 。 此 时 要 特别 注 
意 cookie 的 大 小 ， 不 要 超过 对 单个 cookie 大 小 的 限制 。 


25.1.5 ”使 用 cookie 的 注意 事项 


还 有 一 种 叫 作 HTTP-only 的 cookie。HTTP-only 可 以 在 浏览 器 设置 也 可 以 在 服务 器 设置 , 但 只 能 
在 服务 器 上 读 取 ， 这 是 因为 JavaScript 无 法 取得 这 种 cookie 的 值 。 

因为 所 有 cookie 都 会 作为 请 求 头 部 由 浏览 器 发 送 给 服务 器 ,所 以 在 cookie 中 保存 大 量 信息 可 能 会 影 
响 特定 域 浏 览 器 请 求 的 性 能 。 保存 的 cookie 越 大 , 请 求 完成 的 时 间 就 越 长 。 即 使 浏览 器 对 cookie 大 小 有 
限制 ， 最 好 还 是 尽 可 能 只 通过 cookie 保存 必要 信息 ， 以 避免 性 能 问题 。 

对 cookie 的 限制 及 其 特性 决定 了 cookie 并 不 是 存储 大 量 数据 的 理想 方式 。 因 此, 其 他 客户 端 存储 技 
术 出 现 了 。 









































注意 不 要 在 cookie 中 存储 重要 或 敏感 的 信息 。cookie 数据 不 是 保存 在 安全 的 环境 中 ， 因 


此 任何 人 都 可 能 获得 。 应 该 避免 把 信用 卡号 或 个 人 地 址 等 信息 保存 在 cookie 中 。 





25.2 Web Storage 


Web Storage 最 早 是 网 页 超 文本 应 用 技术 工作 组 (WHATWG，Web Hypertext Application Technical 
Working Group ) 在 Web Applications 1.0 规范 中 提出 的 。 这 个 规范 中 的 草案 最 终 成 为 了 HTMLS 的 一 部 分 ， 
后 来 又 独立 成 为 自己 的 规范 。Web Storage 的 目的 是 解决 通过 客户 端 存储 不 需要 频繁 发 送 回 服务 器 的 数 
据 时 使 用 cookie 的 问题 。 

Web Storage 规范 最 新 的 版 本 是 第 2 版 ,这 一 版 规范 主要 有 两 个 目标 : 

口 提供 在 cookie 之 外 的 存储 会 话 数据 的 途径 ; 
口 提供 跨 会 话 持 久 化 存储 大 量 数据 的 机 制 。 

Web Storage 的 第 2 版 定义 了 两 个 对 象 : localStorage 和 sessionStorage。1localStorage 是 
永久 存储 机 制 ，sessionStorage 是 跨 会 话 的 存储 机 制 。 这 两 种 浏览 器 存储 API 提供 了 在 浏览 器 中 不 
受 页 面 刷新 影响 而 存储 数据 的 两 种 方式 。2009 年 之 后 所 有 主要 供应 商 发 布 的 浏览 器 版 本 在 window 对 象 


上 支持 localStorage 和 sessionStorage。 



























































注意 Web Storage 第 ] 版 曾 使 用 过 globalStorage, 不 过 目前 globalStorage 已 废弃 。 





25.2.1 Storage 类 型 


Storage 类 型 用 于 保存 名 / 值 对 数据 , 直至 存储 空间 上 限 ( 由 浏览 器 决定 )。storage 的 实例 与 其 他 
对 象 一 样 ， 但 增加 了 以 下 方法 。 
口 clear(): 删除 所 有 值 ; 不 在 Firefox 中 实现 。 
口 getItem(name) : 取得 给 定 name 的 值 。 
口 key (index) : 取得 给 定数 值 位 置 的 名 称 。 
口 removeItem (name) : 删除 给 定 name 的 名 / 值 对 。 
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口 setItem(name，value): 设置 给 定 name 的 值 。 

getItem()、removeItem() 和 setItem() 方 法 可 以 直接 或 间接 通过 storage 对 象 调用 。 因 为 每 
个 数据 项 都 作为 属性 存储 在 该 对 象 上 ， 所 以 可 以 使 用 点 或 方 括号 操作 符 访 问 这 些 属性 , 通过 同样 的 操作 
来 设置 值 ， 也 可 以 使 用 aelete 操作 符 删 除 属性 。 即 便 如 此 ,通常 还 是 建议 使 用 方法 而 非 属 性 来 执行 这 
些 操作 ， 以 免 意外 重 写 某 个 已 存在 的 对 象 成 员 。 
通过 length 属性 可 以 确定 Storage 对 象 中 保存 了 多 少 名 / 值 对 。 我 们 无 法 确定 对 象 中 所 有 数据 占用 
的 空间 大 小 ， 尽 管 IE8 提供 了 remainingspace 属性 ， 用 于 确定 还 有 多 少 存储 空间 (以 字 节 计 ) 可 用 。 













































































































































































Storage 类 型 只 能 存储 字符 串 。 非 字符 串 数 据 在 存储 之 前 会 自动 转换 为 字符 串 。 


意 ， 这 种 转换 不 能 在 获取 数据 时 撤销 。 





25.2.2 sessionStorage 对 象 


sessionStorage 对 象 只 存储 会 话 数据 , 这 意味 着 数据 只 会 存储 到 浏览 器 关闭 。 这 跟 浏览 器 关闭 时 
会 消失 的 会 话 cookie 类 似 。 存 储 在 sessionstorage 中 的 数据 不 受 页 面 刷新 影响 ， 可 以 在 浏览 器 崩 演 
并 重启 后 恢复 。( 取决 于 浏览 器 ，Firefox 和 WebKit 支持 ，IE 不 支持 。) 
因为 sessionStorage 对 象 与 服务 器 会 话 紧密 相关 ， 所 以 在 运行 本 地 文件 时 不 能 使 用 。 存 储 在 
sessionStorage 对 象 中 的 数据 只 能 由 最 初 存储 数据 的 页 面 使 用 ， 在 多 页 应 用 程序 中 的 用 处 有 限 。 
因为 sessionStorage 对 象 是 storage 的 实例 ， 所 以 可 以 通过 使 用 setItem() 方 法 或 直接 给 属 
性 赋值 给 它 添加 数据 。 下 面 是 使 用 这 两 种 方式 的 例子 : 

// 使 用 方法 存储 数据 


sessionStorage.setItem("name", "Nicholas"); 
























































// 使 用 属性 存储 数据 


sessionStorage.book = "Professional JavaScript"; 

所 有 现代 浏览 器 在 实现 存储 写 和 人 时 都 使 用 了 同步 阻塞 方式 ， 因 此 数据 会 被 立即 提交 到 存储 。 具 体 
API 的 实现 可 能 不 会 立即 把 数据 写 入 磁盘 ( 而 是 使 用 某 种 不 同 的 物理 存储 ), 但 这 个 区 别 在 JavaScript 层 
面 是 不 可 见 的 。 通 过 Web Storage 写 人 的 任何 数据 都 可 以 立即 被 读 取 。 

老 版 卫 以 异步 方式 实现 了 数据 写 人 ,因此 给 数据 赋值 的 时 间 和 数据 写 人 磁盘 的 时 间 可 能 存在 延迟 。 
对 于 少量 数据 ,这 里 的 差别 可 以 忽略 不 计 , 但 对 于 大 量 数据 ， 就 可 以 注意 到 IE 中 JavaScript 恢复 执行 的 
速度 比 其 他 浏览 器 更 快 。 这 是 因为 实际 写 人 磁盘 的 进程 被 转移 了 。 在 IE8 中 可 以 在 数据 赋值 前 调用 
begin ()、 之 后 调用 commit () 来 强制 将 数据 写 人 磁盘 。 比 如 : 


// 仅 适 用 于 IE8 

sessionStorage.begin(); 

sessionStorage.name = "Nicholas"; 
sessionStorage.book = "Professional JavaScript"; 
sessionStorage.commit (); 


以 上 代码 确保 了 "name" 和 "pook" 在 commit () 调 用 之 后 会 立即 写 人 磁盘 。 调 用 begin () 是 为 了 保 
证 在 代码 执行 期 间 不 会 有 写 人 磁盘 的 操作 。 对 于 少量 数据 , 这 个 过 程 不 是 必要 的 , 但 对 于 较 大 的 数据 量 ， 
如 文档 ， 则 可 以 考虑 使 用 这 种 事务 性 方法 。 

对 存在 于 sessionStorage 上 的 数据 ， 可 以 使 用 getItem() 或 直接 访问 属性 名 来 取得 。 下 面 是 使 
用 这 两 种 方式 的 例子 : 
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// 使 用 方法 取得 数据 


let name = sessionStorage.getIitem("name"); 


// 使 用 属性 取得 数据 


let book = sessionStorage.book; 
可 以 结合 sessionStorage 的 length 属性 和 key () 方 法 遍历 所 有 的 值 : 


for (let i = 0, len = sessionStorage.length; i < len; i++){ 
let key = sessionStorage.key (i); 
let value = sessionStorage.getItem (key); 
alert(‘s{key}= $s{value}. ); 

} 


这 里 通过 key () 先 取得 给 定位 置 中 的 数据 名 称 ， 然 后 使 用 该 名 称 通过 getItem() 取 得 值 ， 可 以 依 
次 访问 sessionStorage 中 的 名 / 值 对 。 
也 可 以 使 用 for-in 循环 迭代 sessionstorage 的 值 : 


for (let key in sessionStorage)t 
let value = sessionStorage.getItem(key); 
alert(‘${key}=${value}.); 


























} 
每 次 循环 ，key 都 会 被 赋予 sessionstorage 中 的 一 个 名 称 ; 这 里 不 会 返回 内 置 方法 或 length 
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要 从 sessionstorage 中 删除 数据 ， 可 以 使 用 aelete 操作 符 直 接 删 除 对 象 属性 ， 也 可 以 使 用 
removeItem() 方 法 。 下 面 是 使 用 这 两 种 方式 的 例子 : 


// 使 用 delete 删除 值 
delete sessionStorage.name; 























// 使 用 方法 删除 值 


sessionStorage.removeItem("book"); 


sessionStorage 对 象 应 该 主要 用 于 存储 只 在 会 话 期 间 有 效 的 小 块 数据 。 如 果 需 要 跨 会 话 持久 存储 
数据 ， 可 以 使 用 globalstorage 或 1ocalStorage。 











25.2.3 ”localStorage 对 象 


在 修订 的 HTML5 规范 里 ，localstorage 对 象 取代 了 glopbalstorage， 作 为 在 客户 端 持久 存储 
数据 的 机 制 。 要 访问 同一 个 localstorage 对 象 ， 页 面 必须 来 自 同 一 个 域 ( 子 域 不 可 以 )、 在 相同 的 端 

















口上 使 用 相同 的 协议 。 

因为 localstorage 是 storage 的 实例 ， 所 以 可 以 像 使 用 sessionstorage 一 样 使 用 25 
localStorage。 比 如 下 面 这 几 个 例子 : 
// 使 用 方法 存储 数据 


localStorage.setIitem("name", "Nicholas"); 








// 使 用 属性 存储 数据 


localStorage.book = "Professional JavaScript"; 


// 使 用 方法 取得 数据 
let name = localStorage.getItem("name"); 





// 使 用 属性 取得 数据 
let book = localStorage.book; 
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两 种 存储 方法 的 区 别 在 于 , 存储 在 1ocalstorage 中 的 数据 会 保留 到 通过 JavaScript 删除 或 者 用 户 
清除 浏览 器 缓存 。1ocalstorage 数据 不 受 页 面 刷新 影响 , 也 不 会 因 关闭 窗口 、 标 签 页 或 重新 启动 浏览 
器 而 丢失 。 


25.2.4 存储 事件 


每 当 Storage 对 象 发 生变 化 时 ， 都 会 在 文档 上 触发 storage 事件 。 使 用 属性 或 setItem() 设置 
值 、 使 用 aelete 或 removeItem() 删 除 值 , 以 及 每 次 调用 clear () 时 都 会 触发 这 个 事件 。 这 个 事件 的 
事件 对 象 有 如 下 4 个 属性 。 
口 somain: 存储 变化 对 应 的 域 。 
口 key: 被 设置 或 删除 的 键 。 
口 newValue: 键 被 设置 的 新 值 ， 若 键 被 删除 则 为 nul1。 
口 olavalue: 键 变化 之 前 的 值 。 
可 以 使 用 如 下 代码 监听 storage 事件 : 


window.addEventListener("storage", 
(event) => alert('Storage changed for S${event.domain}')); 


对 于 sessionStorage 和 localStorage 上 的 任何 更 改 都 会 触发 storage 事件 , 但 storage 重 
件 不 会 区 分 这 两 者 。 


25.2.5 限制 


与 其 他 客户 端 数据 存储 方案 一 样 ，Web Storage 也 有 限制 。 具 体 的 限制 取决 于 特定 的 浏览 器 。 一 般 
来 说 ， 客 户 端 数据 的 大 小 限制 是 按照 每 个 源 (协议 、 域 和 端口 ) 来 设置 的 ， 因 此 每 个 源 有 固定 大 小 的 数 
据 存储 空间 。 分 析 存 储 数据 的 页 面 的 源 可 以 加 强 这 一 限制 。 

不 同 浏览 器 给 localStorage 和 sessionStorage 设置 了 不 同 的 空间 限制 , 但 大 多 数 会 限制 为 每 
个 源 5MB。 关 于 每 种 媒介 的 新 配额 限制 信息 表 ， 可 以 参考 web.dev 网 站 上 的 文章 “Storage for the Web”。 

要 了 解 关 于 Web Storage 限制 的 更 多 信息 ， 可 以 参考 dev-test.nemikor 网 站 的 “Web Storage Support 
Test” 页 面 。 


25.3 IndexedDB 


Indexed Database API 简称 IndexedDB, 是 浏览 器 中 存储 结构 化 数据 的 一 个 方案 。IndexedDB 用 于 代 
替 目 前 已 废弃 的 Web SQL Database API。IndexedDB 背后 的 思想 是 创造 一 套 API, 方便 JavaScript 对 象 的 
存储 和 获取 ， 同 时 也 支持 查询 和 搜索 。 

IndexedDB 的 设计 几乎 完全 是 异步 的 。 为 此 , 大 多 数 操作 以 请 求 的 形式 执行 , 这 些 请 求 会 异步 执行 ， 
产生 成 功 的 结果 或 错误 。 绝 大 多 数 IndexedDB 操作 要 求 添加 onerror 和 onsuccess 事件 处 理 程序 来 确 
定 输出 。 

2017 年 ， 新 发 布 的 主流 浏览 需 〈 Chrome 、Firefox 、Opera 、Safari ) 完全 支持 IndexedDB。IE10/11 
和 Edge 浏览 器 部 分 支持 IndexedDB。 
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25.3.1 ”数据 库 


IndexedDB 是 类 似 于 MySQL 或 Web SQL Database 的 数据 库 。 与 传统 数据 库 最 大 的 区 别 在 于 ， 

IndexedDB 使 用 对 象 存储 而 不 是 表格 保存 数据 。IndexedDB 数据 库 就 是 在 一 个 公共 命名 空间 下 的 一 组 对 
象 存储 ， 类 似 于 NoSQL 风格 的 实现 。 
使 用 IndexedDB 数据 库 的 第 一 步 是 调用 indexegDB .open() 方 法 ， 并 给 它 传 人 一 个 要 打开 的 数据 
库 名 称 。 如 果 给 定名 称 的 数据 库 已 存在 ， 则 会 发 送 一 个 打开 它 的 请 求 ; 如 果 不 存 在 ， 则 会 发 送 创 建 并 打 
开 这 个 数据 库 的 请 求 。 这 个 方法 会 返回 IDBRequest 的 实例 ， 可 以 在 这 个 实例 上 添加 onerror 和 
onsuccess 事件 处 理 程序 。 举 例如 下 : 


let db, 
request, 
version = 1; 





















































request = indexedDB.open("admin", version); 
request.onerror = (event) => 

alert( ~ Failed to open: S${event.target.errorCode}.); 
request.onsuccess = (event) => { 

db = event.target.result; 


于 




















以 前 ，IndexedDB 使 用 setVersion () 方 法 指定 版 本 号 。 这 个 方法 目前 已 废弃 。 如 前 面 代 码 所 示 ， 
要 在 打开 数据 库 的 时 候 指 定 版 本 。 这 个 版 本 号 会 被 转换 为 一 个 unsigned long long 数值 ， 因 此 不 要 
使 用 小 数 ， 而 要 使 用 整数 。 

在 两 个 事件 处 理 程序 中 , event .target 都 指向 request, 因此 使 用 哪个 都 可 以 。 如 果 onsuccess 
事件 处 理 程序 被 调用 ， 说 明 可 以 通过 event .target .result 访问 数据 库 ( IDBDatabase ) 实例 了 ， 
这 个 实例 会 保存 到 ab 变量 中 。 之 后 ， 所 有 与 数据 库 相 关 的 操作 都 要 通过 ab 对 象 本 身 来 进行 。 如 果 打 
开 数据 库 期 间 发 生 错误 ，event .target .errorcode 中 就 会 存储 表示 问题 的 错误 码 。 






























































注意 ”以 前 ， 出 错时 会 使 用 IDBDatabaseException 表示 IndexedDB 发 生 的 错误 。 目前 


它 已 被 标准 的 DOMExceptions 取代 。 








25.3.2 ”对象 存 储 


























创建 对 象 存储 。 不 过 ， 在 创建 对 象 存储 前 ， 有 必要 想 一 想 要 存储 什么 类 型 的 数据 。 
假设 要 存储 包含 用 户 名 、 密 码 等 内 容 的 用 户 记录 。 可 以 用 如 下 对 象 来 表示 一 条 记录 : 
let user = { 
username: "007", 
firstName: "James", 
lastName: "Bond", 
password: "foo" 


于 


观察 这 个 对 象 ， 可 以 很 容易 看 出 最 适合 作为 对 象 存储 键 的 username 属性 。 用 户 名 必须 全 局 唯一 ， 
它 也 是 大 多 数 情况 下 访问 数据 的 凭据 。 这 个 键 很 重要 ， 因 为 创建 对 象 存 储 时 必须 指定 一 个 键 。 









































建立 了 数据 库 连 接 之 后 , 下 一 步 就 是 使 用 对 象 存储 。 如 果 数 据 库 版 本 与 期 待 的 不 一 致 ， 那 可 能 需要 525 
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数据 库 的 版 本 决定 了 数据 库 模式 ,包括 数据 库 中 的 对 象 存储 和 这 些 对 象 存 储 的 结构 。 如 果 数 据 库 ; 
不 存在 ，open () 操作 会 创建 一 个 新 数据 库 ， 然 后 触发 upgradeneedea 事件 。 2 
理 程序 ， 并 在 处 理 程序 中 创建 数据 库 模 式 。 如 果 数 据 库存 在 ， 而 你 指定 了 一 个 升级 版 的 版 本 号 ， 则 会 
即 触 发 upgradeneeded 事件 ， 因 而 可 以 在 事件 处 理 程 序 中 更 新 数据 库 模 式 。 

下 面 的 代码 演示 了 为 存储 上 述 用 户 信 息 如 何 创建 对 象 存储 : 


request.onupgradeneeded = (event) => { 
const db = event.target.result; 











辽 站 加 
















































































// 如 果 存 在 则 删除 当前 objectStore。 测 试 的 时 候 可 以 这 样 做 

// 但 这 样 会 在 每 次 执行 事件 处 理 程序 时 删除 已 有 数据 

if (db.objectStoreNames.contains ("users")) { 
db.deleteObjectStore("users"); 

} 


db.createObjectStore("users", { keyPath: "username" }); 


Es 
这 里 第 二 个 参数 的 keyPath 属性 表示 应 该 用 作 键 的 存储 对 象 的 属性 名 。 














25.3.3 事务 

创建 了 对 象 存 储 之 后 ， 剩 下 的 所 有 操作 都 是 通过 事务 完成 的 。 事 务 要 通过 调用 数据 库 对 象 的 
transaction() 方 法 创建 。 任 何 时 候 ， 只 要 想 要 读 取 或 修改 数据 ， 都 要 通过 事务 把 所 有 修改 操作 组 织 
起 来 。 最 简单 的 情况 下 ， 可 以 像 下 面 这 样 创建 事务 : 

let transaction = db.transaction(); 

如 果 不 指 定 参 数 , 则 对 数据 库 中 所 有 的 对 象 存储 有 只 读 权 限 。 更 具体 的 方式 是 指定 一 个 或 多 个 要 访 
问 的 对 象 存储 的 名 称 : 

let transaction = db.transaction("users"); 

这 样 可 以 确保 在 事务 期 间 只 加 载 users 对 象 存 储 的 信息 。 如 果 想 要 访问 多 个 对 象 存储 ， 可 以 给 第 
一 个 参数 传人 一 个 字符 串 数 组 : 



















































































let transaction = db.transaction(["users", "anotherStore"]); 

如 前 所 述 ， 每 个 事务 都 以 只 读 方式 访问 数据 。 要 修改 访问 模式 ， 可 以 传人 第 二 个 参数 。 这 个 参数 应 
该 是 下 列 三 个 字符 串 之 一 : "readonly"、"readwrite'" 或 "versionchange"。 比 如 : 

let transaction = db.transaction("users", "readwrite"); 





这 样 事务 就 可 以 对 users 对 象 存储 读 写 了 。 

有 了 事务 的 引用 ,就 可 以 使 用 objectstore() 方 法 并 传 入 对象 存储 的 名 称 以 访问 特定 的 对 象 存储 。 
然后 , 可 以 使 用 aaa () 和 put () 方 法 添加 和 更 新 对 象 , 使 用 get () 取得 对 象 , 使 用 aelete () 删除 对 象 ， 
使 用 clear () 删除 所 有 对 象 。 其 中 ，get () 和 delete() 方 法 都 接收 对 象 键 作为 参数 ， 这 5 个 方法 都 创 
建新 的 请 求 对 象 。 来 看 下 面 的 例子 : 


const transaction = db.transaction("users"), 

store = transaction.objectStore("users"), 

request = store.get ("007"); 
request.onerror = (event) => alert ("Did not get the object!"); 
request.onsuccess = (event) => alert (event.target.result.firstName); 
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因为 一 个 事务 可 以 完成 任意 多 个 请 求 ， 所 以 事务 对 象 本 身 也 有 事件 处 理 程序 : onerror 和 oncomplete。 
这 两 个 事件 可 以 用 来 获取 事务 级 的 状态 信息 : 

transaction.onerror = (event) => { 

// 整个 事务 被 取消 

过 

transaction.oncomplete = (event) => { 
// 整个 事务 成 功 完成 
ys 

注意 , 不 能 通过 oncomplete 事件 处 理 程序 的 event 对 象 访问 get () 请 求 返 回 的 任何 数据 。 因 此 ， 
仍然 需要 通过 这 些 请 求 的 onsuccess 事件 处 理 程 序 来 获取 数据 。 


25.3.4 插入 对 象 


拿 到 了 对 象 存储 的 引用 后 ， 就 可 以 使 用 aaa() 或 put () 写 人 数据 了 。 这 两 个 方法 都 接收 一 个 参数 ， 
即 要 存储 的 对 象 ， 并 把 对 象 保 存 到 对 象 存储 。 这 两 个 方法 只 在 对 象 存储 中 已 存在 同名 的 键 时 有 区 别 。 这 
种 情况 下 ，aqa ( ) 会 导致 错误 ,而 put () 会 简单 地 重 写 该 对 象 。 更 简单 地 说 ， 可 以 把 aada ( ) 想象 成 插入 
新 值 ， 而 把 put () 想象 为 更 新 值 。 因 此 第 一 次 初始 化 对 象 存储 时 ， 可 以 这 样 做 : 


// users 是 一 个 用 户 数据 的 数组 
for (let user of users) { 
store.add (user); 


} 


每 次 调用 add () 或 put () 都 会 创建 对 象 存储 的 新 更 新 请 求 。 如 果 想 验证 请 求 成 功 与 否 , 可 以 把 请 求 
对 象 保存 到 一 个 变量 ， 然 后 为 它 添加 onerror 和 onsuccess 事件 处 理 程序 : 


// users 是 一 个 用 户 数 据 的 数组 
let request, 
requests = []; 
for (let user of users) { 
request = store.add (user); 




















































































































request.onerror = () => { 
// 处 理 错 误 

于 

request.onsuccess = () => { 


// 处 理 成 功 
到 
requests.push(request); 


} 
创建 并 填充 了 数据 后 ， 就 可 以 查询 对 象 存储 了 。 25 


25.3.5 “通过 游标 查询 


使 用 事务 可 以 通过 一 个 已 知 键 取 得 一 条 记录 。 如 果 想 取得 多 条 数据 , 则 需要 在 事务 中 创建 一 个 游标 。 
游标 是 一 个 指向 结果 集 的 指针 。 与 传统 数据 库 查 询 不 同 ， 游 标 不 会 事先 收集 所 有 结果 。 相 反 ， 游 标 指向 
第 一 个 结果 ， 并 在 接 到 指令 前 不 会 主动 查找 下 一 条 数据 。 

需要 在 对 象 存储 上 调用 opencursor () 方 法 创建 游标 ,与 其 他 IndexedDB 操作 一 样 ,openCursor () 
方法 也 返回 一 个 请 求 ， 因 此 必须 为 它 添加 onsuccess 和 onerror 事件 处 理 程序 。 例 如 : 
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const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 


request = store.openCursor();} 
request.onsuccess = (event) => { 
// 处 理 成 功 
二 
request.onerror = (event) => { 
// 处 理 错误 


过 


























在 调用 onsuccess 事件 处 理 程序 时 , 可 以 通过 event .target.result 访问 对 象 存储 中 的 下 一 条 
记录 ,这 个 属性 中 保存 着 IDBCursor 的 实例 ( 有 下 一 条 记录 时 ) 或 null( 没有 记录 时 ) 这 个 IDBCursor 
实例 有 几 个 属性 。 

D airection: 字符 串 常量 , 表示 游标 的 前 进 方向 以 及 是 否 应 该 遍历 所 有 重复 的 值 。 可 能 的 值 包 括 : 

NEXT ("next") 、 NEXTUNIQUE ("nextunique")、 PREV("prev")、 PREVUNIQUE ("prevunique")o 

口 key: 对 象 的 键 。 

口 value: 实际 的 对 象 。 

口 primaryKey: 游标 使 用 的 键 。 可 能 是 对 象 键 或 索引 键 ( 稍 后 讨论 )。 

可 以 像 下 面 这 样 取得 一 个 结果 : 

request.onsuccess = (event) => { 
const cursor = event.target.result; 


if (cursor) { // 永远 要 检查 
console.log( Key: S${cursor.key}, Value: S${JSON.stringify(cursor.value)}.); 


} 



























































二 





























注意 ， 这 个 例子 中 的 cursor.value 保存 着 实际 的 对 象 。 正 因为 如 此 ， 在 显示 它 之 前 才 需 要 使 用 
JSON 来 编码 。 
游标 可 用 于 更 新 个 别 记录 。update() 方 法 使 用 指定 的 对 象 更 新 当前 游标 对 应 的 值 。 与 其 他 类 似 操 作 
一 样 ， 调 用 update () 会 创建 一 个 新 请 求 ， 因 此 如 果 想 知道 结果 ， 需 要 为 onsuccess 和 onerror 赋值 : 






























































request.onsuccess = (event) => { 
const cursor = event.target.result; 
let value, 
updateRequest; 


if (cursor) { // 永远 要 检查 


if (cursor.key == "foo") { 
value = cursor.value; // 取得 当前 对 象 
value.password = "magic!"; // 更 新 密码 
updateRequest = cursor.update(value); // 请 求 保存 更 新 后 的 对 象 
updateRequest.onsuccess = () => { 
// 处 理 成 功 
}; 
updateRequest.onerror = () => { 
// 处 理 错误 
}; 
} 


} 
过 


也 可 以 调用 delelte() 来 删除 游标 位 置 的 记录 ， 与 upaate () 一 样 ， 这 也 会 创建 一 个 请 求 : 
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request.onsuccess = (event) => { 
const cursor = event.target.result; 
let value, 


deleteRequest; 
if (cursor) { // 永远 要 检查 
if (cursor.key == "foo") { 
deleteRequest = cursor.delete(); // 请 求 删 除 对 象 
deleteRequest.onsuccess = () => { 
// 处 理 成 功 
}; 
deleteRequest.onerror = () => { 
// 处 理 错 误 


}; 
} 

} 
ys 
如 果 事 务 没有 修改 对 象 存储 的 权限 ，update () 和 delete() 都 会 抛 出 错误 。 
默认 情况 下 ， 每 个 游标 只 会 创建 一 个 请 求 。 要 创建 另 一 个 请 求 ， 必 须 调 用 下 列 中 的 一 个 方法 。 
口 continue (Key) : 移动 到 结果 集中 的 下 一 条 记录 。 人 参数 key 是 可 选 的 。 如 果 没 有 指定 key， 游 
标 就 移动 到 下 一 条 记录 ; 如 果 指 定 了 ， 则 游标 移动 到 指定 的 键 。 
口 aqvance (count) : 游标 向 前 移动 指定 的 count 条 记录 。 

这 两 个 方法 都 会 让 游标 重用 相同 的 请 求 ， 因此 也 会 重用 onsuccess 和 onerror 处 理 程序 , 直至 不 
需要 。 例 如， 下 面 的 代码 迭代 了 一 个 对 象 存储 中 的 所 有 记录 : 


request.onsuccess = (event) => { 
const cursor = event.target.result; 
if (cursor) { // 永远 要 检查 
console.log( ‘Key: S${cursor.key}, Value: S${JSON.stringify(cursor.value)}.); 
cursor.continue(); // 移动 到 下 一 条 记录 
} else { 
console.log("Done!"); 
} 
地 
调用 cursor .continue () 会 触发 另 一 个 请 求 并 再 次 调用 onsuccess 事件 处 理 程序 。 在 没有 更 多 


记录 时 ，onsuccess 事件 处 理 程序 最 后 一 次 被 调用 ， 此 时 event .target .result 等 于 null。 
25.3.6” 键 范 车 


使 用 游标 会 给 人 一 种 不 太 理想 的 感觉 ， 因 为 获取 数据 的 方式 受到 了 限制 。 使 用 键 范围 (key range ) ER 
可 以 让 游标 更 容易 管理 。 键 范围 对 应 IDBKeyRange 的 实例 。 有 四 种 方式 指定 键 范围 ， 第 一 种 是 使 用 
onaly () 方法 并 传人 想 要 获取 的 键 : 

const onlyRange = IDBKeyRange.only("007"); 

这 个 范围 保证 只 获取 键 为 "007" 的 值 。 使 用 这 个 范围 创建 的 游标 类 似 于 直接 访问 对 象 存储 并 调用 
get ("007")。 

第 二 种 键 范围 可 以 定义 结果 集 的 下 限 。 下 限 表示 游标 开始 的 位 置 。 例 如 ， 下 面 的 键 东 6 
"007" 这 个 键 开 始 ， 直 到 最 后 : 


// 从 "007" 记 录 开 始 ， 直 到 最 后 
const lowerRange = IDBKeyRange.lowerBound("007"); 
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保证 游标 从 
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如 果 想 从 "007" 后 面 的 记录 开始 ， 可 以 再 传人 第 二 个 参数 true: 
// 从 "007" 的 下 一 条 记录 开始 ， 直 到 最 后 


const lowerRange = IDBKeyRange.lowerBound("007", true); 


第 三 种 键 范围 可 以 定义 结果 集 的 上 限 ， 通 过 调用 upperBound() 方 法 可 以 指定 游标 不 会 越过 的 记 
录 。 下 面 的 键 范围 保证 游标 从 头 开 始 并 在 到 达 键 为 "ace "的 记录 停止 : 


// 从 头 开始 ， 到 "ace" 记 录 为 止 
const upperRange = IDBKeyRange.upperBound("ace"); 


如 果 不 想 包 含 指定 的 键 ， 可 以 在 第 二 个 参数 传人 true: 


// 从 头 开始 ， 到 "ace'" 的 前 一 条 记录 为 止 
const upperRange = IDBKeyRange.upperBound("ace", true); 


要 同时 指定 下 限 和 上 限 ， 可 以 使 用 bouna () 方 法 。 这 个 方法 接收 四 个 参数 : 下 限 的 键 、 上 限 的 键 、 
可 选 的 布尔 值 表示 是 否 跳 过 下 限 和 可 选 的 布尔 值 表示 是 否 跳 过 上 限 。 下 面 是 几 个 例子 : 
// 从 "007" 记 录 开 始 ， 到 "ace" 记 录 停 止 

























































































const boundRange = IDBKeyRange.bound("007", "ace"); 

// 从 "007" 的 下 一 条 记录 开始 ， 到 "ace" 记 录 停 止 

const boundRange = IDBKeyRange.bound("007", "ace", true); 

// 从 "007" 的 下 一 条 记录 开始 ， 到 "ace" 的 前 一 条 记录 停止 

const boundRange = IDBKeyRange.bound("007", "ace", true, true); 

// 从 "007" 记 录 开 始 ， 到 "ace" 的 前 一 条 记录 停止 

const boundRange = IDBKeyRange.bound("007", "ace", false, true); 
定义 了 范围 之 后 ， 把 它 传 给 opencursor () 方 法 ， 就 可 以 得 到 位 于 该 范围 内 的 游标 : 
const Store = db.transaction("users").objectStore("users"), 


range = IDBKeyRange .bound("007"， "ace") 
request = store.openCursor (ange) ; 
request.onsuccess = function(event)t 
const cursor = event.target.result; 
if (cursor) { // 永远 要 检查 
console.log( Key: S${cursor.key}, Value: S${JSON.stringify(cursor.value)}. ); 
cursor.continue(); // 移动 到 下 一 条 记录 
} else { 
console.log("Done!"); 
} 
下 


这 个 例子 只 会 输出 从 键 为 "007" 的 记录 开始 到 键 为 "ace" 的 记录 结束 的 对 象 , 比 上 一 节 的 例子 要 少 。 





25.3.7 ”设置 游标 方向 


openCursor () 方 法 实际 上 可 以 接收 两 个 参数 ， 第 一 个 是 IDBKeyRange 的 实例 ， 第 二 个 是 表示 方 
向 的 字符 串 。 通 常 ， 游 标 都 是 从 对 象 存储 的 第 一 条 记录 开始 ， 每 次 调用 continue () 或 adavance () 都 
会 向 最 后 一 条 记录 前 进 。 这 样 的 游标 其 默认 方向 为 "next"。 如 果 对 象 存储 中 有 重复 的 记录 ， 可 能 需要 
游标 跳 过 那些 重复 的 项 。 为 此 ， 可 以 给 opencursor () 的 第 二 个 参数 传人 "nextuniaue " : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
request = store.openCursor (null, "nextunique"); 


注意 ，openCursor () 的 第 一 个 参数 是 nul11， 表 示 默 认 的 键 范 围 是 所 有 值 。 此 游标 会 遍历 对 象 存 
储 中 的 记录 ， 从 第 一 条 记录 开始 迭代 ， 到 最 后 一 条 记录 ， 但 会 跳 过 重复 的 记录 。 
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另外 ， 也 可 以 创建 在 对 象 存储 中 反 向 移动 的 游标 ， 从 最 后 一 项 开始 向 第 一 项 移动 。 此 时 需要 给 
opencursor () 传 人 "prev" 或 "prevunique" 作 为 第 二 个 参数 (后 者 的 意思 当然 是 避免 重复 )。 例 如 : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
request = store.openCursor (null, "prevunique"); 


在 使 用 "prev'" 或 "prevunique" 打 开 游 标 时 ， 每 次 调用 cont inue () 或 advance () 都 会 在 对 象 存 
储 中 反 向 移动 游标 。 



































25.3.8 索引 
对 某 些 数据 集 ， 可 能 需要 为 对 象 存储 指定 多 个 键 。 例 如 ， 如 果 同 时 记录 了 用 户 ID 和 用 户 名 , 那 可 能 









































需要 通过 任何 一 种 方式 来 获取 用 户 数据 。 为 此 , 可 以 考虑 将 用 户 ID 作为 主键 ， 然 后 在 用 户 名 上 创建 索引 。 
要 创建 新 索引 ， 首 先 要 取得 对 象 存储 的 引用 ， 然 后 像 下 面 的 例子 一 样 调用 createIndex () : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
index = store.createIndex("username", "username", { unique: true });， 


createIndex() 的 第 一 个 参数 是 索引 的 名 称 ， 第 二 个 参数 是 索引 属性 的 名 称 ， 第 三 个 参数 是 包含 
键 uniaue 的 options 对 象 。 这 个 选项 中 的 uniaue 应 该 必须 指定 ， 表 示 这 个 键 是 否 在 所 有 记录 中 唯 
一 。 因 为 username 可 能 不 会 重复 ， 所 以 这 个 键 是 唯一 的 。 

createIndex() 返 回 的 是 IDBIndex 实例 。 在 对 象 存储 上 调用 ijndex() 方 法 也 可 以 得 到 同一 个 实 
例 。 例 如 ， 要 使 用 一 个 已 存在 的 名 为 "username" 的 索引 ， 可 以 像 下 面 这 样 : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
index = store.index("username"); 


索引 非常 像 对 象 存储 。 可 以 在 索引 上 使 用 opencursor () 方 法 创建 新 游标 , 这 个 游标 与 在 对 象 存储 
上 调用 opencursor () 创建 的 游标 完全 一 样 。 只 是 其 result .key 属性 中 保存 的 是 索引 键 ， 而 不 是 主 
键 。 下 面 看 一 个 例子 : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
index = store.index("username"), 
request = index.openCursor(); 

request .onsuccess = (event) => { 


// 处 理 成 功 





























































































































使 用 openKeycursor () 方 法 也 可 以 在 索引 上 创建 特殊 游标 , 只 返回 每 条 记录 的 主键 。 这 个 方法 接收 的 
参数 与 openCursor () () 一 样 。 最 大 的 不 同 在 于 ,event .result .K y 是 索引 键 ， 且 sevent .result.value 
是 主键 而 不 是 整个 记录 。 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
index = store.index("username"), 
request = index.openKeyCursor(); 
request.onsuccess = (event) => { 
// 处 理 成 功 
// event.result.key 是 索引 键 ，event .result.value 是 主键 
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可 以 使 用 set () 方 法 并 传人 索引 键 通 过 索引 取得 单条 记录 ， 这 会 创建 一 个 新 请 求 : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
index = store.index("username"), 
request = index.get ("007"); 




















request.onsuccess = (event) => { 
// 处 理 成 功 

和 

request.onerror = (event) => { 
// 处 理 错误 


于 
如 果 想 只 取得 给 定 索引 键 的 主键 ， 可 以 使 用 getKey () 方 法 。 这 样 也 会 创建 一 个 新 请 求 ， 但 
result .value 等 于 主键 而 不 是 整个 记录 : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
index = store.index("username"), 
request = index.getKey("007");，; 
request.onsuccess = (event) => { 
// 处 理 成 功 
// event .target .result.key 是 索引 键 ，event .target .result.value 是 主键 
了 


在 这 个 onsuccess 事件 处 理 程序 中 ，event .target .result .value 中 应 该 是 用 户 ID。 
任何 时 候 ， 都 可 以 使 用 IDBIndex 对 象 的 下 列 属 性 取得 索引 的 相关 信息 。 
D name: 索引 的 名 称 。 

口 keyPath: 调用 createIndex() 时 传人 的 属性 路 径 。 

DD objectStore: 索引 对 应 的 对 象 存储 。 

口 unigque: 表示 索引 键 是 否 唯一 的 布尔 值 。 

对 象 存 储 自身 也 有 一 个 indexNames 属性 , 保存 着 与 之 相关 索引 的 名 称 。 使 用 如 下 代码 可 以 方便 地 
了 解 对 象 存储 上 已 存在 哪些 索引 : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
indexNames = store.indexNames 
for (let indexName in indexNames) { 
const index = store.index(indexName); 
console.log( ‘Index name: S${index.name} 
KeyPath: S${index.keyPath} 
Unique: S${index.unique}. )， 
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} 
以 上 代码 迭代 了 每 个 索引 并 在 控制 台中 输出 了 它们 的 信息 。 
在 对 象 存储 上 调用 aeleteIndex() 方 法 并 传人 索引 的 名 称 可 以 删除 索引 : 


const transaction = db.transaction("users"), 
store = transaction.objectStore("users"), 
store.deleteIndex("username"); 


因为 删除 索引 不 会 影响 对 象 存储 中 的 数据 ， 所 以 这 个 操作 没有 回调 。 


25.3.9 并 发 问题 
IndexedDB 虽然 是 网 页 中 的 异步 API， 但 仍 存 在 并 发 问题 。 如 果 两 个 不 同 的 浏览 器 标签 页 同时 打开 
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了 同一 个 网 页 , 则 有 可 能 出 现 一 个 网 页 尝试 升级 数据 库 而 男 一 个 尚未 就 绪 的 情形 。 有 问题 的 操作 是 设置 
数据 库 为 新 版 本 ， 而 版 本 变化 只 能 在 浏览 器 只 有 一 个 标签 页 使 用 数据 库 时 才能 完成 。 

第 一 次 打开 数据 库 时 ,添加 onversionchange 事件 处 理 程序 非常 重要 。 另 一 个 同 源 标签 页 将 数据 库 
打开 到 新 版 本 时 ， 将 执行 此 回调 。 对 这 个 事件 最 好 的 回应 是 立即 关闭 数据 库 ， 以 便 完 成 版 本 升级 。 例 如 : 


let request, database; 



































request = indexedDB.open("admin", 1); 


request.onsuccess = (event) => { 
database = event.target.result; 
database.onversionchange = () => database.close(); 


}3 

应 该 在 每 次 成 功 打 开 数 据 库 后 都 指定 onversionchange 事件 处 理 程序 , 记 住 , onversionchange 
有 可 能 会 被 其 他 标签 页 触发 。 

通过 始终 都 指定 这 些 事 件 处 理 程序 ， 可 以 保证 Web 应 用 程序 能 够 更 好 地 处 理 与 IndexedDB 相关 的 
并 发 问题 。 


25.3.10 ”限制 


IndexedDB 的 很 多 限制 实际 上 与 Web Storage 一 样 。 首先 ，IndexedDB 数据 库 是 与 页 面 源 (协议 、 域 
和 端口 ) 绑 定 的 ,因此 信息 不 能 跨 域 共享 。 这 意味 着 www.wrox.com 和 p2p.wrox.com 会 对 应 不 同 的 数据 
存储 。 

其 次 ， 每 个 源 都 有 可 以 存储 的 空间 限制 。 当 前 Firefox 的 限制 是 每 个 源 50MB， 而 Chrome 是 5MB。 
移动 版 Firefox 有 SMB 限制 ， 如 果 用 度 超出 配额 则 会 请 求 用 户 许可 。 

Firefox 还 有 一 个 限制 本 地 文本 不 能 访问 IndexedDB 数据 库 。Chrome 没有 这 个 限制 。 因 此 在 本 
地 运行 本 书 示 例 时 ， 要 使 用 Chrome。 


25.4 小结 


Web Storage 定义 了 两 个 对 象 用 于 存储 数据 : sessionstorage 和 localstorage。 前 者 用 于 严格 
保存 浏览 器 一 次 会 话 期 间 的 数据 , 因为 数据 会 在 浏览 器 关闭 时 被 删除 ,后 者 用 于 会 话 之 外 持久 保存 数据 。 

IndexedDB 是 类 似 于 SQL 数据 库 的 结构 化 数据 存储 机 制 。 不 同 的 是 ，IndexedDB 存储 的 是 对 象 ， 而 
不 是 数据 表 。 对 象 存储 是 通过 定义 键 然后 添加 数据 来 创建 的 。 游 标 用 于 查询 对 象 存储 中 的 特定 数据 ， 而 
索引 可 以 针对 特定 属性 实现 更 快 的 查询 。 

有 了 这 些 存 储 手 段 , 就 可 以 在 客户 端 通过 使 用 JavaScript 存储 可 观 的 数据 。 因 为 这 些 数 据 没有 加 密 ， 
所 以 要 注意 不 能 使 用 它们 存储 敏感 信息 。 
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模 块 


本 章 内 容 

口 理解 模块 模式 

口 凑合 的 模块 系统 

口 使 用 前 ES6 模块 加 载 器 
口 使 用 ES6 模块 





















































现代 JavaScript 开发 毋庸 置疑 会 遇 到 代码 量 大 和 广泛 使 用 第 三 方 库 的 问题 。 解 决 这 个 问题 的 方案 通 
常 需要 把 代码 拆 分 成 很 多 部 分 ， 然 后 再 通过 某 种 方式 将 它们 连接 起 来 。 

在 ECMAScript6 模块 规范 出 现 之 前 ， 虽 然 浏 览 器 原生 不 支持 模块 的 行为 ,但 迫切 需要 这 样 的 行为 。 
ECMAScript 同样 不 支持 模块 , 因此 希望 使 用 模块 模式 的 库 或 代码 库 必须 基于 JavaScript 的 语法 和 词法 特 
性 “伪造 ”出 类 似 模 块 的 行为 。 

为 JavaScript 是 异步 加 载 的 解释 型 语言 , 所 以 得 到 广泛 应 用 的 各 种 模块 实现 也 表现 出 不 同 的 形态 。 
这 些 不 同 的 形态 决定 了 不 同 的 结果 ,但 最 终 它们 都 实现 了 经 典 的 模块 模式 。 


26.1 理解 模块 模式 


将 代码 拆 分 成 独立 的 块 ， 然后 再 把 这 些 块 连接 起 来 可 以 通过 模块 模式 来 实现 。 这 种 模式 背后 的 思想 
很 简单 : 把 逻辑 分 块 ， 各自 封装 ， 相 互 独立 ,每 个 块 自行 决定 对 外 暴露 什么 ， 同时 自行 决定 引入 执行 哪 
些 外 部 代码 。 不 同 的 实现 和 特性 让 这 些 基 本 的 概念 变 得 有 点 复杂 ， 但 这 个 基本 的 思想 是 所 有 JavaScript 
模块 系统 的 基础 。 


26.1.1 模块 标识 符 


模块 标识 符 是 所 有 模块 系统 通用 的 概念 。 模 块 系统 本 质 上 是 键 / 值 实体 ， 其 中 每 个 模块 都 有 个 可 用 
于 引用 它 的 标识 符 。 这 个 标识 符 在 模拟 模块 的 系统 中 可 能 是 字符 串 , 在 原生 实现 的 模块 系统 中 可 能 是 模 
块 文件 的 实际 路 径 。 

有 的 模块 系统 支持 明确 声明 模块 的 标识 , 还 有 的 模块 系统 会 隐 式 地 使 用 文件 名 作为 模块 标识 符 。 不 
管 怎样 ,完善 的 模块 系统 一 定 不 会 存在 模块 标识 冲突 的 问题 ， 且 系统 中 的 任何 模块 都 应 该 能 够 无 歧义 地 
引用 其 他 模块 。 
将 模块 标识 符 解析 为 实际 模块 的 过 程 要 根据 模块 系统 对 标识 符 的 实现 。 原生 浏览 器 模块 标识 符 必须 
提供 实际 JavaScript 文件 的 路 径 。 除 了 文件 路 径 , Node,js 还 会 搜索 node _ modules 目录 , 用 标识 符 去 匹配 
包含 index.js 的 目录 。 
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26.1.2 ”模块 依赖 


模块 系统 的 核心 是 管理 依赖 。 指 定 依赖 的 模块 与 周围 的 环境 会 达成 一 种 契约 。 本 地 模块 向 模块 系统 
声明 一 组 外 部 模块 ( 依赖 )， 这 些 外 部 模块 对 于 当前 模块 正常 运行 是 必需 的 。 模 块 系统 检视 这 些 依赖 ， 
进而 保证 这 些 外 部 模块 能 够 被 加 载 并 在 本 地 模块 运行 时 初始 化 所 有 依赖 

每 个 模块 都 会 与 某 个 唯一 的 标识 符 关联 ， 该 标识 符 可 用 于 检索 模块 。 这 个 标识 符 通常 是 JavaScript 
文件 的 路 径 ， 但 在 某 些 模块 系统 中 ， 这 个 标识 符 也 可 以 是 在 模块 本 身 内 部 声明 的 命名 空间 路 径 字符 串 。 


26.1.3 ”模块 加 载 


加 载 模块 的 概念 派生 自 依赖 契约 。 当 一 个 外 部 模块 被 指定 为 依赖 时 ， 本 地 模块 期 望 在 执行 它 时 , 依 
赖 已 准备 好 并 已 初始 化 。 

在 浏览 器 中 ， 加载 模块 涉及 几 个 步 又 。 加 载 模块 涉及 执行 其 中 的 代码 ,但 必须 是 在 所 有 依赖 都 加 载 
并 执行 之 后 。 如 果 浏 览 器 没有 收 到 依赖 模块 的 代码 ， 则 必须 发 送 请 求 并 等 待 网 络 返回 。 收 到 模块 代码 之 
后 ,浏览 器 必须 确定 刚 收 到 的 模块 是 否 也 有 依赖 。 然 后 递归 地 评估 并 加 载 所 有 依赖 ， 直 到 所 有 依赖 模块 
都 加 载 完 成 。 只 有 整个 依赖 图 都 加 载 完 成 ， 才 可 以 执行 和 人口 模块 。 


26.1.4 入 口 


相互 依赖 的 模块 必须 指定 一 个 模块 作为 人口 (entry point )， 这 也 是 代码 执行 的 起 点 。 这 是 理所当然 
的 ， 因 为 JavaScript 是 顺序 执行 的 ， 并 且 是 单线 程 的 ， 所 以 代码 必须 有 执行 的 起 点 。 入 口 模块 也 可 能 依 
赖 其 他 模块 ， 其 他 模块 同样 可 能 有 自己 的 依赖 。 于 是 模块 化 JavaScript 应 用 程序 的 所 有 模块 会 构成 依赖 
图 。 
















































































































































































可 以 通过 有 向 图 来 表示 应 用 程序 中 各 模块 的 依赖 关系 。 图 26-1 展示 了 一 个 想象 中 应 用 程序 的 模块 
依赖 关系 图 。 
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到 中 的 箭头 表示 依赖 方向 : 模块 A 依赖 模块 B 和 模块 C， 模 块 B 依赖 模块 D 和 模块 下 ， 模 块 C 依 
赖 模块 E。 因 为 模块 必须 在 依赖 加 载 完成 后 才能 被 加 载 , 所 以 这 个 应 用 程序 的 人 口 模块 A 必须 在 应 用 程 
序 的 其 他 部 分 加 载 后 才能 执行 。 

在 JavaScript 中 “加 载 ”的 概念 可 以 有 多 种 实现 方式 。 因 为 模块 是 作为 包含 将 立即 执行 的 JavaScript 
代码 的 文件 实现 的 ， 所 以 一 种 可 能 是 按照 依赖 图 的 要 求 依次 请 求 各 个 脚本 。 对 于 前 面 的 应 用 程序 来 说 ， 
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下 面 的 脚本 请 求 顺 序 能 够 满足 依赖 图 的 要 求 : 


<script src="moduleE.js"></script> 
<script src="moduleD.js"></script> 
<script src="moduleC.js"></script> 
<script src="moduleB.js"></script> 
<script src="moduleA.js"></script> 


模块 加 载 是 “阻塞 的 "， 这 意味 着 前 置 操 作 必须 完成 才能 执行 后 续 操 作 。 每 个 模块 在 自己 的 代码 到 达 
浏览 器 之 后 完成 加 载 ， 此 时 其 依赖 已 经 加 载 并 初始 化 。 不 过 ， 这 个 策略 存在 一 些 性 能 和 复杂 性 问题 。 为 
个 应 用 程序 而 按 顺 序 加 载 五 个 JavaScript 文件 并 不 理想 ， 并 且 手 动 管理 正确 的 加 载 顺 序 也 颇 为 坏 手 。 


26.1.5 “异步 依赖 


因为 JavaScript 可 以 异步 执行 , 所 以 如 果 能 按 需 加 载 就 好 了 。 换 句 话说 ,可 以 让 JavaScript 通知 模块 
系统 在 必要 时 加 载 新 模块 , 并 在 模块 加 载 完 成 后 提供 回调 。 在 代码 层面 , 可 以 通过 下 面 的 伪 代 码 来 实现 : 


// 在 模块 入 里 面 

load('moduleB') .then(function(moduleB) { 
moduleB.doSstuff(); 

ee 


模块 A 的 代码 使 用 了 moduleB 标识 符 向 模块 系统 请 求 加 载 模块 B, 并 以 模块 B 作为 参数 调用 回调 。 
模块 B 可 能 已 加 载 完 成 , 也 可 能 必须 重新 请 求 和 初始 化 , 但 这 里 的 代码 并 不 关心 。 这 些 事情 都 交 给 了 模 
块 加 载 器 去 负责 。 

如 果 重 写 前 面 的 应 用 程序 ， 只 使 用 动态 模块 加 载 ， 那 么 使 用 一 个 <script> 标 签 即 可 完成 模块 A 的 
加 载 。 模块 A 会 按 需 请 求 模块 文件 , 而 不 会 生成 必需 的 依赖 列表 。 这样 有 几 个 好 处 , 其 中 之 一 就 是 性 能 ， 
因为 在 页 面 加 载 时 只 需 同步 加 载 一 个 文件 。 

这 些 脚 本 也 可 以 分 离 出 来 ， 比 如 给 <script> 标 签 应 用 defer 或 async 属性 ， 再 加 上 能 够 识别 异步 
脚本 何 时 加 载 和 初始 化 的 逻辑 。 此 行为 将 模拟 在 ES6 模块 规范 中 实现 的 行为 , 本 章 稍 后 会 对 此 进行 讨论 。 


26.1.6 ”动态 依赖 


有 些 模块 系统 要 求 开发 者 在 模块 开始 列 出 所 有 依赖 , 而 有 些 模 块 系统 则 允许 开发 者 在 程序 结构 中 动 
态 添 加 依赖 。 动 态 添 加 的 依赖 有 别 于 模块 开头 列 出 的 常规 依赖 ， 这 些 依赖 必须 在 模块 执行 前 加 载 完毕 。 
下 面 是 动态 依赖 加 载 的 例子 : 


if (loadCondition) { 
require('./moduleA'); 
} 


在 这 个 模块 中 , 是否 加 载 moduleA 是 运行 时 确定 的 。 加载 moduleA 时 可 能 是 阻塞 的 ,也 可 能 导致 
执行 ， 且 只 有 模块 加 载 后 才 会 继续 。 无 论 怎样 ， 模 块 内 部 的 代码 在 moaulea 加 载 前 都 不 能 执行 ， 因 为 
modulea 的 存在 是 后 续 模 块 行为 正确 的 关键 。 

动态 依赖 可 以 支持 更 复杂 的 依赖 关系 ,但 代价 是 增加 了 对 模块 进行 静态 分 析 的 难度 。 


26.1.7 静态 分 析 
模块 中 包含 的 发 送 到 浏览 器 的 JavaScript 代码 经 常会 被 静态 分 析 ， 分 析 工 具 会 检查 代码 结构 并 在 不 
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实际 执行 代码 的 情况 下 推断 其 行为 。 对 静态 分 析 友 好 的 模块 系统 可 以 让 模块 打包 系统 更 容易 将 代码 处 理 
为 较 少 的 文件 。 它 还 将 支持 在 智能 编辑 器 里 智能 自动 完成 。 

更 复杂 的 模块 行为 ， 例 如 动态 依赖 ， 会 导致 静态 分 析 更 困难 。 不 同 的 模块 系统 和 模块 加 载 器 具有 不 
同 层次 的 复杂 度 。 至 于 模块 的 依赖 , 额外 的 复杂 度 会 导致 相关 工具 更 难 预 测 模块 在 执行 时 到 底 需 要 哪些 
依赖 。 


26.1.8 ”循环 依赖 


要 构建 一 个 没有 循环 依赖 的 JavaScript 应 用 程序 几乎 是 不 可 能 的 ， 因 此 包括 CommonJS、AMD 和 
ES6 在 内 的 所 有 模块 系统 都 支持 循环 依赖 。 在 包含 循环 依赖 的 应 用 程序 中 ,模块 加 载 顺 序 可 能 会 出 人 意 
料 。 不 过 ， 只 要 恰当 地 封装 模块 ， 使 它们 没有 副作用 ， 加 载 顺 序 就 应 该 不 会 影响 应 用 程序 的 运行 。 

在 下 面 的 模块 代码 中 ( 其 中 使 用 了 模块 中 立 的 伪 代 码 )， 任 何 模块 都 可 以 作为 入口 模块 ， 即 使 依赖 
图 中 存在 循环 依赖 : 


require('./moduleD'); 
require('./moduleB'); 














































































































console.log('moduleA');} 
require('./moduleA'); 
require('./moduleC'); 


console.log('moduleB');} 
require('./moduleB'); 
require('./moduleD'); 














console.log('moduleC');} 











require('./moduleA'); 
require('./moduleC'); 


console.log('moduleD'); 


修改 主 模块 中 用 到 的 模块 会 改变 依赖 加 载 顺序 。 如 果 modqulea 最 先 加 载 ， 则 会 打印 如 下 输出 ， 
表示 模块 加 载 完 成 时 的 绝对 顺序 : 


moduleB 
moduleC 
moduleD 
moduleA 


以 上 模块 加 载 顺 序 可 以 用 图 26-2 的 依赖 图 来 表示 ， 其 中 加 载 右 会 执行 深度 优先 的 依赖 加 载 : 
如 果 modulec 最 先 加 载 ， 则 会 打印 如 下 输出 ， 这 表示 模块 加 载 的 绝对 顺序 : 


moduleD 
moduleA 
moduleB 
moduleC 


以 上 模块 加 载 顺 序 可 以 通过 图 26-3 的 依赖 图 来 表示 ， 其 中 加 载 器 会 执行 深度 优先 的 依赖 加 载 : 
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require(D) 


moduleB 


require (A) 
require(C) 


ER Cs ae 
moduleA moduleC 
(cached) (cached) 


26.2 
为 按照 模块 模式 提供 必要 的 3 


凑合 的 模块 系统 




















时 装 ，ES6 之 前 的 模块 有 时 候 会 


moduleC 


require(B) 


require(D) 


moduleB 


require(A) 
让 CUT 
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require(D) 
require (B) 
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require(C) 
require (A) 
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ee 
moduleC moduleA 
(cached) (cached) 
图 26-3 
会 使 用 函数 作用 域 和 立即 调用 函数 表达 式 








(IIFE，Immediately Invoked Function Expression ) 将 模块 定义 3 
的 ， 如 下 : 


(function() { 
// 私有 Foo 模块 的 代码 
console.1log('bar'); 








时 装 在 匿名 闭 包 中 。 模 块 定义 是 立即 执行 
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如 果 把 这 个 模块 的 返回 值 赋 给 一 个 变量 ， 那 么 实际 上 就 为 模块 创建 了 命名 空间 : 


Var Foo = (function() { 
console.log('bar'); 
oC 


本 























'bar' 
为 了 暴露 公共 API， 模 块 IFE 会 返回 一 个 对 象 ， 其 属性 就 是 模块 命名 空间 中 的 公共 成 员 : 
Var Foo = (function() { 

return { 


bar: 'baz', 
baz: function() { 
console.log(this.bar); 


console.log(Foo.bar); // 'baz' 
Foo.baz(); // 'baz' 


类 似 地 , 还 有 一 种 模式 叫 作 “泄露 模块 模式 ”( revealing module pattern )。 这 种 模式 只 返回 一 个 对 象 ， 








属性 是 私有 数据 和 成 员 的 引用 : 


var Foo = (function() { 
Var .Dare Daz 
var baz = function() { 


console.1log (bar); 
上 


return { 
bar: bar, 
baz: baz 


console.log(Foo.bar); // 'baz' 








Foo.baz(); Py haz’ 
在 模块 内 部 也 可 以 定义 模块 ， 这 样 可 以 实现 命名 空间 舰 套 : 
var Foo = (function() { 

return { 


bar: 'baz' 
(3 


Foo.baz = (function() { 
return { 
qux: function() { 
console.log('baz'); 
} 
}; 
}) (); 


console.log(Foo.bar); // 'baz' 
Foo.baz.gqux(); LL Da 
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为 了 让 模块 正确 使 用 外 部 的 值 ， 可 以 将 它们 作为 参数 传 给 IIFE: 


Var globalBar = 'baz'; 








Var Foo = (function(bar) { 
return { 
bars bars 
baz: function() { 
console.log(bar); 
} 
二 
}) (globalBar); 


console.log(Foo.bar); // 'baz' 
Foo.baz(); // 'baz' 


为 这 里 的 模块 实现 其 实 就 是 在 创建 JavaScript 对 象 的 实例 , 所 以 完全 可 以 在 定义 之 后 再 扩展 模块 : 


// 原始 的 Foo 
Var Foo = (function(bar) { 
var’ Dar 三 "Da" 











return { 
bar: bar 


}) 0); 


// 扩展 Foo 
Var Foo = (function(FooModule) { 
FooModule.baz = function() { 
console.log(FooModule.bar);} 


} 


return FooModule; 
}) (Foo); 


console.log(Foo.bar); // 'baz' 
Foo.baz(); // 'baz' 


无 论 模块 是 否 存在 ， 配 置 模块 扩展 以 执行 扩展 也 很 有 用 : 


// 扩展 Foo 以 增加 新 方法 
Var Foo = (function(FooModule) { 
FooModule.baz = function() { 

console.log(FooModule.bar); 











} 


return FooModule; 
}) (Foo || {}); 


// 扩展 Foo 以 增加 新 数据 
Var Foo = (function(FooModule) { 
FooModule.bar = 'baz'; 


return FooModule; 
}) (Foo || {}); 


console.log(Foo.bar); // 'baz' 
FEoo .baz () ; ZA Baz 
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当然 ,自己 动 手写 模块 系统 确实 非常 有 意思 ,但 实际 开发 中 并 不 建议 这 人 么 做 ,因为 不 够 可 靠 。 前面 
的 例子 除了 使 用 恶意 的 eval 之 外 并 没有 其 他 更 好 的 动态 加 载 依赖 的 方法 。 因 此 必须 手动 管理 依赖 和 排 
序 。 要 添加 蜡 步 加 载 和 循环 依赖 非常 困难 。 最 后 ， 对 这 样 的 系统 进行 静态 分 析 也 是 个 问题 。 


26.3 ”使 用 ES6 之 前 的 模块 加 载 器 


在 ES6 原生 支持 模块 之 前 ， 使 用 模块 的 JavaScript 代码 本 质 上 是 希望 使 用 默认 没有 的 语言 特性 。 
此 ， 必 须 按 照 符 合 某 种 规范 的 模块 语法 来 编写 代码 ， 另 外 还 需要 单独 的 模块 工具 把 这 些 模块 语法 与 
JavaScript 运行 时 连接 起 来 。 这 里 的 模块 语法 和 连接 方式 有 不 同 的 表现 形式 ， 通 常 需要 在 浏览 器 中 额外 
加 载 库 或 者 在 构建 时 完成 预 处 理 。 


26.3.1 CommonyJS 


CommonJS 规范 概述 了 同步 声明 依赖 的 模块 定义 。 这 个 规范 主要 用 于 在 服务 器 端 实现 模块 化 代码 组 
织 ,但 也 可 用 于 定义 在 浏览 器 中 使 用 的 模块 依赖 。CommonJS 模块 语法 不 能 在 浏览 器 中 直接 运行 。 





























































































































注意 一 般 认为 ,Node.js 的 模块 系统 使 用 了 CommonJS 规 范 ,实际 上 并 不 完全 正确 ,Node.js 
使 用 了 轻微 修改 版 本 的 CommonJS， 因 为 Node.js 主要 在 服务 器 环境 下 使 用 ， 所 以 不 需要 


考虑 网 络 延 迟 问题 。 考 虑 到 一 致 性 ， 本 节 使 用 Node.js 风格 的 模块 定义 语法 。 














CommonJS 模块 定义 需要 使 用 require() 指定 依赖 ， 而 使 用 exports 对 象 定 义 自己 的 公共 API。 
下 面 的 代码 展示 了 简单 的 模块 定义 : 


var moduleB = require('./moduleB'); 








module.exports = { 
stuff: moduleB.doSstuff(); 
于 . 


modulea 通过 使 用 模块 定义 的 相对 路 径 来 指定 自己 对 moduleB 的 依赖 。 什么 是 “模块 定义 ”,， 以 及 
如 何 将 字符 串 解 析 为 模块 ， 完 全 取决 于 模块 系统 的 实现 。 比 如 在 Nodejs 中 , 模块 标识 符 可 能 指向 文件 ， 
也 可 能 指向 包含 index.js 文件 的 目录 。 

请 求 模块 会 加 载 相应 模块 ， 而 把 模块 赋值 给 变量 也 非常 常见 ， 但 赋值 给 变量 不 是 必需 的 。 调 用 
require () 意 味 着 模块 会 原封 不 动 地 加 载 进 来 : 


console.log('moduleA'); 
require('./moduleA'); // "moduleA" 


无 论 一 个 模块 在 require() 中 被 引用 多 少 次 ,模块 永远 是 单 例 。 在 下 面 的 例子 中 ，moduleA 只 会 
被 打印 一 次 。 这 是 因为 无 论 请 求 多 少 次 ，modqulea 只 会 被 加 载 一 次 。 


console.log('moduleA'); 




















Var al = require('./moduleA'); 
Var a2 = require('./moduleA'); 
console.log(al === a2); // true 





模块 第 一 次 加 载 后 会 被 缓存 ， 后 续 加 载 会 取得 缓存 的 模块 (如 下 代码 所 示 )。 模 块 加 载 顺序 由 依赖 
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console.log('moduleA'); 
require('./moduleA'); 
require('./moduleB'); // "moduleA" 
require('./moduleA'); 


在 CommonJS 中 ， 模 块 加 载 是 模块 系统 执行 的 同步 操作 。 因 此 require() 可 以 像 下 面 这 样 以 编程 
方式 戏 入 在 模块 中 : 


console.log('moduleA'); 
if (loadCondition) { 
require('./moduleA'); 


} 

这 里 , moduleA 只 会 在 loadCcondition 求 值 为 true 时 才 会 加 载 。 这 个 加 载 是 同步 的 , 因此 if() 
块 之 前 的 任何 代码 都 会 在 加 载 modaulea 之 前 执行 ， 而 if () 块 之 后 的 任何 代码 都 会 在 加 载 modaulea 之 
后 执行 。 同 样 ， 加 载 顺 序 规则 也 会 适用 。 因 此 ， 如 果 mogdulea 已 经 在 前 面 某 个 地 方 加 载 过 了 ， 这 个 条 
件 require() 就 意味 着 只 暴露 modulea 这 个 命名 空间 而 已 。 

在 上 面 的 例子 中 ,模块 系统 是 Node.js 实现 的 ， 因 此 . /moduleB 是 相对 路 径 ， 指 向 与 当前 模块 位 于 
同一 目录 中 的 模块 目标 。Node.js 会 使 用 regquire() 调 用 中 的 模块 标识 符 字符 串 去 解析 模块 引用 。 在 
Node.js 中 可 以 使 用 绝对 或 相对 路 径 ， 也 可 以 使 用 安装 在 node_modules 目录 中 依赖 的 模块 标识 符 。 我 
们 并 不 关心 这 些 细节 , 重要 的 是 知道 在 不 同 的 CommonJS 实现 中 模块 字符 串 引 用 的 含义 可 能 不 同 。 不 过 ， 
所 有 CommonJS 风格 的 实现 共同 之 处 是 模块 不 会 指定 自己 的 标识 符 , 它们 的 标识 符 由 其 在 模块 文件 层级 
的 位 置 决定 。 

指向 模块 定义 的 路 径 可 能 引用 一 个 目录 ， 也 可 能 是 一 个 JavaScript 文件 。 无 论 是 什么 ， 这 与 本 地 模 
块 实现 无 关 ， 而 moduleB 被 加 载 到 本 地 变量 中 。modqulea 在 module.exports 对 象 上 定义 自己 的 公 
共 接 口 ， 即 foo 属性 。 

如 果 有 模块 想 使 用 这 个 接口 ， 可 以 像 下 面 这 样 导入 它 : 


var moduleA = require('./moduleA'); 



























































































































































console.log(moduleA.stuff),; 


注意 ， 此 模块 不 导出 任何 内 容 。 即 使 它 没有 公共 接口 ， 如 果 应 用 程序 请 求 了 这 个 模块 ， 那 也 会 在 加 















































载 时 执行 这 个 模块 体 。 

module.exports 对 象 非常 灵活 , 有 多 种 使 用 方式 。 如 果 只 想 导 出 一 个 实体 , 可 以 直接 给 module. 
exports 赋值 ， 

module.exports = 'foo'; 





这 样 ， 整 个 模块 就 导出 一 个 字符 串 ， 可 以 像 下 面 这 样 使 用 : 


var moduleA = require('./moduleB'); 





console.log(moduleB); // 'foo' 
导出 多 个 值 也 很 常见 ， 可 以 使 用 对 象 字 面 量 赋值 或 每 个 属性 赋 一 次 值 来 实现 : 
// 等 价 操作 : 























module.exports = { 
A 
I 

六 
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module.exports.a 
module.exports.b 


模块 的 一 个 主要 用 途 是 


class A {} 


四 吧 








管 类 定义 ( 这 里 使 用 ES6 风格 的 类 定义 ， 不 过 ES5 风格 也 兼容 ): 


上 











module.exports = A; 
Var A = require('./moduleA'); 


var a = new A(); 
也 可 以 将 类 实例 作为 导出 值 : 


class A {} 





module.exports = new A(); 


此 外 ，CommonJS 也 支持 动态 依赖 : 


jf (eonmnditionmy. 
var A = require('./moduleA'); 


} 


CommonJS 依赖 几 个 全 局 属性 如 require 和 module.exports。 如 果 想 在 浏览 器 中 使 用 CommonJS 
模块 , 就 需要 与 其 非 原 生 的 模块 语法 之 间 构 筑 “ 桥 梁 ”。 模块 级 代码 与 浏览 器 运行 时 之 间 也 需要 某 种 “ 屏 
障 ”, 因为 没有 封装 的 CommonJS 代码 在 浏览 器 中 执行 会 创建 全 局 变量 。 这 显然 与 模块 模式 的 初衷 相悖。 

常见 的 解决 方案 是 提前 把 模块 文件 打包 好 ， 把 全 局 属性 转换 为 原生 JavaScript 结构 ， 将 模块 代码 封 
装 在 函数 闭 包 中 ， 最 终 只 提供 一 个 文件 。 为 了 以 正确 的 顺序 打包 模块 ， 需 要 事先 生成 全 面 的 依赖 图 。 


26.3.2 ”异步 模块 定义 


CommonJS 以 服务 器 端 为 目标 环境 , 能 够 一 次 性 把 所 有 模块 都 加 载 到 内 存 , 而 异步 模块 定义 (AMD， 
Asynchronous Module Definition ) 的 模块 定义 系统 则 以 浏览 器 为 目标 执行 环境 ， 这 需要 考虑 网 络 延迟 的 
问题 。AMD 的 一 般 策略 是 让 模块 声明 自己 的 依赖 ， 而 运行 在 浏览 器 中 的 模块 系统 会 按 需 获取 依赖 ， 并 
在 依赖 加 载 完成 后 立即 执行 依赖 它们 的 模块 。 

AMD 模块 实现 的 核心 是 用 函数 包装 模块 定义 。 这 样 可 以 防止 声明 全 局 变量 ， 并 允许 加 载 器 库 控 利 
何 时 加 载 模块 。 包 装 函数 也 便于 模块 代码 的 移植 ， 因 为 包装 函数 内 部 的 所 有 模块 代码 使 用 的 都 是 原生 
JavaScript 结构 。 包 装 模 块 的 函数 是 全 局 aefine 的 参数 ， 它 是 由 AMD 加 载 器 库 的 实现 定义 的 。 

AMD 模块 可 以 使 用 字符 串 标识 符 指定 自己 的 依赖 ， 而 AMD 加 载 器 会 在 所 有 依赖 模块 加 载 完毕 后 
立即 调用 模块 工厂 函数 。 与 CommonJS 不 同 ，AMD 支持 可 选 地 为 模块 指定 字符 串 标识 符 。 


// ID 为 'moduleA' 的 模块 定义 。moduleA 依赖 moduleB， 

// moduleB 会 异步 加 载 

define('moduleA', ['moduleB'], function(moduleB) { 
return { 

stuff: moduleB.doStuff();} 

下 

下 


AMD 也 支持 reaquire 和 exports 对 象 ,通过 它们 可 以 在 AMD 模块 工厂 函数 内 部 定义 CommonJS 
风格 的 模块 。 这 样 可 以 像 请 求 模 块 一 样 请 求 它 们 ， 但 AMD 加 载 器 会 将 它们 识别 为 原生 AMD 结构 ， 而 
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不 是 模块 定义 : 
define('moduleA', ['require', 'exports'], function(require, exports) { 


var moduleB = require('moduleB'); 


exports.stuff = moduleB.doSstuff(); 
> 


动态 依赖 也 是 通过 这 种 方式 支持 的 : 
define('moduleA', ['require'], function(require) { 


if (condition) { 
var moduleB = require('moduleB'); 


} 
a 


26.3.3 ”通用 模块 定义 


为 了 统一 CommonJS 和 AMD 生态 系统 ， 通 用 模块 定义 (UMD ，Universal Module Definition ) 规范 
应 运 而 生 。UMD 可 用 于 创建 这 两 个 系统 都 可 以 使 用 的 模块 代码 。 本 质 上 ，UMD 定义 的 模块 会 在 启动 时 
检测 要 使 用 哪个 模块 系统 , 然后 进行 适当 配置 , 并 把 所 有 导 辑 包装 在 一 个 立即 调用 的 函数 表达 式 (IIFE ) 
1。 虽 然 这 种 组 合并 不 完美 ， 但 在 很 多 场景 下 足以 实现 两 个 生态 的 共存 。 
下 面 是 只 包含 一 个 依赖 的 UMD 模块 定义 的 示例 (来源 为 GitHub 上 的 UMD 仓库 ): 


(function (root, factory) { 

































































if (typeof define === 'function' && define.amd) { 
// AMD。 注 册 为 匿名 模块 
define(['moduleB'], factory); 
} else if (typeof module === 'object' && module.exports) { 


// Node。 不 支持 严格 CommonJS 
// 但 可 以 在 Node 这 样 支持 module.exports 的 
// 类 CommonJS 环境 下 使 用 
module.exports = factory (require(' moduleB ')); 
else { 
// 浏览 器 全 局 上 下 文 (root 是 window) 
root.returnExports = factory (root. modulePBP); 
}(this, function (moduleB) { 

// 以 某 种 方式 使 用 moduleB 


// 将 返回 值 作为 模块 的 导出 

// 这 个 例子 返回 了 一 个 对 象 

// 但 是 模块 也 可 以 返回 函数 作为 导出 值 
return {}; 


}) ) ; 
此 模式 有 支持 严格 CommonJS 和 浏览 器 全 局 上 下 文 的 变 体 。 不 应 该 期 望 手写 这 个 包装 函数 , 它 应 该 
由 构建 工具 自动 生成 。 开 发 者 只 需 专注 于 模块 的 内 由 容 ， 而 不 必 关 心 这 些 样板 代码 。 


26.3.4 ”模块 加 载 器 终 将 没落 
随 着 ECMAScript 6 模块 规范 得 到 越 来 越 广泛 的 支持 ,本 节 展 示 的 模式 最 终 会 走向 没落 。 尽 管 如 此 ， 


为 了 了 解 为 什么 选择 设计 决策 ， 了 解 ES6 模块 规范 的 由 来 仍 是 非常 有 用 的 。CommonJS 与 AMD 之 间 的 
冲突 正 是 我 们 现在 享用 的 ECMAScript 6 模块 规范 诞生 的 温床 。 
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26.4 使 用 ES6 模块 


ES6 最 大 的 一 个 改进 就 是 引入 了 模块 规范 。 这 个 规范 全 方位 简化 了 之 前 出 现 的 模块 加 载 锅 ， 原 生 浏 
览 右 支持 意味 着 加 载 器 及 其 他 预 处 理 都 不 再 必要 。 从 很 多 方面 看 , ES6 模块 系统 是 集 AMD 和 CommonJS 
之 大 成 者 。 


26.4.1 ”模块 标签 及 定义 


ECMAScript 6 模块 是 作为 一 整 块 JavaScript 代码 而 存在 的 。 带 有 type="module" 属 性 的 <script> 
标签 会 告诉 浏览 器 相关 代码 应 该 作为 模块 执行 ， 而 不 是 作为 传统 的 脚本 执行 。 模 块 可 以 舱 入 在 网 页 中 ， 
也 可 以 作为 外 部 文件 引入 : 


























<script type="module"> A 
// 模块 代码 总 颖 
</script> 视频 讲解 


<script type="module" src="path/to/myModule.js"></script> 

即使 与 常规 JavaScript 文件 处 理 方式 不 同 ，JavaScript 模块 文件 也 没有 专门 的 内 容 类 型 。 

与 传统 脚本 不 同 ， 所 有 模块 都 会 像 <script defer> 加 载 的 脚本 一 样 按 顺 序 执行 。 解 析 到 <script 
type="module"> 标 签 后 会 立即 下 载 模块 文件 , 但 执行 会 延迟 到 文档 解析 完成 。 无论 对 幅 入 的 模块 代码 ， 
还 是 引入 的 外 部 模块 文件 ， 都 是 这 样 。<script type="module"> 在 页 面 中 出 现 的 顺序 就 是 它们 执行 
的 顺序 。 与 <script defer> 一 样 ， 修 改 模块 标签 的 位 置 ， 无 论 是 在 <head> 还 是 在 <body> 中 ， 只 会 影 
响 文件 什么 时 候 加 载 ， 而 不 会 影响 模块 什么 时 候 加 载 。 

下 面 演示 了 艇 入 模块 代码 的 执行 顺序 : 


<!-- 第 二 个 执行 --> 
<script type="module"></script> 
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<!-- 第 三 个 执行 --> 
<script type="module"></script> 





<!-- 第 一 个 执行 --> 
<script></script> 
另外 ， 可 以 改 为 加 载 外 部 JS 模块 定义 : 
<!-- 第 二 个 执行 --> 


<script type="module" src="module.js"></script> 


<!-- 第 三 个 执行 --> 
<script type="module" src="module.js"></script> 








<!-- 第 一 个 执行 --> 
<script><script> 





也 可 以 给 模块 标签 添加 async 属性 。 这 样 影响 就 是 双重 的 : 不 仅 模 块 执 行 顺 序 不 再 与 <script> 标 
签 在 页 面 中 的 顺序 绑 定 ， 模 块 也 不 会 等 竺 文档 完成 解析 才 执 行 。 不 过 ， 入 口 模块 仍 必 须 等 待 其 依赖 加 载 
完成 。 

与 <script type="module"> 标 签 关联 的 ES6 模块 被 认为 是 模块 图 中 的 入 口 模块 。 一 个 页 面 上 有 
多 少 个 入 口 模 块 没有 限制 , 重复 加 载 同 一 个 模块 也 没有 限制 。 同 一 个 模块 无 论 在 一 个 页 面 中 被 加 载 多 少 
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次 ， 也 不 管 它 是 如 何 加 载 的 ， 实 际 上 都 只 会 加 载 一 次 ， 如 下 面 的 代码 所 示 : 
<!-- moduleA 在 这 个 页 面 上 只 会 被 加 载 一 次 --> 





<script type="module"> 

import './moduleA.js' 
<script> 
<script type="module"> 

import './moduleA.js' 
<script> 
<script type="module" src="./moduleA.js"></script> 
<script type="module" src="./moduleA.js"></script> 


能 和 的 模块 定义 代码 不 能 使 用 import 加 载 到 其 他 模块 。 只 有 通过 外 部 文件 加 载 的 模块 才 可 以 使 用 
import 加 载 。 因 此 ， 风 入 模块 只 适合 作为 入 口 模块 。 


26.4.2 ”模块 加 载 


ECMAScript 6 模块 的 独特 之 处 在 于 , 既 可 以 通过 浏览 器 原生 加 载 , 也 可 以 与 第 三 方 加 载 器 和 构建 工 
具 一 起 加 载 。 有 些 浏览 器 还 没有 原生 支持 ES6 模块 ， 因 此 可 能 还 需要 第 三 方 工 具 。 事实 上 , 很 多 时 候 使 
用 第 三 方 工具 可 能 会 更 方便 。 

完全 支持 ECMAScript 6 模块 的 浏览 器 可 以 从 顶级 模块 加 载 整个 依赖 图 ， 且 是 异步 完成 的 。 浏 览 
会 解析 入 口 模块 ,确定 依赖 ， 并 发 送 对 依赖 模块 的 请 求 。 这 些 文件 通过 网 络 返 回 后 ,浏览 器 就 会 解析 它 
们 的 内 容 ， 确 定 它们 的 依赖 ,如果 这 些 二 级 依赖 还 没有 加 载 ， 则 会 发 送 更 多 请 求 。 这 个 异步 递归 加 载 过 
程 会 持续 到 整个 应 用 程序 的 依赖 图 都 解析 完成 。 解 析 完 依赖 图 ， 应 用 程序 就 可 以 正式 加 载 模块 了 。 

这 个 过 程 与 AMD 风格 的 模块 加 载 非常 相似 。 模 块 文件 按 需 加 载 ， 且 后 续 模 块 的 请 求 会 因为 每 个 依 
赖 模 块 的 网 络 延迟 而 同步 延迟 。 即 ， 如 果 modqulea 依赖 modauleB, moduleB 依赖 modulec。 浏览 器 在 
对 moduleB 的 请 求 完成 之 前 并 不 知道 要 请 求 modaulec。 这 种 加 载 方式 效率 很 高 ， 也 不 需要 外 部 工具 ， 
但 加 载 大 型 应 用 程序 的 深度 依赖 图 可 能 要 花费 很 长 时 间 。 


26.4.3 ”模块 行为 


ECMAScript 6 模块 借用 了 CommonJS 和 AMD 的 很 多 优秀 特性 。 下 面 简单 列举 一 些 。 
口 模块 代码 只 在 加 载 后 执行 。 

口 模块 只 能 加 载 一 次 。 

口 模块 是 单 例 。 

口 模块 可 以 定义 公共 接口 ， 其 他 模块 可 以 基于 这 个 公共 接口 观察 和 交互 。 
口 模块 可 以 请 求 加 载 其 他 模块 。 

口 支持 循环 依赖 。 

ES6 模块 系统 也 增加 了 一 些 新 行为 。 

口 ES6 模块 默认 在 严格 模式 下 执行 。 

口 ES6 模块 不 共享 全 局 命名 空间 。 

口 模块 顶级 this 的 值 是 undaefinea (常规 脚本 中 是 window )。 

口 模块 中 的 var 声明 不 会 添加 到 window 对 象 。 

口 ES6 模块 是 异步 加 载 和 执行 的 。 
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浏览 器 运行 时 在 知道 应 该 把 某 个 文件 当成 模块 时 ,会 有 条 件 地 按照 上 述 ECMAScript 6 模块 行为 来 施 
加 限制 。 与 <script type="module"> 关 联 或 者 通过 import 语句 加 载 的 JavaScript 文件 会 被 认定 为 模块 。 


26.4.4 “模块 导出 


ES6 模 块 的 公共 导出 系统 与 CommonJS 非常 相似 。 控制 模块 的 哪些 部 分 对 外 部 可 见 的 是 export 关 
键 字 。BS6 模 块 支持 两 种 导出 : 命名 导出 和 默认 导出 。 不 同 的 导出 方式 对 应 不 同 的 导 和 方式， 下 一 节 会 
介绍 导入 。 

export 关键 字 用 于 声明 一 个 值 为 命名 导出 。 导 出 语句 必须 在 模块 项 级 ， 不 能 由 套 在 某 个 块 中 ， 

// 允许 


export ... 
























































// 不 允许 
if (condition) { 
export ... 


} 
导出 值 对 模块 内 部 JavaScript 的 执行 没有 直接 影响 ， 因 此 export 语句 与 导出 值 的 相对 位 置 或 者 
export 关键 字 在 模块 中 出 现 的 顺序 没有 限制 。export 语句 甚至 可 以 出 现在 它 要 导出 的 值 之 前 : 


// 允许 
COnst T0000 
export { foo }; 





























// 允许 
export const fe60 = 人 Ge 





// 允许 ， 但 应 该 避免 
export { foo }; 
onst LO Er "EO 


命名 导出 ( named export ) 就 好 像 模块 是 被 导出 值 的 容器 。 行 内 命名 导出 ， 顾 名 思 义 ， 可 以 在 同一 
行 执行 变量 声明 。 下 面 展 示 了 一 个 声明 变量 同时 又 导出 变量 的 例子 。 外 部 模块 可 以 导入 这 个 模块 ， 而 
foo 将 成 为 这 个 导入 模块 的 一 个 属性 : 
































export "const. £00 三 人 人 GD 
变量 声明 跟 导 出 可 以 不 在 一 行 。 可 以 在 export 子 句 中 执行 声明 并 将 标识 符 导 出 到 模块 的 其 他 地 方 : 
const foo = 'foo'; 


export { foo }; 


导出 时 也 可 以 提供 别名 ， 别 名 必须 在 export 子 句 的 大 括号 语法 中 指定 。 因 此 ， 声 明 值 、 导 出 值 和 
为 导出 值 提 供 别 名 不 能 在 一 行 完成 。 在 下 面 的 例子 中 ， 导 入 这 个 模块 的 外 部 模块 可 以 使 用 myFoo 访问 
导出 的 值 : 


eonst. f60,= ‘E60. 
export { foo as myFoo }; 


因为 ES6 命名 导出 可 以 将 模块 作为 容器 , 所 以 可 以 在 一 个 模块 中 声明 多 个 命名 导出 。 导 出 的 值 可 以 
在 导出 语句 中 声明 ， 也 可 以 在 导出 之 前 声明 : 




































































export const foo = 'foo'; 
export const bar = 'bar'; 
export const baz = 'baz'; 
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考虑 到 导出 多 个 值 是 常见 的 操作 ，ES6 模块 也 支持 对 导出 声明 分 组 ， 可 以 同时 为 部 分 或 全 部 导出 值 
指定 别名 : 


const foo "OO 
const bar Car 
const baz = 'baz'; 
export { foo, bar as myBar, baz }; 


默认 导出 ( default export ) 就 好 像 模 块 与 被 导出 的 值 是 一 回 事 。 默认 导出 使 用 aefault 关键 字 将 一 
个 值 声明 为 默认 导出 ， 每 个 模块 只 能 有 一 个 默认 导出 。 重 复 的 默认 导出 会 导致 SyntaxError。 
下 面 的 例子 定义 了 一 个 默认 导出 ， 外 部 模块 可 以 导入 这 个 模块 ， 而 这 个 模块 本 身 就 是 foo 的 值 : 


const T0060 = "fo00"; 
export default foo; 


另外 ，ES6 模块 系统 会 识别 作为 别名 提供 的 aefault 关键 字 。 此 时 ， 虽 然 对 应 的 值 是 使 用 命名 语 
法 导出 的 ， 实 际 上 则 会 成 为 默认 导出 : 


const oo0 =: "to0"; 


1 1 










































































// 等 同 于 export default foo; 
export { foo as default }; 


因为 命名 导出 和 默认 导出 不 会 冲突 ， 所 以 ES6 支持 在 一 个 模块 中 同时 定义 这 两 种 导出 : 


const foo 
const bar 





"OD 
6 


export { bar }; 
export default foo; 


这 两 个 export 语句 可 以 组 合 为 一 行 : 


const foo 
const bar 


FOO 
'bar'; 


export { foo as default, bar }; 

ES6 规范 对 不 同形 式 的 export 语句 中 可 以 使 用 什么 不 可 以 使 用 什么 规定 了 限制 。 某 些 形式 允许 声 
明和 赋值 ， 某 些 形式 只 允许 表达 式 ， 而 某 些 形式 则 只 允许 简单 标识 符 。 注 意 ， 有 的 形式 使 用 了 分 号 ， 有 
的 则 没有 : 

// 命名 行内 导出 





























export const baz = 'baz'; 

export const foo = 'foo', bar = 'bar'; 
export function foo() {} 

export function* foo() {} 

export class Foo {} 


// 命名 子 向导 出 
export { foo }; 
export { foo, bar }; 


export { foo as myFoo, bar }; 
// 默认 导出 

export default 'foo'; 

export default 123; 





export default /[a-z]*/; 
export default { foo: 'foo' }; 
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export { foo, bar as default }; 
export default foo 

export default function() {} 
export default function foo() {} 
export default function*() {} 
export default class {} 


// 会 导致 错误 的 不 同形 式 : 


// 行内 默认 导出 中 不 能 出 现 变量 声明 


export default const foo = 'bar'; 


// 只 有 标识 符 可 以 出 现在 export 子 向 中 
export { 123 as foo } 


// 别名 只 能 在 export 子 负 中 出 现 


export const foo = 'foo' as myFoo; 


注意 什么 可 以 或 不 可 以 与 exprot 关键 字 出 现在 同一 行 可 能 很 难 记 住 。 一 般 来 说 ， 上 声 
明 、 赋 值 和 导出 标识 符 最 好 分 开 。 这 样 就 不 容易 摘 错 了 ， 同 时 也 可 以 让 export 语句 集中 


利 一 关 ， 





26.4.5 “模块 导入 


模块 可 以 通过 使 用 import 关键 字 使 用 其 他 模块 导出 的 值 。 与 export 类 似 ，import 必须 出 现在 
模块 的 顶级 : 
// 夺 许 


import ... 








// 不 允许 
if (condition) { 
import ... 


} 
import 语句 被 提升 到 模块 顶部 。 因 此 , 与 export 关键 字 类 似 ，import 语句 与 使 用 导入 值 的 语句 
的 相对 位 置 并 不 重要 。 不 过 ,还 是 推荐 把 导入 语句 放 在 模块 顶部 。 


// 允许 
import { foo } from './fooModule.js'; 
console.log(foo); // 'foo' 








// 允许 ,但 应 该 避免 
console.log(foo); // 'foo' 
import { foo } from './fooModule.js'; 


模块 标识 符 可 以 是 相对 于 当前 模块 的 相对 路 径 , 也 可 以 是 指向 模块 文件 的 绝对 路 径 。 它 必须 是 纯 字 
符 串 ， 不 能 是 动态 计算 的 结果 。 例 如 ， 不 能 是 拼接 的 字符 串 。 
如 果 在 浏览 器 中 通过 标识 符 原 生 加 载 模块 ， 则 文件 必须 带 有 ,js 扩展 名 , 不 然 可 能 无 法 正确 解析 。 不 
过 ， 如 果 是 通过 构建 工具 或 第 三 方 模块 加 载 器 打包 或 解析 的 ES6 模块 ， 则 可 能 不 需要 包含 文件 扩展 名 。 


// 解析 为 /components/bar.js 
JIDOLEY.... FEO ©. /Da 
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// 解析 为 /bar.js 


IMOort sionm ”sh HbA je 


// 解析 为 /bar.js 


import .,. from */bar.js'; 



































不 是 必须 通过 导出 的 成 员 才 能 导入 模块 。 如 果 不 需 要 模块 的 特定 导出 , 但 仍 想 加 载 和 执行 模块 以 利 




















用 其 副作用 ， 可 以 只 通过 路 径 加 载 它 : 


import './foo.js'; 








导入 对 模块 而 言 是 只 读 的 ,实际 上 相当 于 const 声明 的 变量 。 在 使 用 * 执 行 批量 导入 时 ， 赋 值 给 别 
名 的 命名 导出 就 好 像 使 用 object . freeze () 冻结 过 一 样 。 直 接 修 改 时 出 的 值 是 不 可 能 的 ， 但 可 以 修改 
导出 对 象 的 属性 。 同 样 ， 也 不 能 给 导出 的 集合 添加 或 删除 导出 的 属性 。 要 修改 导出 的 值 ， 必 须 使 用 有 内 






































部 变量 和 属性 访问 权限 的 导出 方法 。 
import foo, * as Foo './foo.js'; 
foo = 'foo'; // 错误 
Foo.foo = 'foo'; // 错误 


foo.bar = 'bar'; // 允许 








命名 导出 和 默认 导出 的 区 别 也 反映 在 它们 的 导入 上 。 命 名 导出 可 以 使 用 * 批 量 获取 并 赋值 给 保存 导 











出 集合 的 别名 ， 而 无 须 列 出 每 个 标识 符 : 


onst fo00 sf00", 3 
export { foo, bar, baz } 
import * as Foo from './foo.js'; 





console.log(Foo.foo); // foo 
console.log(Foo.bar); // bar 
console.log(Foo.baz); // baz 


要 指名 导入 ， 需 要 把 标识 符 放 在 import 子 句 中 。 使 用 import 子 句 可 以 为 导入 的 值 指定 别名 : 


import { foo, bar, baz as myBaz } from './foo.js'; 











console.1log (foo); // foo 
console.log (bar); // bar 
console.log(myBaz); // baz 











默认 导出 就 好 像 整个 模块 就 是 导出 的 值 一 样 。 可 以 使 用 aefault 关键 字 并 提供 别名 来 导入 。 也 可 








以 不 使 用 大 括号 ， 此 时 指定 的 标识 符 就 是 默认 导出 的 别名 : 


// 等 效 
import { default as foo } from './foo.js'; 
import foo from './foo.js'; 








如 果 模 块 同 时 导出 了 命名 导出 和 默认 导出 ， 则 可 以 在 import 语句 中 同时 取得 它们 。 可 以 依次 列 出 





特定 导出 的 标识 符 来 取得 ， 也 可 以 使 用 * 来 取得 : 


import foo, { bar, baz } from './foo.js'; 
import { default as foo, bar, baz } from './foo.js'; 


import foo,. * as Foo from ',./foo0.j8'; 
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注意 本 书写 作 时 ， 有 一 个 动态 导入 模块 的 提案 处 在 第 三 阶段 ( stage 3 )， 参 见 GitHub 上 


的 tc39/proposals 页 面 。 





26.4.6 ”模块 转移 导出 


模块 导入 的 值 可 以 直接 通过 管道 转移 到 导出 。 此 时 , 也 可 以 将 默认 导出 转换 为 命名 导出 , 或 者 相反 。 
如 果 想 把 一 个 模块 的 所 有 命名 导出 集中 在 一 块 ， 可 以 像 下 面 这 样 在 barjs 中 使 用 * 导 出 : 


expOort. * from /foO0. Je 


这 样 ，foojs 中 的 所 有 命名 导出 都 会 出 现在 导入 barjs 的 模块 中 。 如 果 foo.js 有 默认 导出 ， 则 该 语法 
会 忽略 它 。 使 用 此 语法 也 要 注意 导出 名 称 是 否 冲 突 。 如 果 foo.js 导出 baz ，barjs 也 导出 baz， 则 最 终 导 
出 的 是 barjs 中 的 值 。 这 个 “ 重 写 ” 是 静默 发 生 的 : 
















































































foo.js 

export const baz = 'origin:foo'; 
bar.js 

SxBOrt w ,from EOG. Te 

export const baz = 'origin:bar'; 
main.js 


import { baz } from './bar.js'; 
console.log(baz); // origin:bar 


此 外 也 可 以 明确 列 出 要 从 外 部 模块 转移 本 地 导出 的 值 。 该 语法 支持 使 用 别名 : 

export { foo, bar as myBar } from './foo.js'; 

类 似 地 ， 外 部 模块 的 默认 导出 可 以 重用 为 当前 模块 的 默认 导出 : 

export { default } from './foo.js'; 

这 样 不 会 复制 导出 的 值 ， 只 是 把 导入 的 引用 传 给 了 原始 模块 。 在 原始 模块 中 ， 导 入 的 值 仍然 是 可 用 
的 ， 与 修改 导入 相关 的 限制 也 适用 于 再 次 导出 的 导入 。 

在 重新 导出 时 ,还 可 以 在 导入 模块 修改 命名 或 默认 导出 的 角色 。 比 如 ， 可 以 像 下 面 这 样 将 命名 导出 
指定 为 默认 导出 : 


export { foo as default } from './foo.js'; 

























































































26.4.7 ”工作 者 模块 


ECMAScript 6 模块 与 Worker 实例 完全 兼容 。 在 实例 化 时 , 可 以 给 工作 者 传人 一 个 指向 模块 文件 的 
路 径 ， 与 传人 常规 脚本 文件 一 样 。worker 构造 函数 接收 第 二 个 参数 ， 用 于 说 明 传 和 的 是 模块 文件 。 
下 面 是 两 种 类 型 的 worker 的 实例 化 行为 : 


// 第 二 个 参数 默认 为 { type: 'classic' } 
const scriptWorker = new Worker('scriptWorker.js'); 



































const moduleWorker = new Worker('moduleWorker.js', { type: 'module' }); 


在 基于 模块 的 工作 者 内 部 ，self.importScripts () 方 法 通常 用 于 在 基于 脚本 的 工作 者 中 加 载 外 
部 脚本 ， 调 用 它 会 抛 出 错误 。 这 是 因为 模块 的 import 行为 包含 了 importScripts ()。 
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26.4.8 向 后 兼容 
































ECMAScript 模块 的 兼容 是 个 渐进 的 过 程 ， 能 够 同时 兼容 支持 和 不 文 持 的 浏览 需 对 早期 采用 者 是 有 











价值 的 。 对 于 想 要 尽 可 能 在 浏览 器 中 原生 使 用 ECMAScript 6 模块 的 用 户 ， 可 以 提供 两 个 版 本 






































的 代码 : 


基于 模块 的 版 本 与 基于 脚本 的 版 本 。 如 果 嫌 麻烦 ， 可 以 使 用 第 三 方 模块 系统 (如 SystemJS ) 或 在 构建 时 





将 ES6 模块 进行 转译 ， 这 都 是 不 错 的 方案 。 





























第 一 种 方案 涉及 在 服务 器 上 检查 浏览 器 的 用 户 代理 ,与 支持 模块 的 浏览 器 名 单 进行 匹配 ， 然 后 基于 





匹配 结果 决定 提供 哪个 版 本 的 JavaScript 文件 。 这 个 方法 不 太 可 靠 ， 而且 比较 麻烦 ,不 推荐 。 更 好 、 更 














优雅 的 方案 是 利用 脚本 的 type 属性 和 nomodule 属性 。 
































浏览 器 在 遇 到 <script> 标 签 上 无 法 识别 的 type 属性 时 会 拒绝 执行 其 内 容 。 对 于 不 支持 模块 的 浏 
览 锅 ， 这 意味 着 <script type="module"> 不 会 被 执行 。 因 此 ， 可 以 在 <script type="module"> 标 


签 旁 边 添加 一 个 回 退 <script> 标 签 ; 
// 不 支持 模块 的 浏览 器 不 会 执行 这 里 的 代码 
<script type="module" src="module.js"></script> 


// 不 支持 模块 的 浏览 器 会 执行 这 里 的 代码 


HCITDE STeS Cript.r eo SeriDts 

当然 ， 这样 一 来 支持 模块 的 浏览 器 就 有 麻烦 了 。 此 时 ， 前面 的 代码 会 执行 两 次 ， 显然 这 不 是 
的 结果 。 为 了 避免 这 种 情况 ， 原 生 支 持 ECMAScript 6 模块 的 浏览 需 也 会 识别 nomodule 属性 。 
知 支持 ES6 模块 的 浏览 如 不 执行 脚本 。 不 支持 模块 的 浏览 带 无 法 识别 该 属性 ， 从 而 忽略 这 个 属 怕 




















我 们 想 要 
此 属性 通 
的 存在 。 





因此 ， 下 面 代 码 会 生成 一 个 设置 ,在 这 个 设置 中 ,支持 模块 和 不 支持 模块 的 浏览 器 都 只 会 执行 一 段 











脚本 : 


// 支持 模块 的 浏览 器 会 执行 这 段 脚 本 
// 不 支持 模块 的 浏览 器 不 会 执行 这 段 脚本 


<script type="module" src="module.js"></script> 
// 支持 模块 的 浏览 器 不 会 执行 这 段 脚本 
// 不 支持 模块 的 浏览 器 会 执行 这 段 脚 本 


<script nomodule src="script.js"></script> 


26.5 小结 




















模块 模式 是 管理 复杂 性 的 永恒 工具 。 开 发 者 可 以 通过 它 创建 逻辑 彼此 独立 的 代码 段 , 在 这 些 代 码 段 


























之 间 声 明 依赖 ,并 将 它们 连接 在 一 起 。 此 外 ,这 种 模式 也 是 经 证 明 能 够 优雅 扩展 到 任意 复杂 度 
的 方案 。 























且 跨 平台 


多 年 以 来 ，CommonJS 和 AMD 这 两 个 分 别针 对 服务 需 端 环境 和 受 延 迟 限制 的 客户 端 环境 的 模块 系 
统 长 期 分 裂 。 两 个 系统 都 获得 了 爆炸 性 增强 ， 但 为 它们 编写 的 代码 则 在 很 多 方面 不 一 致 ， 经 常 也 会 带 有 
宛 余 的 样板 代码 。 而 且 ， 这 两 个 系统 都 没有 在 浏览 器 中 实现 。 缺乏 兼容 导致 出 现 了 相关 工具 ， 从 而 让 在 









































浏览 需 中 实现 模块 模式 成 为 可 能 。 








ECMAScript 6 规范 重新 定义 了 浏览 器 模块 , 集 之 前 两 个 系统 之 长 于 一 身 , 并 通过 更 简单 的 声明 性 语 
法 暴露 出 来 。 浏 览 器 对 原生 模块 的 支持 越 来 越 好 ， 但 也 提供 了 稳健 的 工具 以 实现 从 不 支持 到 支持 ES6 























模块 的 过 渡 。 


第 局 
工作 者 线程 


本 章 内 容 

口 工作 者 线程 简介 

口 使 用 专门 的 工作 者 线程 执行 后 台 任 务 
口 使 用 共享 的 工作 者 线程 

口 通过 服务 工作 者 线程 管理 请 求 























前 端 开发 者 常 说 :“JavaScript 是 单线 程 的 。” 这 种 说 法 虽然 有 些 简单 ,但 描述 了 JavaScript 在 浏览 
中 的 一 般 行为 。 因 此 ， 作 为 帮助 Web 开发 人 员 理 解 JavaScript 的 教学 工具 ， 它 非常 有 用 。 

单线 程 就 意味 着 不 能 像 多 线程 语言 那样 把 工作 委托 给 独立 的 线程 或 进程 去 做 。JavaScript 的 单线 程 
可 以 保证 它 与 不 同 浏览 器 API 兼 容 。 假 如 JavaScript 可 以 多 线程 执行 并 发 更 改 , 那么 像 DOM 这 样 的 API 
就 会 出 现 问题 。 因 此 ，POSIX 线程 或 Java 的 Thread 类 等 传统 并 发 结构 都 不 适合 JavaScript。 

而 这 也 正 是 工作 者 线程 的 价值 所 在 : 允许 把 主线 程 的 工作 转嫁 给 独立 的 实体 ， 而 不 会 改变 现 有 的 单 
线程 模型 。 虽 然 本 章 要 介绍 的 各 种 工作 者 线程 有 不 同 的 形式 和 功能 ， 但 它们 的 共同 的 特点 是 都 独立 于 
JavaScript 的 主 执行 环境 。 


27.1 工作 者 线程 简介 


JavaScript 环境 实际 上 是 运行 在 托管 操作 系统 中 的 虚拟 环境 。 在 浏览 器 中 每 打开 一 个 页 面 ， 就 会 分 
配 一 个 它 自己 的 环境 。 这 样 ， 每 个 页 面 都 有 自己 的 内 存 、 事 件 循 环 、DOM， 等 等 。 每 个 页 面 就 相当 于 
一 个 沙 盒 ， 不 会 干扰 其 他 页 面 。 对 于 浏览 器 来 说 ， 同 时 管理 多 个 环境 是 非常 简单 的 ， 因 为 所 有 这 些 环境 
都 是 并 行 执行 的 。 

使 用 工作 者 线程 ,浏览 器 可 以 在 原始 页 面 环 境 之 外 再 分 配 一 个 完全 独立 的 二 级 子 环境 。 这 个 子 环境 
不 能 与 依赖 单线 程 交 互 的 API (如 DOM ) 互 操作 ， 但 可 以 与 父 环境 并 行 执行 代码 。 


27.1.1 工作 者 线程 与 线程 


作为 介绍 ,通常 需要 将 工作 者 线程 与 执行 线程 进行 比较 。 在 许多 方面 ， 这 是 一 个 恰当 的 比较 ， 因 为 
工作 者 线程 和 线程 确实 有 很 多 共同 之 处 。 
口 工作 者 线程 是 以 实际 线程 实现 的 。 例 如， Blink 浏览 器 引擎 实现 工作 者 线程 的 workerThreaa 就 
对 应 着 底层 的 线程 。 
口 工作 者 线程 并 行 执行 。 虽 然 页 面 和 工作 者 线程 都 是 单线 程 JavaScript 环境 ,每 个 环境 中 的 指令 则 
可 以 并 行 执行 。 
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口 工作 者 线程 可 以 共享 某 些 内 存 。 工 作者 线程 能 够 使 用 sharedArrayBuffer 在 多 个 环境 间 共 享 
内 容 。 虽 然 线程 会 使 用 锁 实 现 并 发 控制 ， 但 JavaScript 使 用 Atomics 接口 实现 并 发 控制 。 

工作 者 线程 与 线程 有 很 多 类 似 之 处 ， 但 也 有 重要 的 区 别 。 

口 工作 者 线程 不 共享 全 部 内 存 。 在 传统 线程 模型 中 , 多 线程 有 能 力 读 写 共 享 内 存 空间 。 除 了 shared- 

ArrayBuffer 外 ， 从 工作 者 线程 进出 的 数据 需要 复制 或 转移 。 

口 工作 者 线程 不 一 定 在 同一 个 进程 里 。 通 常 ， 一 个 进程 可 以 在 内 部 产生 多 个 线程 。 根 据 浏 览 器 引 
擎 的 实现 ， 工 作者 线程 可 能 与 页 面 属于 同一 进程 ， 也 可 能 不 属于 。 例 如 ，Chrome 的 Blink 引擎 对 

共享 工作 者 线程 和 服务 工作 者 线程 使 用 独立 的 进程 。 

口 创建 工作 者 线程 的 开销 更 大 。 工 作者 线程 有 自己 独立 的 事件 循环 、 全 局 对 象 、 事 件 处 理 程序 和 
其 他 JavaScript 环境 必需 的 特性 。 创 建 这 些 结构 的 代价 不 容 忽 视 
无 论 形式 还 是 功能 ， 工 作者 线程 都 不 是 用 于 替代 线程 的 。HTML Web 工作 者 线程 规范 是 这 样 说 的 : 
工作 者 线程 相对 比较 重 ， 不 建议 大 量 使 用 。 例如， 对 一 张 400 万 像素 的 图 片 ， 为 每 个 像素 
都 启动 一 个 工作 者 线程 是 不 合适 的 。 通 常 ， 工 作者 线程 应 该 是 长 期 运行 的 ， 启 动 成 本 比较 高 ， 

每 个 实例 占用 的 内 存 也 比较 大 。 






























































27.1.2 ”工作 者 线程 的 类 型 


Web 工作 者 线程 规范 中 定义 了 三 种 主要 的 工作 者 线程 : 专用 工作 者 线程 、 共 享 工作 者 线程 和 服务 工 
作者 线程 。 现 代 浏 览 器 都 支持 这 些 工 作者 线程 。 








注意 ”Web 工作 者 线程 规范 参见 HTML Standard 网 站 。 





1. 专用 工作 者 线程 

专用 工作 者 线程 ， 通 常 简称 为 工作 者 线程 、Web Worker 或 Worker， 是 一 种 实用 的 工具 ， 可 以 让 脚 
本 单独 创建 一 个 JavaScript 线程 ， 以 执行 委托 的 任务 。 专 用 工作 者 线程 ， 顾 名 思 义 ， 只 能 被 创建 它 的 页 
面 使 用 。 
2. 共享 工作 者 线程 
共享 工作 者 线程 与 专用 工作 者 线程 非常 相似 。 主要 区 别 是 共享 工作 者 线程 可 以 被 多 个 不 同 的 上 下 文 
使 用 ,包括 不 同 的 页 面 。 任 何 与 创建 共享 工作 者 线程 的 脚本 同 源 的 脚本 ， 都 可 以 向 共享 工作 者 线程 发 送 
消息 或 从 中 接收 消息 。 

3. 服务 工作 者 线程 

服务 工作 者 线程 与 专用 工作 者 线程 和 共享 工作 者 线程 截然 不 同 。 它 的 主要 用 途 是 拦截 、 重 定向 和 修 
改 页 面 发 出 的 请 求 ， 充 当 网 络 请 求 的 仲裁 者 的 角色 。 


















































注意 还 有 其 他 一 些 工作 者 线程 规范 ,比如 ChromeWorker 或 Web Audio API, 但 它们 并 未 


得 到 广泛 支持 ， 或 者 定位 于 小 众 应 用 程序 ， 因 此 本 书 没 有 包含 与 之 相关 的 内 容 。 
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27.1.3 WorkerGlobalScope 


在 网 页 上 , wingdow 对 象 可 以 向 运行 在 其 中 的 脚本 暴露 各 种 全 局 变量 。 在 工作 者 线程 内 部 , 没有 wingow 
的 概念 。 这 里 的 全 局 对 象 是 WorkerGlobalscope 的 实例 ， 通 过 self 关键 字 暴 露出 来 。 

1. WorkerGlobalSscope 属性 和 方法 

self 上 可 用 的 属性 是 wingdow 对 象 上 属性 的 严格 子 集 。 其 中 有 些 属性 会 返回 特定 于 工作 者 线程 的 
版 本 。 
口 navigator: 返回 与 工作 者 线程 关联 的 WorkerNavigator。 
口 self: 返回 WorkerGlobalScope 对 象 。 
口 location: 返回 与 工作 者 线程 关联 的 WorkerLocation。 
口 performance: 返回 (只 包含 特定 属性 和 方法 的 ) Performance 对 象 。 
口 console: 返回 与 工作 者 线程 关联 的 console 对 象 ; 对 API 没 有 限制 。 
口 caches: 返回 与 工作 者 线程 关联 的 cachestorage 对 象 ; 对 API 没 有 限制 。 
口 indexedDB: 返回 IDBFactory 对 象 。 
口 isSecurecontext: 返回 布尔 值 ， 表 示 工 作者 线程 上 下 文 是 否 安全 。 
口 origin: 返回 WorkerGlobalScope 的 源 。 

类 似 地 ,self 对 象 上 暴露 的 一 些 方法 也 是 window 上 方法 的 子 集 .这 些 self 上 的 方法 也 与 window 
上 对 应 的 方法 操作 一 有 
DQ atob() 


DQ btoa() 
口 clearIinterval () 
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DQ clearTimeout () 

口 createImageBitmap () 
口 fetch () 

口 setInterval () 

口 setTimeout () 


WorkerGlobalScope 还 增加 了 新 的 全 局 方法 importscripts() ， 只 在 工作 者 线程 内 可 用 。 本 章 
稍 后 会 介绍 该 方法 。 
2. WorkerGlobalScope 的 子 类 
实际 上 并 不 是 所 有 地 方 都 实现 了 WorkerGlobalscope。 每 种 类 型 的 工作 者 线程 都 使 用 了 自己 特定 
的 全 局 对 象 ， 这 继承 自 workerGlobalSscope。 
口 专用 工作 者 线程 使 用 DedicatedworkerGlobalScope。 
口 共享 工作 者 线程 使 用 sharedWorkerGlobalScope。 
口 服务 工作 者 线程 使 用 serviceworkerGlobalScope。 
本 章 稍 后 会 在 这 些 全 局 对 象 对 应 的 小 节 中 讨论 其 差异 。 


27.2 专用 工作 者 线程 

专用 工作 者 线程 是 最 简单 的 Web 工作 者 线程 ,网 页 中 的 脚本 可 以 创建 专用 工作 者 线程 来 执行 在 页 面 
线程 之 外 的 其 他 任务 。 这 样 的 线程 可 以 与 父 页 面 交换 信息 、 发 送 网 络 请 求 、 执 行文 件 输入 /输出 、 进 行 密 
集 计算 、 处 理 大 量 数据 ， 以 及 实现 其 他 不 适合 在 页 面 执行 线程 里 做 的 任务 〈 否则 会 导致 页 面 响应 迟钝 )。 
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注意 ”在 使 用 工作 者 线程 时 ,脚本 在 哪里 执行 、 在 哪里 加 载 是 非常 重要 的 概念 。 除非 另 有 





说 明 ， 否 则 本 章 假 定 main.js 是 从 https://example.com 域 的 根 路 径 加 载 并 执行 的 顶级 脚本 。 


27.2.1 专用 工作 者 线程 的 基本 概念 


可 以 把 专用 工作 者 线程 称 为 后 台 脚 本 ( background script )。JavaScript 线程 的 各 个 方面 ,包括 生命 周 
期 管理 、 代 码 路 径 和 输入 /输出 ， 都 由 初始 化 线程 时 提供 的 脚本 来 控制 。 该 脚本 也 可 以 再 请 求 其 他 脚本 ， 
日 一 个 线程 总 是 从 一 个 脚本 源 开始 。 
1. 创建 专用 工作 者 线程 
创建 专用 工作 者 线程 最 常见 的 方式 是 加 载 JavaScript 文件 。 把 文件 路 径 提 供给 Worker 构造 函数 ， 
然后 构造 函数 再 在 后 台 异 步 加 载 脚 本 并 实例 化 工作 者 线程 。 传 给 构造 函数 的 文件 路 径 可 以 是 多 种 形式 。 
下 面 的 代码 演示 了 如 何 创 建 空 的 专用 工作 者 线程 : 
emptyWorker.js 
// 空 的 JS 工作 者 线程 文件 
main.js 
console.log(location.href); // "https://example.com/" 


const worker = new Worker(location.href + '‘'emptyWorker.js'); 
console.log (worker); // Worker {} 


这 个 例子 非常 简单 ， 但 涉及 几 个 基本 概念 。 

口 emptyWorkerjs 文件 是 从 绝对 路 径 加 载 的 。 根 据 应 用 程序 的 结构 ， 使 用 绝对 URL 经 常 是 多 余 的 。 
口 这 个 文件 是 在 后 台 加 载 的 ， 工 作者 线程 的 初始 化 完全 独立 于 main.js。 

口 工作 者 线程 本 身 存 在 于 一 个 独立 的 JavaScript 环境 中 ,因此 main.js 必须 以 Worker 对 象 为 代理 实 
现 与 工作 者 线程 通信 。 在 上 面 的 例子 中 ， 该 对 象 被 赋值 给 了 worker 变量 。 

口 虽然 相应 的 工作 者 线程 可 外 ee 但 该 worker 对 象 已 在 原始 环境 中 可 用 了 。 























































































































前 面 的 例子 可 修改 为 使 用 相对 路 径 。 不 过 ， 这 要 求 main.js 必须 与 emptyWorkerjs 在 同一 个 路 径 下 : 
Const worker = new Worker('./emptyWorker.js'); 
console.1log (worker); // Worker {} 


2. 工作 者 线程 安全 限制 
工作 者 线程 的 脚本 文件 只 能 从 与 父 页 面相 同 的 源 加 载 。 从 其 他 源 加 载 工 作者 线程 的 脚本 文件 会 导致 
错误 ， 如 下 所 示 : 


// 党 试 基于 https://example.com/worker.js 创建 工作 者 线程 
const sameOriginWorker = new Worker('./worker.js'); 














// 尝试 基 于 https://untrusted.com/worker.js 创建 工作 者 线程 
const remoteOriginWorker = new Worker('https://untrusted.com/worker.js'); 


// Error: Uncaught DOMException: Failed to construct 'Worker': 


// Script at https://untrusted.com/main.js cannot be accessed 
// from origin https://example.com 


注意 不 能 使 用 非 同 源 脚本 创建 工作 者 线程 ， 并 不 影响 执行 其 他 源 的 脚本 。 在 工作 者 线程 


内 部 ,使 用 importScripts ( i 本 章 稍 后 会 介绍 。 
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基于 加 载 脚本 创建 的 工作 者 线程 不 受 文档 的 内 容 安全 策略 限制 , 因为 工作 者 线程 在 与 父 文档 不 同 的 
上 下 文中 运行 。 不 过 ,如果 工 作者 线程 加 载 的 脚本 带 有 全 局 唯一 标识 符 ( 与 加 载 自 一 个 二 进 制 大 文件 一 
样 )， 就 会 受 父 文档 内 容 安 全 策略 的 限制 。 



































基于 二 进 制 大 文件 创建 工作 者 线程 。 





3. 使 用 Worker 对 象 
Worker () 构造 函数 返回 的 Worker 对 象 是 与 刚 创建 的 专用 工作 者 线程 通信 的 连接 点 。 它 可 用 于 在 
工作 者 线程 和 父 上 下 文 间 传输 信息 ， 以 及 捕获 专用 工作 者 线程 发 出 的 事件 。 






































注意 ”要 管理 好 使 用 Worker () 创 建 的 每 个 Worker 对 象 。 在 终止 工作 者 线程 之 前 ， 它 不 


会 被 垃圾 回收 ， 也 不 能 通过 编程 方式 恢复 对 之 前 Worker 对 象 的 引用 。 








Worker 对 象 支持 下 列 事件 处 理 程序 属性 。 
口 onerror: 在 工作 者 线程 中 发 生 ErrorEvent 类 型 的 错误 事件 时 会 调用 指定 给 该 属性 的 处 理 程序 。 
加 该 事件 会 在 工作 者 线程 中 抛 出 错误 时 发 生 。 
国 该 事件 也 可 以 通过 worker.addEventListener('error'，handler) 的 形式 处 理 。 
口 onmessage: 在 工作 者 线程 中 发 生 MessageEvent 类 型 的 消息 事件 时 会 调用 指定 给 该 属性 的 处 
理 程序 。 
量 该 事件 会 在 工作 者 线程 向 父 上 下 文 发 送 消息 时 发 生 。 
加 该 事件 也 可 以 通过 使 用 worker .addEventListener('message'，handler) 处 理 。 
口 onmessageerror: 在 工作 者 线程 中 发 生 MessageEvent 类 型 的 错误 事件 时 会 调用 指定 给 该 属 
性 的 处 理 程 序 。 
量 该 事件 会 在 工作 者 线程 收 到 无 法 反 序 列 化 的 消息 时 发 生 。 
国 该 事件 也 可 以 通过 使 用 worker .addEventListener('messageerror', handler) 处 理 。 
Worker 对 象 还 支持 下 列 方法 。 
口 bostMessage () : 用 于 通过 异步 消息 事件 向 工作 者 线程 发 送信 息 。 
口 terminate() : 用 于 立即 终止 工作 者 线程 。 没 有 为 工作 者 线程 提供 清理 的 机 会 ， 脚 本 会 突然 停止 。 
4. DedicatedWorkerGlobalScope 
在 专用 工作 者 线程 内 部 ， 全 局 作用 域 是 DedicatedWworkerGlobalScope 的 实例 。 因 为 这 继承 自 
WorkerGlobalScope， 所 以 包含 它 的 所 有 属性 和 方法 。 工 作者 线程 可 以 通过 self 关键 字 访 问 该 全 局 
作用 域 。 
globalScopeWorker.js 


console.log('inside worker:', self); 






























































































































































main.js 


const worker = new Worker('./globalScopeWorker.js'); 
console.log('created worker:', worker); 
// created worker: Worker {} 


// inside worker: DedicatedWorkerGlobalScope {} 
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如 此 例 所 示 ， 顶 级 脚本 和 工作 者 线程 中 的 console 对 象 都 将 写 入 浏览 器 控制 台 ， 这 对 于 调试 非常 
有 用 。 因 为 工作 者 线程 具有 不 可 忽略 的 启动 延迟 ， 所 以 即使 Worker 对 象 存 在 ， 工 作者 线程 的 日 志 也 会 
在 主线 程 的 日 志 之 后 打印 出 来 。 




















注意 ”这 里 两 个 独立 的 JavaScript 线程 都 在 向 一 个 console 对 象 发 消息 ,该 对 象 随后 将 消 
息 序列 化 并 在 浏览 器 控制 台 打 印 出 来 。 浏 览 器 从 两 个 不 同 的 JavaScript 线程 收 到 消息 ， 并 


按照 自己 认为 合适 的 顺序 输出 这 些 消 息 。 为 此 , 在 多 线程 应 用 程序 中 使 用 日 志 确 定 操作 顺 
序 时 必须 要 当心 。 











DedicatedWorkerGlobalScope 在 WorkerGlobalScope 基础 上 增加 了 以 下 属性 和 方法 。 

口 name: 可 以 提供 给 Worker 构造 函数 的 一 个 可 选 的 字符 串 标 识 符 。 

口 postMessage(): 与 worker.postMessage() 对 应 的 方法 ， 用 于 从 工作 者 线程 内 部 向 父 上 下 
文 发 送 消息 。 

口 close(): 与 worker.terminate() 对 应 的 方法 ， 用 于 立即 终止 工作 者 线程 。 没 有 为 工作 者 线 
程 提供 清理 的 机 会 ， 脚 本 会 突然 停止 。 

口 importSscripts(): 用 于 向 工作 者 线程 中 导入 任意 数量 的 脚本 。 


27.2.2 ”专用 工作 者 线程 与 隐 式 MessagePorts 


专用 工作 者 线程 的 worker 对 象 科 DedicatedworkerGlobalScope 与 MessagePorts 有 一 些 相 
同 接口 处 理 程 序 和 方法 : onmessage、onmessageerror 、close() 和 postMessage () 。 这 不 是 偶然 
的 ， 因 为 专用 工作 者 线程 隐 式 使 用 了 MessagePorts 在 两 个 上 下 文 之 间 通 信 。 

父 上 下 文中 的 worker 对 象 科 DedicatedWorkerGlobalScope 实际 上 融合 了 MessagePort， 并 
在 自己 的 接口 中 分 别 暴 露 了 相应 的 处 理 程序 和 方法 。 换 句 话 说， 消息 还 是 通过 MessagePort 发 送 ， 只 
是 没有 直接 使 用 MessagePort 而 已 。 

也 有 不 一 致 的 地 方 ， 比 如 start () 和 close() 约 定 。 专 用 工作 者 线程 会 自动 发 送 排队 的 消息 ， 
此 start () 也 就 没有 必要 了 。 另 外 ，close () 在 专用 工作 者 线程 的 上 下 文中 没有 意义 ， 因 为 这 样 关闭 
MessagePort 会 使 工作 者 线程 孤立 。 因 此 ， 在 工作 者 线程 内 部 调用 close() (或 在 外 部 调用 
terminate() ) 不 仅 会 关闭 MessagePort， 也 会 终止 线程 。 


27.2.3 ”专用 工作 者 线程 的 生命 周期 


调用 Worker () 构造 函数 是 一 个 专用 工作 者 线程 生命 的 起 点 。 调 用 之 后 ， 它 会 初始 化 对 工作 者 线程 
脚本 的 请 求 ， 并 把 Worker 对 象 返 回 给 父 上 下 文 。 虽然 父 上 下 文中 可 以 立即 使 用 这 个 Worker 对 象 , 但 
与 之 关联 的 工作 者 线程 可 能 还 没有 创建 ， 因 为 存在 请 求 脚 本 的 网 格 延迟 和 初始 化 延迟 。 

一 般 来 说 , 专用 工作 者 线程 可 以 非 正式 区 分 为 处 于 下 列 三 个 状态 : 初始 化 (initializing )、 活 动 ( active ) 
和 终止 ( terminated )。 这 几 个 状态 对 其 他 上 下 文 是 不 可 见 的 。 虽 然 Worker 对 象 可 能 会 存在 于 父 上 下 文 
中 ,但 也 无 法 通过 它 确定 工作 者 线程 当前 是 处 理 初始 化 、 活 动 还 是 终止 状态 。 换 名 话说， 与 活动 的 专用 
工作 者 线程 关联 的 Worker 对 象 和 与 终止 的 专用 工作 者 线程 关联 的 Worker 对 象 无 法 分 别 。 
初始 化 时 ， 虽 然 工作 者 线程 脚本 尚未 执行 , 但 可 以 先 把 要 发 送 给 工作 者 线程 的 消息 加 入 队列 。 这 些 
息 会 等 待 工作 者 线程 的 状态 变 为 活动 ， 再 把 消息 添加 到 它 的 消息 队列 。 下 面 的 代码 演示 了 这 个 过 程 。 
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initializingWorker.js 


self.addEventListener('message', ({data}) => console.log(data)); 
main.js 
const worker = new Worker('./initializingWorker.js'); 


// Worker 可 能 仍 处 于 初始 化 状态 
// 但 postMessage() 数 据 可 以 正常 处 理 
Worker .postMessage('foo')， 
worker.postMessage('bar'); 
worker.postMessage('baz'); 


// foo 
// bar 
// baz 


创建 之 后 ， 专 用 工作 者 线程 就 会 伴随 页 面 的 整个 生命 期 而 存在 ， 除 非 自 我 终止 (self.close() ) 
或 通过 外 部 终止 (worker .terminate() )。 即 使 线程 脚本 已 运行 完成 ， 线 程 的 环境 仍 会 存在 。 只 要 工 
作者 线程 仍 存在 ， 与 之 关联 的 worker 对 象 就 不 会 被 当成 垃圾 收集 掉 。 

自我 终止 和 外 部 终止 最 终 都 会 执行 相同 的 工作 者 线程 终止 例 程 。 来 看 下 面 的 例子 ,其 中 工作 者 线程 
在 发 送 两 条 消息 中 间 执 行 了 自我 终止 : 

closeWorkerjs 


self.postMessage('foo'); 
self.close(); 
self.postMessage('bar'); 























setTimeout(() => self.postMessage('baz'), 0); 
main.js 

const worker = new Worker('./closeWorker.js'); 
worker.onmessage = ({data}) => console.log(data); 
// foo 

// bar 














虽然 调用 了 close () , 但 显然 工作 者 线程 的 执行 并 没有 立即 终止 。 close () 在 这 里 会 通知 工作 者 线 
程 取 消 事件 循环 中 的 所 有 任务 ， 并 阻止 继续 添加 新 任务 。 这 也 是 为 什么 "baz" 没 有 打印 出 来 的 原因 。 工 
作者 线程 不 需要 执行 同步 停止 ， 因 此 在 父 上 下 文 的 事件 循环 中 处 理 的 "bar" 仍 会 打印 出 来 。 

下 面 来 看 外 部 终止 的 例子 。 


terminateWorker.js 











self.onmessage = ({data}) => console.log(data); 
main.js 
const worker = new Worker('./terminateWorker.js'); 


// 给 1000 毫秒 让 工作 者 线程 初始 化 
SetTimeout (() => { 

WoOrKker .PostMessage('foo' ); 

worker.terminate(); 

worker.postMessage('bar');} 

setTimeout(() => worker.postMessage('baz'), 0); 
}, 1000); 





// foo 
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这 里 ， 外 部 先 给 工作 者 线程 发 送 了 带 "foo" 的 postMessage， 这 条 消息 可 以 在 外 部 终止 之 前 处 理 。 
一 旦 调用 了 terminate(), 工作 者 线程 的 消息 队列 就 会 被 清理 并 锁 住 ,这 也 是 只 是 打印 "foo" 的 原因 。 


























注意 close() 和 terminate() 是 震 等 操作 ， 多 次 调用 没有 问题 。 这 两 个 方法 仅仅 是 将 


Worker 标记 为 Leardown， 因 此 多 次 调用 不 会 有 不 好 的 影响 。 

















在 整个 生命 周期 中 , 一 个 专用 工作 者 线程 只 会 关联 一 个 网 页 ( Web 工作 者 线程 规范 称 其 为 一 个 文档 )。 
除非 明确 终止 ,否则 只 要 关联 文档 存在 ,专用 工作 者 线程 就 会 存在 。 如 果 浏 览 器 离开 网 页 (通过 导航 或 
关闭 标签 页 或 关闭 窗口 )， 它 会 将 与 其 关联 的 工作 者 线程 标记 为 终止 ， 它 们 的 执行 也 会 立即 停止 。 


















































27.2.4 配置 Worker 选项 


Worker () 构造 函 数 允许 将 可 选 的 配置 对 象 作为 第 二 个 参数 。 该 配置 对 象 支持 下 列 属性 。 

口 name: 可 以 在 工作 者 线程 中 通过 self .name 读 取 到 的 字符 串 标 识 符 。 

口 type: 表示 加 载 脚 本 的 运行 方式 ， 可 以 是 "classic" 或 "module"。"classic" 将 脚本 作为 常 

规 脚 本 来 执行 ，"module" 将 脚本 作为 模块 来 执行 。 

口 credentials: 在 type 为 "module" 时 ,指定 如 何 获取 与 传输 凭证 数据 相关 的 工作 者 线程 模块 
脚本 。 值 可 以 是 "omit"、"same-orign" 或 "include"。 这些 选项 与 featch () 的 凭证 选项 相同 。 
在 type 为 "classic" 时 ， 默 认为 "omit"。 




















注意 ”有 的 现代 浏览 器 还 不 完全 支持 模块 工作 者 线程 或 可 能 需要 修改 标志 才能 支持 。 





27.2.5 在 JavaScript 行内 创建 工作 者 线程 


工作 者 线程 需要 基于 脚本 文件 来 创建 , 但 这 并 不 意味 着 该 脚本 必须 是 远程 资源 。 专 用 工作 者 线程 也 
可 以 通过 Blob 对 象 URL 在 行内 脚本 创建 。 这 样 可 以 更 快速 地 初始 化 工作 者 线程 ， 因 为 没有 网 络 延迟 。 

下 面 展 示 了 一 个 在 行内 创建 工作 者 线程 的 例子 。 

// 创建 要 执行 的 JavaScript 代码 字符 串 


const workerScript = “ 
self.onmessage = ({data}) => console.log(data); 




















// 基于 脚本 字符 囊 生成 Blob 对 象 


const workerScriptBlob = new Blobl( [workerScript]); 


// 基于 Blob 实例 创建 对 象 URL 
const workerScriptBlobUrl1l = URL.createObjectURL (workerScriptBlob); 


// 基于 对 象 URL 创建 专用 工作 者 线程 


Const worker = new Worker (workerScriptBlobUr]1); 


worker.postMessage('blob worker script'); 
// blob worker script 


在 这 个 例子 中 , 通过 脚本 字符 串 创建 了 Blob, 然后 又 通过 Blob 创建 了 对 象 URL, 最 后 把 对 象 URL 
传 给 了 Worker () 构造 函数 。 该 构造 函数 同样 创建 了 专用 工作 者 线程 。 





27.2 专用 工作 者 线程 799 





如 果 把 所 有 代码 写 在 一 块 ， 可 以 浓缩 为 这 样 : 


const worker = new Worker (URL.createObjectURL (new Blob([ self.onmessage = 
({data}) => console.log(data); ]))); 


worker.postMessage('blob worker script'); 
// blob worker script 


工作 者 线程 也 可 以 利用 函数 序列 化 来 初始 化 行内 脚本 。 这 是 因为 函数 的 tostring () 方 法 返回 函数 











代码 的 字符 串 ， 而 函数 可 以 在 父 上 下 文中 定义 但 在 子 上 下 文中 执行 。 来 看 下 面 这 个 简单 的 例子 : 


function fibonacci(n) { 
returnn<1?0 
:nz<=2?1 
: fibonacci(n - 1) + fibonacci(n - 2); 
} 


const workerScript = . 
self.postMessagel 
(Ss{fibonacci.tostring()}) (9) 
} 
const worker = new Worker (URL.createObjectURL (new Blobl([workerScript]))); 
worker.onmessage = ({data}) => console.log(data); 


// 34 


这 里 有 意 使 用 了 斐 波 那 契 数列 的 实现 ， 将 其 序列 化 之 后 传 给 了 工作 者 线程 。 该 函数 作为 IFE 调用 




















并 传递 参数 ,结果 则 被 发 送 回 主线 程 。 虽然 计算 辈 波 那 契 数列 比较 耗 时 , 但 所 有 计算 都 会 委托 到 工作 者 
线程 ， 因 此 并 不 会 影响 父 上 下 文 的 性 能 。 





注意 像 这 样 序 列 化 函数 有 个 前 提 ， 就 是 函数 体内 不 能 使 用 通过 闭 包 获得 的 引用 ,也 包括 


全 局 变量 ， 比 如 winaqow， 因 为 这 些 引 用 在 工作 者 线程 中 执行 时 会 出 错 。 





27.2.6 在 工作 者 线程 中 动态 执行 脚本 





工作 者 线程 中 的 脚本 并 非 铁 板 一 块 ， 而 是 可 以 使 用 importSscripts () 方 法 通过 编程 方式 加 载 和 执 














行 任意 脚本 。 该 方法 可 用 于 全 局 Worker 对 象 。 这 个 方法 会 加 载 脚本 并 按照 加 载 顺 序 同步 执行 。 比 如 ， 





下 驮 








i 的 例子 加 载 并 执行 了 两 个 脚本 : 





main.js 

const worker = new Worker('./worker.js'); 
// importing scripts 

// scriptA executes 


// scriptB executes 
// scripts imported 


scriptA.js 


console.log('scriptA executes'); 
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scriptB.js 


console.log('scriptB executes'); 


worker.js 


console.log('importing scripts'); 


importScripts('./scriptA.js'); 
importScripts('./scriptB.js'); 


console.log('scripts imported'); 


importScripts() 方 法 可 以 接收 任意 数量 的 脚本 作为 参数 。 浏 览 絮 下载 它 们 的 顺序 没有 限制 , 但 











执行 则 会 严格 按照 它们 在 参数 列表 的 顺序 进行 。 因 此， 下 面 的 代码 与 前 面 的 效果 一 样 : 











console.log('importing scripts'); 
importScripts('./scriptA.js', './scriptB.js'); 


console.log('scripts imported'); 





脚本 加 载 受到 常规 CORS 的 限制 , 但 在 工作 者 线程 内 部 可 以 请 求 来 自任 何 源 的 脚本 。 这 里 的 脚本 导 








入 策略 类 似 于 使 用 生成 的 <script> 标 签 动态 加 载 脚本 。 在 这 种 情况 下 ， 所 有 导入 的 脚本 也 会 共享 作用 





域 。 下 面 的 代码 演示 了 这 个 事实 : 
main.js 


const worker = new Worker('./worker.js', {name: 'foo'}); 














// importing scripts in foo with bar 
// scriptA executes in foo with bar 
// scriptB executes in foo with bar 
// scripts imported 


scriptA.js 

console.log( scriptA executes in S${self.name} with ${globalToken}.); 
scriptB.js 

console.log( scriptB executes in S${self.name} with ${globalToken}.); 
worker.js 

const globalToken = 'bar'; 


console.log(.importing scripts in S${self.name} with S${globalToken}. ); 


importScripts('./scriptA.js', './scriptB.js'); 


console.log('scripts imported'); 


27.2.7 ”委托 任务 到 子 工作 者 线程 





























有 时 候 可 能 需要 在 工作 者 线程 中 再 创建 子 工作 者 线程 。 在 有 多 个 CPU 核心 的 时 候 ， 使 用 多 个 子 工 











作者 线程 可 以 实现 并 行 计算 。 使 用 多 个 子 工 作者 线程 前 要 考虑 周全 , 确保 并 行 计算 的 投入 确 














收益 ， 毕 竞 同 时 运行 多 个 子 线程 会 有 很 大 计算 成 本 。 




















实 能 够 得 到 


除了 路 径 解 析 不 同 , 创建 子 工 作者 线程 与 创建 普通 工作 者 线程 是 一 样 的 。 子 工作 者 线程 的 脚本 路 径 











根据 父 工作 者 线程 而 不 是 相对 于 网 页 来 解析 。 来 看 下 面 的 例子 〈 注意 额外 的 js 





目录 ): 
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main.js 

const worker = new Worker('./js/worker.js'); 
// worker 

// subworker 

js/worker.js 

console.log('worker'); 

const worker = new Worker('./subworker.js'); 


js/subworker.js 


console.log('subworker');} 


注意 顶级 工作 者 线程 的 脚本 和 子 工 作者 线程 的 脚本 都 必须 从 与 主页 相同 的 源 加 载 。 





27.2.8 ”处 理工 作者 线程 错误 


如 果 工 作者 线程 脚本 抛 出 了 错误 ， 该 工作 者 线程 沙 盒 可 以 阻止 它 打 断 父 线程 的 执行 。 如 下 例 所 示 ， 
其 中 的 try/catch 块 不 会 捕获 到 错误 : 
main.js 
try { 
Const worker = new Worker('./worker.js'); 
console.log('no error'); 
} catch(e) { 
console.log('caught error'); 


} 





// no error 


worker.js 


throw Error('foo'); 


不 过 ,相应 的 错误 事件 仍然 会 冒 泡 到 工作 者 线程 的 全 局 上 下 文 ,因此 可 以 通过 在 Worker 对 象 上 设 
置 错误 事件 侦 听 器 访问 到 。 下 面 看 这 个 例子 : 

main.js 

const worker = new Worker('./worker.js'); 

worker.onerror = console.1og; 








// ErrorEvent {message: "Uncaught Error: foo"} 


worker.js 


throw Binor(TEOG )s 


27.2.9 与 专用 工作 者 线程 通信 
与 工作 者 线程 的 通信 都 是 通过 异步 消息 完成 的 ， 但 这 些 消息 可 以 有 多 种 形式 。 


1. 使 用 postMessage() 


最 简单 也 最 常用 的 形式 是 使 用 postMessage () 传递 序列 化 的 消息 。 下面 来 看 一 个 计算 阶乘 的 例子 : 











AR 











802 第 27 章 工作 者 线程 





factorialWorker.js 

function factorial(n) { 
let result = 1; 
while(n) { result *= n--; } 
return result; 


} 


self.onmessage = ({data}) => { 
self.postMessage( $s{data}! = 

过 

main.js 


const factorialWorker = new Worker('./factorialWorker.js'); 


s{factorial (data)}.); 


factorialWorker.onmessage = ({data}) => console.log(data); 


factorialWorker.postMessage (5); 
factorialWorker.postMessage (7); 
10); 


factorialWorker.postMessage ( 
2 BL B20 
和 


7 10 =7 3628800 


对 于 传递 简单 的 消息 ， 使 用 postMessage () 在 主线 程 和 工作 者 线程 之 间 传 递 消息 ， 与 在 两 个 窗口 
间 传 递 消息 非常 像 。 主 要 区 别 是 没有 targetorigin 的 限制 ， 该 限制 是 针对 window.prototype. 
postMessage 的 ， 对 WorkerGlobalScope.prototype.postMessage 或 Worker.prototype. 
postMessage 没有 影响 。 这 样 约定 的 原因 很 简单 : 工作 者 线程 脚本 的 源 被 限制 为 主页 的 源 ， 因 此 没有 
必要 再 去 过 滤 了 。 

2. 使 用 Messagechanne1 

无 论 主线 程 还 是 工作 者 线程 ， 通 过 postMessage () 进行 通信 涉及 调用 全 局 对 象 上 的 方法 ， 并 定义 
一 个 临时 的 传输 协议 。 这 个 过 程 可 以 被 Channel Messaging API 取代 , 基于 该 API 可 以 在 两 个 上 下 文 间 明 
确 建立 通信 渠道 。 

Messagechannel 实例 有 两 个 端口 ， 分 别 代表 两 个 通信 端点 。 要 让 父 页 面 和 工作 线程 通过 
Messagechannel 通信 ， 需 要 把 一 个 端口 传 到 工作 者 线程 中 ， 如 下 所 示 : 

worker.js 


// 在 监听 器 中 存储 全 局 messagePort 
let messagePort = null; 
















































































function factorial(n) { 
let result = 1; 
while(n) { result *= n--; } 
return result; 


} 


// 在 全 局 对 象 上 添加 消息 处 理 程 序 
self.onmessage = ({ports}) => { 
// 只 设置 一 次 应 口 
if (!messagePort) { 
// 初始 化 消息 发 送 端口 ， 
// 给 变量 赋值 并 重 置 监听 器 
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messagePort = ports[0]; 
self.onmessage = null; 


// 在 全 局 对 象 上 设置 消息 处 理 程 序 


messagePort.onmessage = ({data}) => { 
// 收 到 消息 后 发 送 数 据 
messagePort.postMessage(‘s$s{data}! = S${factorial (data)}.); 
2 
}3 
main.js 


const channel = new MessageChannel ();，; 
const factorialWorker = new Worker('./worker.js'); 


// 把 `.MessagePort` 对象 发 送 到 工作 者 线程 
// 工作 者 线程 负责 处 理 初始 化 信道 
factorialWorker.postMessage (null, [channel .port1]); 


// 通过 信道 实际 发 送 数 据 
channel .port2.onmessage = ({data}) => console.log(data); 


// 工作 者 线程 通过 信道 响应 


channel .port2.postMessage(5); 


A 


在 这 个 例子 中 ， 父 页 面 通过 postMessage 与 工作 者 线程 共享 MessagePort。 使 用 数组 语法 是 为 
了 在 两 个 上 下 文 间 传 递 可 转移 对 象 。 本 章 稍 后 会 介绍 可 转移 对 象 (Transferable )。 工 作者 线程 维护 
着 对 该 端口 的 引用 ,并 使 用 它 代替 通过 全 局 对 象 传递 消息 。 当 然 ,， 消息 的 格式 也 需要 临时 约定 : 工作 者 
线程 收 到 的 第 一 条 消息 包含 端口 ， 后 续 的 消息 才 是 数据 。 

使 用 Messagechannel 实例 与 父 页面 通 信 很 大 程度 上 是 多 余 的 。 这 是 因为 全 局 postMessage () 
方法 本 质 上 与 channel .postMessage () 执 行 的 是 同样 的 操作 (不 考虑 Messagechannel 接口 的 其 他 
特性 )。Messagechannel 真正 有 用 的 地 方 是 让 两 个 工作 者 线程 之 间 直 接 通信 。 这 可 以 通过 把 端口 传 给 
另 一 个 工作 者 线程 实现 。 下 面 的 例子 把 一 个 数组 传 给 了 一 个 工作 者 线程 ， 这 个 线程 又 把 它 传 另 一 个 工作 
者 线程 ， 然 后 再 传 回 主页 : 



















































































main.js 

const channel = new MessageChannel (); 

const workerA = new Worker('./worker.js'); 

const workerB = new Worker('./worker.js'); 
workerA.postMessage('workerA', [channel .port1]); 
workerB.postMessage('workerB', [channel .port2]); 
workerA.onmessage = ({data}) => console.log(data); 
workerB.onmessage = ({data}) => console.log(data); 


workerA.postMessage(['page']); 





// ['page', 'workerA', 'workerB'] 


workerB.postMessage(['page']) 


// ['page', 'workerB', 'workerA'] 
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worker.js 


let messagePort = null; 
let contextIdentifier = null; 


function addContextAndSend (data, 
// 添加 标识 符 以 标识 当前 工作 者 线程 


data.push(contextIdentifier); 


// 把 数据 发 送 到 下 一 个 目标 


destination.postMessage (data); 


} 


self.onmessage = ({data, ports}) 
// 如 果 消 息 里 存在 应 口 (ports) 
// 则 初始 化 工作 者 线程 
if (ports.length) { 
// 记录 标识 符 
contextIdentifier = data; 


// 获取 MessagePort 
messagePort = ports[0]; 


// 添加 处 理 程序 把 接收 的 数据 
// 发 回 到 父 页 面 


destination) { 


So 入 


messagePort .onmessage = ({data}) => 
addContextAndSend (qdqata，Self)， 


} 
} else { 


{ 


addContextAndSend (data, messagePort); 


} 
二 


在 这 个 例子 中 ,数组 的 每 一 段 旅程 都 会 添加 一 个 字符 串 ， 标识 自己 到 过 哪里 。 数 组 从 父 页 面 发 送 到 
工作 者 线程 ， 工 作者 线程 会 加 上 自己 的 上 下 文 标识 符 。 然 后 , 数组 又 从 一 个 工作 者 线程 发 送 到 男 一 个 工 








中 

















作者 线程 。 第 二 个 线程 又 加 上 自己 的 上 下 文 标识 符 ， 随 即将 数组 发 回 主页 ， 主 页 把 数组 打印 出 来 。 这 个 
例子 中 的 两 个 工作 者 线程 使 用 了 同一 个 脚本 ， 因 此 要 注意 数组 可 以 双向 传递 

















3. 使 用 Broadcastchannel 





























main.js 


糟 的 端 加 5 














同 源 脚本 能 够 通过 Broadcastchannel 相互 之 间 发 送 和 接收 消息 。 这 种 通道 类 型 的 设置 比较 简单 ， 
不 需要 像 Messagechannel 那样 转移 乱 粳 

















这 可 以 通过 以 下 方式 实现 : 








const channel = new BroadcastChannel('worker channel'); 
const worker = new Worker('./worker.js'); 


channel.onmessage = ({data}) => { 
console.log( ‘heard S${data} on page.); 


} 


setTimeout(() => channel.postMessagel( 


// heard foo in worker 
// heard bar on page 


worker.js 


const channel = new BroadcastChannel( 


"foo 


), 1000); 


'worker_channel'); 
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channel.onmessage = ({data}) => { 
console.log( ‘heard $s{data} in worker. ); 
channel .postMessage('bar'); 


} 

这 里 ， 页 面 在 通过 Broadcastchannel 发 送 消息 之 前 会 先 等 1 秒 钟 。 因 为 这 种 信道 没有 端口 所 有 
权 的 概念 ， 所 以 如 果 没 有 实体 监听 这 个 信道 ， 广 播 的 消息 就 不 会 有 人 人 处理。 在 这 种 情况 下 ， 如 果 没 有 
setTimeout () ， 则 由 于 初始 化 工作 者 线程 的 延迟 ， 就 会 导致 消息 已 经 发 送 了 ， 但 工作 者 线程 上 的 消息 
处 理 程 序 还 没有 就 位 。 


27.2.10 工作 者 线程 数据 传输 


使 用 工作 者 线程 时 ,经常 需要 为 它们 提供 某 种 形式 的 数据 负载 。 工 作者 线程 是 独立 的 上 下 文 ,， 因 此 
在 上 下 文 之 间 传 输 数据 就 会 产生 消耗 。 在 支持 传统 多 线程 模型 的 语言 中 ， 可 以 使 用 锁 、 互 斥 量 ， 以 及 
volatile 变量 。 在 JavaScript 中 , 有 三 种 在 上 下 文 间 转移 信息 的 方式 : 结构 化 克隆 算法 (structured clone 
algorithm )、 可 转移 对 象 (transferable objects ) 和 共享 数组 缓冲 区 ( shared array buffers )。 
1. 结构 化 克隆 算法 
结构 化 克隆 算法 可 用 于 在 两 个 独立 上 下 文 间 共 享 数 据 。 该 算法 由 浏览 需 在 后 台 实 现 , 不 能 直接 调用 。 
在 通过 postMessage () 传递 对 象 时 , 浏览 器 会 遍历 该 对 象 , 并 在 目标 上 下 文中 生成 它 的 一 个 副本 。 
下 列 类 型 是 结构 化 克隆 算法 支持 的 类 型 。 
口 除 Symbol 之 外 的 所 有 原始 类 型 
口 Boolean 对 象 
口 String 对 象 
口 BDate 
口 RegExp 
口 Blob 
DQ File 
DQ FileList 
DQ ArrayBuffer 

































































































































































DQ ArrayBufferView 
口 ImageData 

DQ Array 

DQ Object 

口 Map 

DQ set 


关于 结构 化 克隆 算法 ， 有 以 下 几 点 需要 注意 。 

口 复制 之 后 ， 源 上 下 文中 对 该 对 象 的 修改 ， 不 会 传播 到 目标 上 下 文中 的 对 象 。 
口 结构 化 克隆 算法 可 以 识别 对 象 中 包含 的 循环 引用 ， 不 会 无 穷 遍 历 对 象 。 

口 克隆 Error 对 象 、Function 对 象 或 DOM 节点 会 抛 出 错误 。 

口 结构 化 克隆 算法 并 不 总 是 创建 完全 一 致 的 副本 。 

口 对 象 属性 描述 符 、 获 取 方 法 和 设置 方法 不 会 克隆 ， 必 要 时 会 使 用 默认 值 。 
口 原型 链 不 会 克隆 。 

口 RegExp.prototype.lastIndex 属性 不 会 克隆 。 
























































A 
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:十 洗 
壮 忌 


过 大 、 过 多 的 复制 。 


2. 可 转移 对 象 


结构 化 克隆 算法 在 对 象 比 较 复杂 时 会 存在 计算 性 消耗 。 因 此 ， 实 践 中 要 尽 可 能 避免 





使 用 可 转移 对 象 (transferable objects ) 可 以 把 所 有 权 从 一 个 上 下 文 转移 到 另 一 个 上 下 文 。 在 不 太 可 





能 在 上 下 文 间 复 
口 ArrayBuffer 
口 MessagePort 
口 ImageBitmap 
口 offscreenCanvas 





判 大 量 数 据 的 情况 下 ， 这 个 功 全 


特别 有 用 。 只 有 如 下 几 种 对 象 是 可 转移 对 象 : 





postMessage() 方 法 的 第 二 个 可 选 参数 是 
历 消 息 
意味 着 被 转移 的 对 象 可 以 通过 
下 面 的 例子 演示 了 工作 者 线程 对 ArrayBu 
main.js 


const worker 








NE 

















// 创建 32 位 缓冲 区 


const arrayBuffer 


console.log(‘page's buffer size: 
worker.postMessage (arrayBuffer),; 


console.log(‘page's buffer size: 


worker.js 


self.onmessage ({data}) => { 
console.log( worker's buffer size: 


如 果 把 ArrayBuffer 指定 为 可 转移 对 象 ， 





数组 ， 它 指定 应 该 将 哪些 对 象 转移 到 目标 上 下 文 。 在 遍 


负载 对 象 时 ,浏览 器 根 据 转移 对 象 数组 检查 对 象 引 用 ， 并 对 转移 对 象 进行 转移 而 不 复制 它们 。 这 





NE 








息 人 负载 发 送 ， 消 


息 负载 本 身 会 被 复制 ， 比 如 对 象 或 数组 。 








Efer 的 常规 结构 化 克隆 。 这 里 没有 对 象 转移 : 


new Worker('./worker.js'); 


new ArrayBuffer (32); 


$s{arrayBuffer.byteLength}.); // 32 
$s{arrayBuffer.byteLength}.); // 32 
s{data.byteLength}. ); // 32 


那么 对 缓冲 区 内 存 的 引用 就 会 从 父 上 下 文中 抹 去 ， 然 后 





分 配给 工作 者 线程 。 下 面 的 例子 演示 了 这 个 操作 ， 结 果 分 配给 ArrayBuffer 的 内 存 从 父 上 下 文 转移 到 
了 工作 者 线程 : 

main.js 

const worker = new Worker('./worker.js'); 


// 创建 32 位 缓冲 区 


const arrayBuffer 


new ArrayBuffer!\( 
console.log(‘page's buffer size: 
worker.postMessage (arrayBuffer, 


console.log( ‘page's buffer size: 


worker.js 


self.onmessage ({data}) => { 
console.log( worker's buffer size: 


}; 


3 
$s{arrayBuffer.byteLength}.); // 32 
[arrayBuffer]); 
$s{arrayBuffer.byteLength}.); // 0 

s{data.byteLength}.); // 32 
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在 其 他 类 型 的 对 象 中 髓 套 可 转移 对 象 也 完全 没有 问题 。 包装 对 象 会 被 复制 , 而 衣 套 的 对 象 会 被 转移 : 
main.js 


const worker = new Worker('./worker.js'); 


// 创建 32 位 缓冲 区 
const arrayBuffer = new ArrayBuffer(32); 


console.log(‘page's buffer size: S${arrayBuffer.byteLength}. ); // 32 


worker.postMessage ({foo: {bar: arrayBuffer}}, [arrayBuffer]); 


console.log(‘page's buffer size: S${arrayBuffer.byteLength}.); // 0 
worker.js 
self.onmessage = ({data}) => { 

console.log( worker's buffer size: S${data.foo.bar.byteLength}.); // 32 


}3 


3. SharedArrayBuffer 


注意 由 于 Spectre 和 Meltdown 的 漏洞 ， 所 有 主流 浏览 器 在 2018 年 1 月 就 禁用 了 


SharedArrayBuffer。 从 2019 年 开始 ， 有 些 浏览 器 开始 逐步 重新 启用 这 一 特性 。 





既 不 克隆 , 也 不 转移 , SharedArrayBuffer 作为 ArrayBuffer 能 够 在 不 同 浏览 器 上 下 文 间 共享 。 
在 把 sharedArrayBuffer 传 给 postMessage() 时 , 浏览 右 只 会 传递 原始 缓冲 区 的 引用 。 结 果 是 ， 两 
个 不 同 的 JavaScript 上 下 文 会 分 别 维护 对 同一 个 内 存 块 的 引用 。 每 个 上 下 文 都 可 以 随意 修改 这 个 缓冲 区 ， 
就 跟 修 改 常规 ArrayBuffer 一 样 。 来 看 下 面 的 例子 : 

maln.Js 


const worker = new Worker('./worker.js'); 




















// 创建 1 字 节 缓冲 区 
const sharedArrayBuffer = new SharedArrayBuffer(1); 


// 创建 1 字 节 缓冲 区 的 视图 


const view = new Uint8Array (sharedArrayBuffer); 


// 父 上 下 文 赋值 1 


view[0] = 1; 





worker.onmessage = () => { 
console.log( ‘buffer value after worker modification: S${view[0]}.); 
于 


// 发 送 对 sharedArrayBuffer 的 引用 
Worker .postMessage (SharedArrayBuffer) 


// buffer value before worker modification: 1 
// buffer value after worker modification: 2 





worker.js 


self.onmessage = ({data}) => { 
const view = new Uint8Array (data); 
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console.log( ‘buffer value before worker modification: S${view[0]}.); 


// 工作 者 线程 为 共享 缓冲 区 赋值 


view[0] += 1; 


// 发 送 空 消息 ， 通 知 赋值 完成 
self.postMessage (null); 
} > 
当然 ,在 两 个 并 行 线程 中 共享 内 存 块 有 资源 争 用 的 风险 。 换 句 话 说 ，sharegdArrayBuffer 实例 实 
际 上 会 被 当成 易 变 (volatile ) 内 存 。 下 面 的 例子 演示 了 这 一 点 : 
main.js 
// 创建 包含 4 个 线程 的 线程 池 
const workers = []; 
for (let i = 0; i < 4; ++i) { 


workers.push(new Worker('./worker.js')); 








// 在 最 后 一 个 工作 者 线程 完成 后 打印 最 终 值 
let responseCount = 0; 
for (const worker of workers) { 
worker.onmessage = () => { 
if (++responseCount == workers.length) { 
console.log( “Final buffer value: S${view[0]} ); 
} 
上 
} 


// 初始 化 SharedArrayBuffer 

const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 
view[0] = 1; 


// 把 SharedArrayBuffer 发 给 每 个 线程 
for (const worker of workers) { 
worker.postMessage (sharedArrayBuffer); 


} 


// (期 待 结果 为 4000001。 实 际 输出 类 似 于 :) 
// Final buffer value: 2145106 


worker.js 


self.onmessage = ({data}) => { 
const view = new Uint32Array (data); 


// 执行 100 万 次 加 操作 
for (let i = 0; i < 1E6; ++i) { 
view[0] += 1; 


} 
self.postMessage (null); 
> 
这 里 ， 每 个 工作 者 线程 都 顺序 执行 了 100 万 次 加 操作 ， 每 次 都 读 取 共享 数组 的 索引 、 执 行 一 次 加 操 
作 ， 然 后 再 把 值 写 回 数 组 索引 。 在 所 有 工作 者 线程 读 / 写 操作 交织 的 过 程 中 就 会 发 生 资 源 争 用 。 例 如 : 
(1) 线程 A 读 取 到 值 1; 
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(2) 线程 B 读 取 到 值 1; 

(3) 线程 A 加 1 并 将 2 写 回 数组 ; 

(4) 线程 B 仍然 使 用 陈旧 的 数组 值 1， 同 样 把 2 写 回 数组 。 

为 解决 该 问题 ， 可 以 使 用 Atomics 对 象 让 一 个 工作 者 线程 获得 sharedArrayBuffer 实例 的 锁 ， 
在 执行 完全 部 读 / 写 / 读 操作 后 , 再 允许 另 一 个 工作 者 线程 执行 操作 。 把 Atomics .add () 放 到 这 个 例子 中 
就 可 以 得 到 正确 的 最 终 值 : 

main.js 

// 创建 包含 4 个 线程 的 线程 池 

const workers = []; 

for (let 1 = 0; 1 < 4 ++i) 4{ 


workers.push(new Worker('./worker.js')); 


} 
// 在 最 后 一 个 工作 者 线程 完成 后 打印 最 终 值 


let responseCount = 0; 
for (const worker of workers) { 
worker.onmessage = () => { 
if (++responseCount == workers.length) { 
console.log( ‘Final buffer value: S${view[0]}.); 
到 
} 


// 初始 化 SharedArrayBuffer 

const sharedArrayBuffer = new SharedArrayBuffer(4); 
const view = new Uint32Array (sharedArrayBuffer); 
view[0] = 1; 


// 把 SharedArrayBuffer 发 给 每 个 线程 
for (const worker of workers) { 
worker.postMessage (sharedArrayBuffer); 


} 


// (期 待 结果 为 4000001) 
// Final buffer value: 4000001 


worker.js 


self.onmessage = ({data}) => { 
const view = new Uint32Array (data); 


// 执行 100 万 次 加 操作 
for (let i = 0; i < 1E6; ++i) { 
Atomics.add(view, 0, 1); 


self.postMessage (null); 
和 


注意 第 20 章 详细 介绍 了 SharedArrayBuffer 和 Atomics API。 
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27.2.11 ”线程 池 


因为 启用 工作 者 线程 代价 很 大 , 所 以 某 些 情况 下 可 以 考虑 始终 保持 固定 数量 的 线程 活动 ,需要 时 就 
把 任务 分 派 给 它们 。 工 作者 线程 在 执行 计算 时 ， 会 被 标记 为 忙碌 状态 。 直 到 它 通知 线程 池 自 己 空 闪 了 ， 
才 准 备 好 接收 新 任务 。 这 些 活动 线程 就 称 为 “线程 池 ” 或 “工作 者 线程 池 ”。 

线程 池 中 线程 的 数量 多 少 合适 并 没有 权威 的 答案 ， 不 过 可 以 参考 navigator.hardware Concurrency 
属性 返回 的 系统 可 用 的 核心 数量 。 因 为 不 太 可 能 知道 每 个 核心 的 多 线程 能 力 , 所 以 最 好 把 这 个 数字 作为 
线程 池 大 小 的 上 限 。 
种 使 用 线程 池 的 策略 是 每 个 线程 都 执行 同样 的 任务 , 但 具体 执行 什么 任务 由 几 个 参数 来 控制 。 通 
过 使 用 特定 于 任务 的 线程 池 ， 可 以 分 配 固定 数量 的 工作 者 线程 ， 并 根据 需要 为 他 们 提供 参数 。 工 作者 线 
程 会 接收 这 些 参数 ， 执 行 耗 时 的 计算 ， 并 把 结果 返回 给 线程 池 。 然 后 线程 池 可 以 再 将 其 他 工作 分 派 给 工 
作者 线程 去 执行 。 接 下 来 的 例子 将 构建 一 个 相对 简单 的 线程 池 ， 但 可 以 涵盖 上 述 思路 的 所 有 基本 要 求 。 
首先 是 定义 一 个 TaskWorker 类 , 它 可 以 扩展 Worker 类 。Taskworker 类 负责 两 件 事 : 跟踪 线程 
是 否 正 忙于 工作 , 并 管理 进出 线程 的 信息 与 事件 。 另 外 , 传人 给 这 个 工作 者 线程 的 任务 会 封装 到 一 个 期 
约 中 ， 然 后 正确 地 解决 和 拒绝 。 这 个 类 的 定义 如 下 : 


class TaskWorker extends Worker { 
constructor (notifyAvailable, ...workerArgs) { 
super(.. .workerArgs); 






























































































































































// 初始 化 为 不 可 用 状态 
this.available = false; 
this.resolve = null; 
this.reject = null; 


// 线程 池 会 传递 回调 
// 以 便 工作 者 线程 发 出 它 需 要 新 任务 的 信号 


this.notifyAvailable = notifyAvailable; 


// 线程 脚本 在 完全 初始 化 之 后 
// 会 发 送 一 条 "ready "消息 
this.onmessage = () => this.setAvailable(); 





) 


// 由 线程 池 调用 ， 以 分 派 新 任务 
dispatch(t 2 reject, postMessageArgs }) { 
this.available = false; 


this.onmessage = ({ data }) => { 
resolve (data); 
this.setAvailable(); 

3 


this.onerror = (e) => { 
reject (e); 
this.setAvailable(); 
上 


this.postMessage(...postMessageArgs); 
} 


setAvailable() { 
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this.available = true; 
this.resolve = null; 
this.reject = null; 
this.notifyAvailable(); 

} 
} 


然后 是 定义 使 用 TaskWorker 类 的 WorkerPool 类 。 它 还 必须 维护 尚未 分 派 给 工作 者 线程 的 任务 
队列 。 两 个 事件 可 以 表明 应 该 分 派 一 个 新 任务 : 新 任务 被 添加 到 队列 中 , 或 者 工作 者 线程 完成 了 一 个 任 
务 ， 应 该 再 发 送 另 一 个 任务 。WorkerPool 类 定义 如 下 : 


class WorkerPool { 
constructor (poolSize, ...workerArgs) { 
this.taskQueue = []; 
this.workers = []; 




















// 初始 化 线程 池 
for (let i = 0; i < poolSize; ++i) { 
this.workers.pushl( 
new TaskWorker(() => this.dispatchIfAvailable(), ...workerArgs)); 
} 


// 把 任务 推 入 队列 
enqueue(...postMessageArgs) { 
return new Promise( (resolve, reject) => { 
this.taskQueue.push({ resolve, reject, postMessageArgs }); 


this.dispatchIfAvailable(); 
} 
} 


// 把 任务 发 送 给 下 一 个 空闲 的 线程 (如 果 有 的 话 ) 
dispatchIfAvailable() { 
if (!this.taskQueue.length) { 
return; 
} 
for (const worker of this.workers) { 
if (worker.available) { 
let a = this.taskQueue.shift(); 
worker.dispatch(a); 
break; 
} 
} 
} 


// 终止 所 有 工作 者 线程 
close() { 
for (const worker of this.workers) { 
worker.terminate(); 


} 
定义 了 这 两 个 类 之 后 ,现在 可 以 把 任务 分 派 到 线程 池 ， 并 在 工作 者 线程 可 用 时 执行 它们 。 在 这 个 例 
子 中 ， 假 设 我 们 想 计算 1000 万 个 浮 点 值 之 和 。 为 节省 转移 成 本 ,我 们 使 用 sharedArrayBuffer。 工 
作者 线程 的 脚本 (workerjs ) 大 致 如 下 : 
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self.onmessage = ({data}) => { 
let sum = 0; 
let view = new Float32Array (data.arrayBuffer) 


// 求 和 

for (let i = data.startIdx; i < data.endIdx; ++i) { 
// 不 需要 原子 操作 ， 因 为 只 需要 读 
sum += view[il]; 


} 
// 把 结果 发 送 给 工作 者 线程 


self.postMessage (sum); 
3 


// 发 送 消息 给 TaskWorker 

// 通知 工作 者 线程 准备 好 接收 任务 了 
self.postMessage('ready'); 

有 了 以 上 代码 ， 利 用 线程 池 分 派 任 务 的 代码 可 以 这 样 写 : 


Class TaskWorker { 

















Class WorkerPool { 


const totalFloats = 1E8; 

const numTasks = 20; 

const floatsPerTask = totalFloats / numTasks; 
const numWorkers = 4; 


// 创建 线程 池 


const pool = new WorkerPool (numWorkers, './worker.js'); 


// 填充 浮 点 值 数组 
Jet arrayBuffer = new SharedArrayBuffer(4 * totalFloats); 
let view = new Float32Array (arrayBuffer); 
for (let i = 0; i < totalFloats; ++i) { 
view[i] = Math.random(); 


} 


let partialSumPromises = []; 
for (let i = 0; i < totalFloats; i += floatsPerTask) { 
partialSumPromises.pushl( 
pool.enqueuel({ 
startIdx: i, 
endIdx: i + floatsPerTask, 
arrayBuffer: arrayBuffer 
}) 
js 
} 


// 等 待 所 有 期 约 完成 ， 然 后 求 和 

Promise.all (partialSumPromises) 
.then( (partialSums) => partialSums.reduce((x, y) => x + y)) 
.then(console.1o0g); 


// (在 这 个 例子 中 ， 和 应 该 约 等 于 1E8/2) 
// 49997075.47203197 


27.3 ”共享 工作 者 线程 813 





注意 草率 地 采用 并 行 计算 不 一 定 是 最 好 的 办 法 。 线 程 池 的 调 优 策略 会 因 计算 任务 不 同和 


系统 硬件 不 同 而 不 同 。 
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共享 工作 者 线程 或 共享 线程 与 专用 工作 者 线程 类 似 , 但 可 以 被 多 个 可 信任 的 执行 上 下 文 访问 。 例 如 ， 
同 源 的 两 个 标签 页 可 以 访问 同一 个 共享 工作 者 线程 。sharedWworker 与 Worker 的 消息 接口 稍 有 不 同 ， 
包括 外 部 和 内 部 。 

共享 线程 适合 开发 者 希望 通过 在 多 个 上 下 文 间 共 享 线程 减少 计算 性 消耗 的 情形 。 比 如 ,可 以 用 一 个 


共享 线程 管理 多 个 同 源 页 面 WebSocket 消息 的 发 送 与 接收 。 共享 线程 也 可 以 用 在 同 源 上 下 文 希望 通过 一 
个 线程 通信 的 情形 。 


27.3.1 共享 工作 者 线程 简介 


从 行为 上 讲 ， 共 享 工作 者 线程 可 以 看 作 是 专用 工作 者 线程 的 一 个 扩展 。 线 程 创 建 、 线 程 选项 、 安 全 
限制 和 importscripts () 的 行为 都 是 相同 的 。 与 专用 工作 者 线程 一 样 ， 共 享 工作 者 线程 也 在 独立 执行 
上 下 文中 运行 ， 也 只 能 与 其 他 上 下 文 异步 通信 。 

1. 创建 共享 工作 者 线程 

与 专用 工作 者 线程 一 样 ， 创 建 共 享 工作 者 线程 非常 常用 的 方式 是 通过 加 载 JavaScript 文件 创建 。 此 
时 ,需要 给 sharedworker 构造 函数 传人 文件 路 径 ， 该 构造 函数 在 后 台 异 步 加 载 脚本 并 实例 化 共享 工 
作者 线程 。 

下 面 的 例子 演示 了 如 何 基于 绝对 路 径 创建 空 共享 工作 者 线程 : 

emptySharedWorker.js 

// 空 的 JavaScript 线程 文件 

main.js 

console.log(location.href); // "https://example.com/" 


const sharedWorker = new SharedWorker!( 
location.href + 'emptySharedWorker.js'); 






























































~ 















































console.log(sharedWorker); // SharedWorker {} 
前 面 的 例子 可 以 修改 为 使 用 相对 路 径 , 不 过 这 需要 main.js 和 emptySharedWorkerjs 在 同一 个 目录 下 : 
const worker = new Worker('./emptyWorker.js'); 


console.log (worker); // Worker {} 

也 可 以 在 行内 脚本 中 创建 共享 工作 者 线程 , 但 这 样 做 没什么 意义 。 因 为 每 个 基于 行内 脚本 字符 串 创 
建 的 Blob 都 会 被 赋予 自己 唯一 的 浏览 器 内 部 URL, 所 以 行内 脚本 中 创建 的 共享 工作 者 线程 始终 是 唯一 
的 。 这 里 的 原因 将 在 下 一 节 介 绍 。 

2. sharedWorker 标识 与 独占 
共享 工作 者 线程 与 专用 工作 者 线程 的 一 个 重要 区 别 在 于 ,虽然 Worker () 构造 函数 始终 会 创建 新 实 
例 , 而 sharedworker () 则 只 会 在 相同 的 标识 不 存在 的 情况 下 才 创 建新 实例 。 如 果 的 确 存在 与 标识 匹配 

的 共享 工作 者 线程 ， 则 只 会 与 已 有 共享 者 线程 建立 新 的 连接 。 
共享 工作 者 线程 标识 源 自 解析 后 的 脚本 URL、 工 作者 线程 名 称 和 文档 源 。 例如 ,下 面 的 脚本 将 实例 
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化 一 个 共享 工作 者 线程 并 添加 两 个 连接 : 


// 实例 化 一 个 共享 工作 者 线程 

// ，- 侈 部 基于 同 源 调 用 构造 函数 

// ， - 所 有 脚本 解析 为 相同 的 URL 

// ，- 所 有 线程 都 有 相同 的 名 称 

new SharedWorker('./sharedWorker.js'); 
new SharedWorker('./sharedWorker.js'); 
new SharedWorker('./sharedWorker.js'); 


类 似 地 ， 因 为 下 面 三 个 脚本 字符 串 都 解析 到 相同 的 URL， 所 以 也 只 会 创建 一 个 共享 工作 者 线程 : 


// 实例 化 一 个 共享 工作 者 线程 

// ，- 全 部 基于 同 源 调用 构造 函数 

//， - 所 有 脚本 解析 为 相同 的 URL 

// ， - 所 有 线程 都 有 相同 的 名 称 

new SharedWorker('./sharedWorker.js'); 

new SharedWorker ('sharedWorker.js'); 

new SharedWorker ('https://ww.example.com/sharedWorker.js'); 


因为 可 选 的 工作 者 线程 名 称 也 是 共享 工作 者 线程 标识 的 一 部 分 , 所 以 不 同 的 线程 名 称 会 强制 浏览 
创建 多 个 共享 工作 者 线程 。 对 下 面 的 例子 而 言 ， 一 个 名 为 'foo' ， 男 一 个 名 为 'bar' ， 尽 管 它们 同 源 且 
脚本 URL 相同 : 


// 实例 化 一 个 共享 工作 者 线程 
// ，- 全 部 基于 同 源 调 用 构造 函数 
// ， - 所 有 脚本 解析 为 相同 的 URL 


























//，- 一 个 线程 名 称 为 " foo' ,一 个 线程 名 称 为 'bar' 

new SharedWorker('./sharedWorker.js', {name: 'foo'}); 
new SharedWorker('./sharedWorker.js', {name: 'foo'}); 
new SharedWorker('./sharedWorker.js', {name: 'bar'}); 





共享 线程 ， 顾 名 思 义 ， 可 以 在 不 同 标签 页 、 不 同窗 口 、 不 同 内 艇 框架 或 同 源 的 其 他 工作 者 线程 之 间 
共享 。 因 此 ， 下 面 的 脚本 如 果 在 多 个 标签 页 运行 ， 只 会 在 第 一 次 执行 时 创建 一 个 共享 工作 者 线程 后 续 
执行 会 连接 到 该 线程 : 

// 实例 化 一 个 共享 工作 者 线程 

// ，- 全 部 基于 同 源 调 用 构造 函数 

// ， - 所 有 脚本 解析 为 相同 的 URL 

// ， - 所 有 线程 都 有 相同 的 名 称 


new SharedWorker('./sharedWorker.js'); 

初始 化 共享 线程 的 脚本 只 会 限制 URL, 因此 下 面 的 代码 会 创 寻 
同 的 脚本 : 

// 实例 化 一 个 共享 工作 者 线程 

// ”- 全 部 基于 同 源 调用 构造 函数 

// - '?' 导 致 了 两 个 不 同 的 URL 

// ， - 所 有 线程 都 有 相同 的 名 称 

new SharedWorker('./sharedWorker.js'); 

new SharedWorker ('./sharedWorker.js?'); 


如 果 该 脚本 在 两 个 不 同 的 标签 页 中 运行 , 同样 也 只 会 创建 两 个 共享 工作 者 线程 。 每 个 构造 函数 都 会 
检查 匹配 的 共享 工作 者 线程 ， 然 后 连接 到 已 存在 的 那个 。 

3. 使 用 sharedworker 对 象 
SharegdWorker () 构 造 困 数 返回 的 sharedWorker 对 象 被 用 作 与 新 创建 的 共享 工作 者 线程 通信 的 
连接 点 。 它 可 以 用 来 通过 MessagePort 在 共享 工作 者 线程 和 父 上 下 文 间 传递 信息 ， 也 可 以 用 来 捕获 共 
享 线程 中 发 出 的 错误 事件 。 


























两 个 共享 工作 者 线程 , 尽管 加 载 了 相 


本 
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SharedWorker 对 象 支持 以 下 属性 。 
口 onerror: 在 共享 线程 中 发 生 ErrorEvent 类 型 的 错误 事件 时 会 调用 指定 给 该 属性 的 处 理 程序 。 
加 此 事件 会 在 共享 线程 抛 出 错误 时 发 生 。 
田 此 事件 也 可 以 通过 使 用 shareqworker .addqEventListener('error'，handler) 处 理 。 
口 bort: 专门 用 来 跟 共 享 线 程 通信 的 MessagePort。 
4. SsharedWorkerGlobalSscope 
在 共享 线程 内 部 ， 全 局 作用 域 是 sharedWorkerGlobalScope 的 实例 。sharedWorkerGlobal- 
Scope 继承 自 WorkerGlobalScope,， 因 此 包括 它 所 有 的 属性 和 方法 。 与 专用 工作 者 线程 一 样 ， 共 享 工 
作者 线程 也 可 以 通过 self 关键 字 访问 该 全 局 上 下 文 。 
SharedWorkerGlobalScope 通过 以 下 属性 和 方法 扩展 了 workerGlobalScope。 
口 name: 人 ! 符 ， 可 以 传 给 SsharedWorker 构造 函数 。 
口 importscripts(): 用 于 向 工作 者 线程 中 导入 任意 数量 的 脚本 。 
DQ close(): Ee r.terminate() 对 应 ,用 于 立即 终止 工作 者 线程 。 没 有 给 工作 者 线程 提供 
终止 前 清理 的 机 会 ;脚本 会 突然 停止 。 
口 onconnect : 与 共享 线程 建立 新 连接 时 ， 应 将 其 设置 为 处 理 程序 。connect 事件 包括 
MessagePort 实例 的 ports 数组 ， 可 用 于 把 消息 发 送 回 父 上 下 文 。 


图 在 通过 worker.port.onmessage 或 worker.port.start() 与 共享 线程 到 










































































































































































E 立 连接 时 都 会 触 
发 connect 事件 。 

图 connect 事件 也 可 以 通过 使 用 sharedWorker.addEventListener('connect', handler) 
处 理 。 





注意 ”根据 浏览 器 实现 ,在 SharedWorker 中 把 日 志 打 印 到 控制 台 不 一 


认 的 控 御 | 合 中 看 到 。 





27.3.2 理解 共享 工作 者 线程 的 生命 周期 


十 


共享 工作 者 线程 的 生命 周期 具有 与 专用 工作 者 线程 相同 的 阶段 的 特性 。 不 同 之 处 在 于 ,专用 工作 者 
线程 只 跟 一 个 页 面 绑 定 ， 而 共享 工作 者 线程 只 要 还 有 一 个 上 下 文 连 接 就 会 持续 存在 。 
比如 下 面 的 脚本 ， 每 次 调用 它 都 会 创建 一 个 专用 工作 者 线程 : 


new Worker('./worker.js'); 


下 表 详 细 列 出 了 当 三 个 包含 此 脚本 的 标签 页 按 顺 序 打开 和 关闭 时 会 发 生 什么 。 






























































事 件 结 果 事件 发 生 后 的 线程 数 
标签 页 1 执行 main.js 创建 专用 线程 1 1 
标签 页 2 执行 main.js 创建 专用 线程 2 2 
标签 页 3 执行 main.js 创建 专用 线程 3 3 
标签 页 1 关闭 专用 线程 1 终止 2 
标签 页 2 关闭 专用 线程 2 终止 1 
标签 页 3 关闭 专用 线程 3 终止 0 
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如 上 表 所 示 ， 脚 本 执行 次 数 、 打 开 








脚本 ， 每 次 执行 它 都 会 创建 或 者 连接 到 共享 线程 : 





new SharedWorker ( 





./SsharedWorker.js'); 


标签 页 数 和 运行 的 线程 数 是 对 等 关系 。 下 面 再 来 看 看 这 个 简单 的 





下 表 列 出 了 当 三 个 包含 此 脚本 的 标签 页 按 顺 序 打开 和 关闭 时 会 发 生 什么 。 













































































事 件 结 果 事件 发 生 后 的 线程 数 
标签 页 1 执行 main.js 创建 共享 线程 1 1 
标签 页 2 执行 main.js 连接 共享 线程 1 1 
标签 页 3 执行 main.js 连接 共享 线程 1 1 
pe 1 关闭 断 开 与 共享 线程 1 的 连接 1 
标签 页 2 关闭 断 开 与 共享 线程 1 的 连接 1 
标签 页 3 关闭 断 开 与 共享 线程 1 的 连接 。 没 有 连接 了 ， 因 此 终止 共享 线程 1 0 


如 上 表 所 示 ， 标 签 页 2 和 标签 页 3 再 次 调 
的 增加 和 移 除 ， 浏 览 需 会 
关键 在 于 ， 没 有 办 法 以 编 


terminate() 方 法 。 
旦 就 不 会 真 的 终止 线程 。 
SharedWorker eh 与 关联 MessagePort 或 Messagechannel 的 状态 无 关 。 只 要 建立 了 












































用 new SharedWorker () 会 连接 到 已 有 线程 。 随 着 连接 





记录 连接 总 数 。 在 连接 数 为 0 时， 线程 被 终止 。 





程 方式 终止 共享 线程 。 前 面 已 














在 共享 线程 端口 ( 稍 后 讨论 ) 上 调 用 clos 








经 交代 过 ，SsharedWworker 对 象 上 没有 
() 时， 只 要 还 有 一 个 端口 连接 到 该 线 














连接 ,浏览 器 会 负责 管 














连接 时 ， 浏 览 带 才 会 终 上 共享 线程 。 


27.3.3 ”连接 到 共享 工作 者 线程 


每 次 调用 sharedWorker () 构 造 函 数 ， 无 论 是 否 创建 了 工作 者 线程 ， 都 会 在 共享 线程 内 部 触发 











connect 事件 。 下 面 的 例子 演示 了 这 
sharedWorker.js 


let i = 0; 


self.onconnect 


main.js 


for (let i = 


Qs 


= () => console.log(. 


i < 5; ++i) { 


理 该 连接 。 建立 的 连接 会 在 页 面 的 和 9 




















new SharedWorker('./sharedWorker.js'); 


} 


// connected 
// connected 
// connected 
// connected 
// connected 





1 
2 
3 
4 
5 


times 
times 
times 
times 
times 











E 命 周期 内 持续 存在 ， 只 有 当 页 面 销毁 且 没 有 

















这 一 点 ， 在 循环 中 调用 sharegdWworker () 构造 函数 : 


connected S${++i} times. ); 


发 生 connect 事件 时 ，sSharedWorker () 构造 函数 会 隐 式 创建 Messagechannel 实例 ， 并 把 





MessagePort 实例 的 所 有 权 唯 一 地 转移 
在 connect 事件 对 象 的 ports 数组 中 。 


的 长 度 等 于 1。 














给 该 sharedWworker 的 实例 。 这 个 MessagePort 实例 会 保存 





一 个 连接 事件 只 能 代表 


一 个 连接 ， 因此 可 以 假定 ports 数组 
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下 面 的 代码 演示 了 访问 事件 对 象 的 ports 数组 。 这 里 使 用 了 set 来 保证 只 跟踪 唯一 的 对 象 实例 : 
sharedWorker.js 


const connectedPorts = new Set(); 














self.onconnect = ({ports}) => { 
connectedPorts.add(ports[0]); 


console.log(  ${connectedPorts.size} unique connected ports.); 
}; 
main.js 
for (let TS .0 5 4 ) A 


new SharedWorker('./sharedWorker.js'); 


} 


// 1 unique connected ports 
// 2 unique connected ports 
// 3 unique connected ports 
// 4 unique connected ports 
// 5 unique connected ports 


关键 在 于 ， 共 享 线程 与 父 上 下 文 的 启动 和 关闭 不 是 对 称 的。 每 个 新 SsharedWorker 连接 都 会 触发 
一 个 事件 ， 但 没有 事件 对 应 断 开 sharedworker 实例 的 连接 ( 如 页 面 关闭 )。 

在 前 面 的 例子 中 , 随 着 与 相同 共享 线程 连接 和 上 断 开 连接 的 页 面 越 来 越 多 , connectedPorts 集合 中 
会 受到 死 端口 的 污染 ， 没 有 办 法 识别 它们 。 一 个 解决 方案 是 在 beforeunload 事件 即将 销毁 页 面 时 ， 
明确 发 送 旬 载 消息 ， 让 共享 线程 有 机 会 清除 死 端 口 。 


27.4 服务 工作 者 线程 


服务 工作 者 线程 (service worker ) 是 一 种 类 似 浏览 占 中 代理 服务 器 的 线程 ， 可 以 拦截 外 出 请 求 和 组 
存 响 应 。 这 可 以 让 网 页 在 没有 网 络 连 接 的 情况 下 正常 使 用 ,因为 部 分 或 全 部 页 面 可 以 从 服务 工作 者 线程 
缓存 中 提供 服务 。 服 务工 作者 线程 也 可 以 使 用 Notifications API、Push API、Background Sync API 和 
Channel Messaging API。 

与 共享 工作 者 线程 类 似 , 来 自 一 个 域 的 多 个 页 面 共 享 一 个 服务 工作 者 线程 .不 过 ,为 了 使 用 Push API 
等 特性 ， 服 务工 作者 线程 也 可 以 在 相关 的 标签 页 或 浏览 器 关闭 后 继续 等 待 到 来 的 推送 事件 。 

无 论 如 何 ， 对 于 大 多 数 开 发 者 而 言 ， 服 务工 作者 线程 在 两 个 主要 任务 上 最 有 用 : 充当 网 络 请 求 的 
缓存 层 和 启用 推送 通知 。 在 这 个 意义 上 ， 服 务工 作者 线程 就 是 用 于 把 网 页 变 成 像 原 生 应 用 程序 一 样 的 
工具 。 





































































































注意 ”服务 工作 者 线程 涉及 的 内 容 极其 广泛 ， 几乎 可 以 单独 写 一 本 书 。 为 了 更 好 地 理解 这 
一 话题 ， 推 荐 有 条 件 的 读者 学 一 下 Udacity 的 课程 “Offline Web Applications”。 除 此 之 外 ， 


也 可 以 参考 Mozilla 维护 的 Service Worker Cookbook 网 站 ， 其 中 包含 了 常见 的 服务 工作 者 
线程 模式 。 
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注意 服务 工作 者 线程 的 生命 周期 取决 于 打开 的 同 源 标签 页 ( 称 为 “客户 端 "”) 数量 、 页 
面 是 否 发 生 导 航 ， 以 及 服务 脚本 是 否 改 变 (以 及 其 他 一 些 因素 )。 如 果 对 服务 工作 者 线程 
的 生命 周期 认识 不 够 ， 本 节 的 一 些 例子 可 能 会 让 人 觉得 出 乎 意料 。27.4.5 节 详 细 解 释 了 服 
务工 作者 线程 的 生命 周期 。 


另外 ， 在 调试 服务 工作 者 线程 时 ， 要 谨慎 使 用 浏览 器 的 强制 刷新 功能 (Ctrl+Shift+R )。 强 
制 刷 新 会 强制 浏览 器 忽略 所 有 网 络 缓存 , 而 服务 工作 者 线程 对 大 多 数 主 流 浏览 器 而 言 就 是 





27.4.1 服务 工作 者 线程 基础 


作为 一 种 工作 者 线程 ， 服 务工 作者 线程 与 专用 工作 者 线程 和 共享 工作 者 线程 拥有 很 多 共性 。 比 如 ， 
在 独立 上 下 文中 运行 ， 只 能 通过 异步 消息 通信 。 不 过 ， 服 务工 作者 线程 与 专用 工作 者 线程 和 共享 工作 者 
线程 还 是 有 很 多 本 质 区 别 的 。 

1. ServiceWorkerContainer 

服务 工作 者 线程 与 专用 工作 者 线程 或 共享 工作 者 线程 的 一 个 区 别 是 没有 全 局 构造 孙 数 。 服 务工 作者 
线程 是 通过 serviceworkerContainet 来 管理 的 ， 它 的 实例 保存 在 navigator.serviceWorker 属 
性 中 。 该 对 象 是 个 顶级 接口 ， 通 过 它 可 以 让 浏览 器 创建 、 更 新 、 销 毁 或 者 与 服务 工作 者 线程 交互 。 


console.log(navigator .serviceWorker) : 
// ServiceWorkerContainer { ... } 


2. 创建 服务 工作 者 线程 

与 共享 工作 者 线程 类 似 ， 服 务工 作者 线程 同样 是 在 还 不 存在 时 创建 新 实例 , 在 存在 时 连接 到 已 有 实 
例 。serviceWorkerContainer 没有 通过 全 局 构造 函数 创建 ， 而 是 暴露 了 register() 方 法 ,该 方法 
以 与 Worker () 或 SharedWorker () 构 造 函 数 相同 的 方式 传递 脚本 URL : 

emptyServiceWorker.js 

// 空 服务 脚本 

main.js 

navigator.serviceWorker.register('./emptyServiceWorker.js'); 

register() 方 法 返回 一 个 期 约 ， 该 期 约 解决 为 ServiceWorkerRegistration 对 象 ， 或 在 注册 
失败 时 拒绝 。 

emptyServiceWorker.js 

// 空 服务 脚本 

main.js 

// 注册 成 功 ， 成 功 回 调 (解决 ) 

navigator.serviceWorker.register('./emptyServiceWorker.js') 

.then(console.log, console.error); 

















































































































// ServiceWorkerRegistration { ... } 


// 使 用 不 存在 的 文件 注册 ， 失 败 回调 (拒绝 ) 
navigator.serviceWorker.register('./doesNotExist.js') 
.then(console.log, console.error); 


27.4 服务 工作 者 线程 819 





// TypeError: Failed to register a ServiceWorker: 
// A bad HTTP response code (404) was received when fetching the script. 


服务 工作 者 线程 对 于 何 时 注册 是 比较 灵活 的 。 在 第 一 次 调用 register () 激 活 服务 工作 者 线程 后 ， 
后 续 在 同一 个 页 面 使 用 相同 URL 对 register () 的 调用 实际 上 什么 也 不 会 执行 。 此 外 ， 即 使 浏览 器 未 
全 局 支持 服务 工作 者 线程 , 服务 工作 者 线程 本 身 对 页 面 也 应 该 是 不 可 见 的 。 这 是 因为 它 的 行为 类 似 代理 ， 
就 算 有 需要 它 处 理 的 操作 ， 也 仅仅 是 发 送 常规 的 网 络 请 求 。 

考虑 到 上 述 情况 ， 注 册 服 务工 作者 线程 的 一 种 非常 常见 的 模式 是 基于 特性 检测 ， 并 在 页 面 的 lo0ad 
事件 中 操作 。 比 如 : 









































if ('serviceWorker' in navigator) { 
window.addEventListener('load', () => { 


navigator.serviceWorker.register('./serviceWorker.js'); 
} os 
} 


如 果 没 有 1oag 事件 这 个 门槛 ， 服 务工 作者 线程 的 注册 就 会 与 页 面 资源 的 加 载重 于 ， 进 而 拖 慢 初始 
页 面 演 染 的 过 程 。 除 非 该 服务 工作 者 线程 负责 管理 缓存 ( 这 样 的 话 就 需要 尽早 注册 ， 比 如 使 用 本 章 稍 后 
会 讨论 的 clients.claim() ), 否则 等 待 1oad 事件 是 个 明智 的 选择 , 这 样 同 样 可 以 发 挥 服务 工作 者 线 
程 的 价值 。 

3. 使 用 serviceworkerContainer 对 象 

ServiceWorkerContainer 接口 是 浏览 器 对 服务 工作 者 线程 生态 的 顶部 封装 。 它 为 管理 服务 工作 
者 线程 状态 和 生命 周期 提供 了 便利 。 

ServiceWorkerContainer 始终 可 以 在 客户 端 上 下 文中 访问 ， 


console.log (navigator.serviceWorker); 
























































// ServiceWorkerContainer { ... } 

ServiceWorkerContainer 支持 以 下 事件 处 理 程序 。 

口 oncontrollerchange: 在 ServiceWorkerContainer 触发 controllerchange 事件 时 会 
调用 指定 的 事件 处 理 程序 。 
国 此 事件 在 获得 新 激活 的 ServiceWorkerRegistration 时 触发 。 














田 此 事件 也 可 以 使 用 navigator.serviceWorker.addEventListener('controllerchange', 








handler) 处理 。 
口 onerror: 在 关联 的 服务 工作 者 线程 触发 ErrorEvent 错误 事件 时 会 调用 指定 的 事件 处 理 程 序 。 
加 此 事件 在 关联 的 服务 工作 者 线程 内 部 抛 出 错误 时 触发 。 












































国 此 事件 也 可 以 使 用 navigator.serviceWorker.addEventListener('error', handler) 











处 理 。 
口 onmessage: 在 服务 工作 者 线程 触发 MessageEvent 事件 时 会 调用 指定 的 事件 处 理 程序 。 
田 此 事件 在 服务 脚本 向 父 上 下 文 发 送 消 息 时 触发 。 


























国 此 事件 也 可 以 使 用 navigator.serviceWorker.addEventListener('message', handler) 








处 理 。 
ServiceWorkerContainer 支持 下 列 属 性 。 
口 ready: 返回 期 约 ， 解决 为 激活 的 ServiceWorkerRegistration 对 象 。 该 期 约 不 会 拒绝 。 
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口 controller: 返回 与 当前 页 面 关联 的 激活 的 ServiceWorker 对 象 ， 如 果 没 有 激活 的 服务 工作 
者 线程 则 返回 nul1。 

ServiceWorkerContainer 支持 下 列 方法 。 

D register(): 使 用 接收 的 url 和 options 对 象 创建 或 更 新 ServiceWorkerRegistration。 

口 getRegistration(): 返回 期 约 , 解决 为 与 提供 的 作用 域 匹配 的 serviceworkerRegistration 

对 象 ; 如 果 没 有 匹配 的 服务 工作 者 线程 则 返回 undefined。 

口 getRegistrations(): 返回 期 约 ， 解决 为 与 ServiceWorkerContainer 关联 的 Service- 

WorkerRegistration 对 象 的 数组 ; 如 果 没 有 关联 的 服务 工作 者 线程 则 返回 空 数组 。 

口 startMessage() : 开始 传送 通过 client .postMessage () 派 发 的 消息 。 



























































4. 使 用 serviceWorkerRegistration 对 象 

ServiceWorkerRegistration 对 象 表示 注册 成 功 的 服务 工作 者 线程 。 该 对 象 可 以 在 register () 
返回 的 解决 期 约 的 处 理 程序 中 访问 到 。 通过 它 的 一 些 属 性 可 以 确定 关联 服务 工作 者 线程 的 生命 周期 状态 。 

调用 navigator.serviceWorker.register() 之 后 返回 的 期 约会 将 注册 成 功 的 service- 
WorkerRegistration 对 象 (注册 对 象 ) 发 送 给 处 理 函 数 。 在 同一 页 面 使 用 同一 URL 多 次 调用 该 方法 
会 返回 相同 的 注册 对 象 。 

navigator.serviceWorker.register('./serviceWorker.js') 


.then((registrationA) => { 
console.log(registrationA); 

































































navigator.serviceWorker.register('./serviceWorker2.js') 
.then((registrationB) => { 

console.log(registrationA === registrationB); 

上 

站 


ServiceWorkerRegistration 支持 以 下 事件 处 理 程序 。 
口 onupdatefound: 在 服务 工作 者 线程 触发 updatefoung 事件 时 会 调用 指定 的 事件 处 理 程序 。 
加 此 事件 会 在 服务 工作 者 线程 开始 安装 新 版 本 时 触发 ， 表 现 为 ServiceWorkerRegistration. 
installing 收 到 一 个 新 的 服务 工作 者 线程 。 
国 此 事件 也 可 以 使 用 serv serviceWorkerRegistration.adqEventListener('updatefound ' ， 
handler) 处理。 
ServiceWorkerRegistration 支持 以 下 通用 属性 。 
口 scope: 返回 服务 工作 者 线程 作用 域 的 完整 URL 路 径 。 该 值 源 自 接收 服务 脚本 的 路 径 和 在 
register () 中 提供 的 作用 域 。 
口 navigationPreload: 返回 与 注册 对 象 关联 的 NavigationPreloadManager 实例 。 
口 pushManager: 返回 与 注册 对 象 关联 的 pushnManager 实例 。 
ServiceWorkerRegistration 还 支持 以 下 属性 ， 可 用 于 判断 服务 工作 者 线程 处 于 生命 周期 的 什 
么 阶段 。 
D installing: 如 果 有 则 返回 状态 为 installing (安装 ) 的 服务 工作 者 线程 ， 否 则 为 null。 
口 waiting: 如 果 有 则 返回 状态 为 waiting (等 待 ) 的 服务 工作 者 线程 ， 否 则 为 null。 
口 active: 如 果 有 则 返回 状态 activating 或 active( 活 动 ) 的 服务 工作 者 线程 ,否则 为 null。 
注意 , 这 些 属性 都 是 服务 工作 者 线程 状态 的 一 次 性 快照 。 这 在 大 多 数 情况 下 是 没有 问题 的 ， 因 为 活 
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动 状态 的 服务 工作 者 线程 在 页 面 的 生命 周期 内 不 会 改变 状态 ， 除 非 强 制 这 样 做 ( 比如 调用 Service- 
WorkerGlobalScope.skipwaiting () )。 
ServiceWorkerR 支持 下 列 方法 。 
口 getNotifications(): 返回 期 约 ， 解决 为 Notification 对 象 的 数组 。 
口 showNotifications(): 显示 通知 ， 可 以 配置 title 和 options 参数 。 
DQ update(): ee 如 果 新 脚本 不 同 ， 则 重新 初始 化 。 
口 unregister(): 取消 服务 工作 者 线程 的 注册 。 该 方法 会 在 服务 工作 者 线程 执行 完 再 取消 注册 。 
5. 使 用 serviceWworker 对 象 
ServiceWorker 对 象 可 以 通过 两 种 方式 获得 :通过 ServiceWorkerContainer 对 象 的 controller 
属性 和 通过 serviceWorkerRegistration 的 active 属性 。 该 对 象 继承 Worker 原型 ， 因 此 包括 其 
所 有 属性 和 方法 , 但 没有 terminate() 方 法 。 
ServiceWorker 支持 以 下 事件 处 理 程序 。 
口 onstatechange: ServiceWorker 发 生 statechange 事件 时 会 调用 指定 的 事件 处 理 程序 。 

国 此 事件 会 在 ServiceWorker .state 变化 时 发 生 。 

国 此 事件 也 可 以 使 用 servicewWorker.addEventListener('statechange'，handler) 处 理 。 
ServiceWorker 支持 以 下 属性 。 
口 scriptURL: 解析 后 注册 服务 工作 者 线程 的 URL。 例 如 ， 如 果 服 务工 作者 线程 是 通过 相对 路 径 

' ./serviceWorker .js' 创 建 的 , 且 注 册 在 https:/www.example.com 上 , 则 scriptURL 属性 将 

返回 "https://www.example.com/serviceWorker.js"。 
口 state: 表示 服务 工作 者 线程 状态 的 字符 串 ， 可 能 的 值 如 下 。 

国 installing 


国 imstalled 
国 activating 







































































































































































国 activated 
国 redundant 


6. 服务 工作 者 线程 的 安全 限制 

与 其 他 工作 者 线程 一 样 ， 服 务工 作者 线程 也 受 加 载 脚本 对 应 源 的 常规 限制 ( 更 多 信息 参见 27.2.1 节 )。 
此 外 ， 由 于 服务 工作 者 线程 几乎 可 以 任意 修改 和 重 定向 网 络 请 求 ， 以 及 加 载 静态 资源 ， 服 务工 作者 线程 
API 只 能 在 安全 上 下 文 (HTTPS ) 下 使 用 。 在 非 安全 上 下 文 (HTTP ) 中 ,navigator.serviceWorker 
是 undefinedq。 为 方便 开发 ， 浏 览 吉 升 免 了 通过 localhost 或 127.0.0.1 在 本 地 加 载 的 页 面 的 安全 上 
下 文 规则 。 


























注意 可 以 通过 window.isSecureContext 确定 当前 上 下 文 是 





7. ServiceWorkerGlobalScope 

在 服务 工作 者 线程 内 部 , 全 局 上 下 文 是 ServiceWorkerGlobalScope 的 实例 。ServiceWorker- 
GlobalScope 继承 自 WorkerGlobalscope， 因 此 拥有 它 的 所 有 属性 和 方法 。 服 务工 作者 线程 可 以 通 
过 self 关键 字 访 问 该 全 局 上 下 文 。 

ServiceWorkerGlobalScope 通过 寸 以 下 属性 和 方法 扩展 了 WorkerGlobalScopeo 
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口 caches: 返回 服务 工作 者 线程 的 cachestorage 对 象 。 
口 clients: 返回 服务 工作 者 线程 的 clients 接口 ， 用 于 访问 底层 client 对 象 。 
口 registration: 返回 服务 工作 者 线程 的 serviceworkerRegistration 对 象 。 
0 ee : 强制 服务 工作 者 线程 进入 活动 状态 ， 需 要 跟 clients.claim() 一 起 使 用 。 
D fetch() : 在 服务 工作 者 线程 内 发 送 常规 网 络 请 求 ;用 于 在 服务 工作 者 线程 确定 有 必要 发 送 实 
ee 

虽然 专用 工作 者 线程 和 共享 工作 者 线程 只 有 一 个 message 事件 作为 输入 ,但 服务 工作 者 线程 则 可 

以 接收 很 多 事件 ， 包 括 页 面 操 作 、 通 知 操作 触发 的 事件 或 推送 事件 。 






















































































注意 根据 浏览 器 实现 ,在 SeviceWorker 中 把 日 志 打 印 到 控制 台 不 一 定 能 在 浏览 器 默 


认 控 制 台中 看 到 。 





服务 工作 者 线程 的 全 局 作用 域 可 以 监听 以 下 事件 ， 这 里 进行 了 分 类 。 

@ 服务 工作 者 线程 状态 

口 install: 在 服务 工作 者 线程 进入 安装 状态 时 触发 (在 客户 端 可 以 通过 serviceWorker- 
Registration.installing 判断 ), 也 可 以 在 self.onintall 属 性 上 指定 该 事件 的 处 理 程序 。 
加 这 是 服务 工作 者 线程 接收 的 第 一 个 事件 ， 在 线程 一 开始 执行 时 就 会 触发 。 
加 每 个 服务 工作 者 线程 只 会 调用 一 次 。 

D activate: 在 服务 工作 者 线程 进入 激活 或 已 激活 状态 时 触发 (在 客户 端 可 以 通过 
ServiceWorkerRegistration.active 判断 ), 也 可 以 在 self.onactive 属性 上 指定 该 事件 
的 处 理 程序 。 
加 此 事件 在 服务 工作 者 线程 准备 好 处 理 功 能 性 事件 和 控制 客户 端 时 触发 。 
量 此 事件 并 不 代表 服务 工作 者 线程 在 控制 客户 端 ， 只 表明 具有 控制 客户 端的 条 件 。 

@ Fetch API 

口 fetch: 在 服务 工作 者 线程 截获 来 自主 页 面 的 fetch () 请 求 时 触发 。 服 务工 作者 线程 的 fetch 
事件 处 理 程序 可 以 访问 FetchEvent ， 可 以 根据 需要 调整 输出 。 也 可 以 在 self .onfetch 属性 
上 指定 该 事件 的 处 理 程序 。 

@ Message API 

口 message: 在 服务 工作 者 线程 通过 postMesssage () 获 取 数据 时 触发 。 也 可 以 在 self .onmessage 

属性 上 指定 该 事件 的 处 理 程序 。 

© Notification API 

口 notificationclick: 在 系统 告诉 浏览 器 用 户 点 击 了 ServiceWorkerRegistration.showNoti- 
fication() 生 成 的 通知 时 触发 。 也 可 以 在 self .onnotificationclick 属性 上 指定 该 事件 的 
处 理 程序 。 

口 notificationclose: 在 系统 告诉 浏览 器 用 户 关闭 或 取消 显示 了 serviceworkerRegistration . 
showNotification() 生 成 的 通知 时 触发 。 也 可 以 在 self.onnotificationclose 属性 上 指 
定 该 事件 的 处 理 程序 。 
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@ Push API 

口 push: 在 服务 工作 者 线程 接收 到 推送 消息 时 触发 。 也 可 以 在 self .onpush 属性 上 指定 该 事件 
的 处 理 程序 。 

口 bushsubscriptionchange: 在 应 用 控制 外 的 因素 ( 非 JavaScript 显 式 操作 ) 导致 推送 订阅 状 








态 变 化 时 触发 。 也 可 以 在 self .onpushsubscriptionchange 属性 上 指定 该 事件 的 处 理 程序 。 








注意 ”有些 浏览 器 也 支持 async 事件 ， 该 事件 是 在 Background Sync API 中 定义 的 。 


Background Sync API 还 没有 标准 化 ， 目 前 只 有 Chrome 和 Opera 支持 ， 因 此 本 书 没 介绍 。 





8. 服务 工作 者 线程 作用 域 限制 

服务 工作 者 线程 只 能 拦截 其 作用 域内 的 客户 端 发 送 的 请 求 。 作 用 域 是 相对 于 获取 服务 脚本 的 路 径 定 
义 的 。 如 果 没 有 在 register () 中 指定 ， 则 作用 域 就 是 服务 脚本 的 路 径 。 

( 本 章 中 涉及 注册 服务 工作 者 线程 的 例子 都 使 用 脚本 绝对 URL, 以 避免 混淆 。) 下 面 第 一 个 例子 演示 
通过 根 目录 获取 服务 脚本 对 应 的 默认 根 作用 域 : 


navigator.serviceWorker.register('/serviceWorker.js') 

.then( (serviceWorkerRegistration) => { 
console.log(serviceWorkerRegistration.scope); 

// https://example.com/ 

2 


























// 以 下 请 求 部 会 被 拦截 : 

// fetch('/foo0.js'); 

// fetch('/foo/fooScript.js'); 
// fetch('/baz/bazScript.js'); 


下 面 的 例子 演示 了 通过 根 目 录 获 取 服 务 脚本 但 指定 了 同一 目录 作用 域 : 


navigator.serviceWorker.register('/serviceWorker.js', {scope: './'}) 

.then( (serviceWorkerRegistration) => { 
console.log(serviceWorkerRegistration.scope); 

// https://example.com/ 

好 


























// 以 下 请 求 都 会 被 拦截 : 

// fetch('/foo.js')， 

// fetch('/foo/fooScript.js'); 
// fetch('/baz/bazScript.js'); 


下 面 的 例子 演示 了 通过 根 目 录 获 取 服 务 脚本 但 限定 了 目录 作用 域 : 


navigator.serviceWorker.register('/serviceWorker.js', {scope: './foo'}) 

.then( (serviceWorkerRegistration) => { 
console.log(serviceWorkerRegistration.scope); 

// https://example.com/foo/ 

和 这 





























// 以 下 请 求 都 会 被 拦截 : 
// fetch('/foo/fooSscript.js'); 





// 以 下 请 求 都 不 会 被 拦截 : 
// fetch('/fo0.js'); 
// fetch('/baz/bazScript.js'); 
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下 面 的 例子 演示 了 通过 舱 套 的 二 级 目录 获取 服务 脚本 对 应 的 同一 目录 作用 域 : 


navigator.serviceWorker.register('/foo/serviceWorker.js') 
.then( (serviceWorkerRegistration) => { 
console.log(serviceWorkerRegistration.scope); 
// https://example.com/foo/ 
> 





// 以 下 请 求 都 会 被 拦截 : 
// fetch('/foo/fooScript.js'); 


// 以 下 请 求 都 不 会 被 拦截 : 
// fetch('/foo0.js'); 
// fetch('/baz/bazScript.js'); 


服务 工作 者 线程 的 作用 域 实际 上 遵循 了 目录 权限 模型 ， 即 只 能 相对 于 服务 脚本 所 在 路 径 缩小 作用 
域 。 像 下 面 这 样 扩展 作用 域 会 抛 出 错误 : 


navigator.serviceWorker.register('/foo/serviceWorker.js', {scope: '/'}); 












































// Error: The path of the provided scope 'https://example.com/' 
// is not under the max scope allowed 'https://example.com/foo/' 


通常 ， 服 务工 作者 线程 作用 域 会 使 用 末尾 带 斜 杠 的 绝对 路 径 来 定义 ， 比 如 : 
navigator.serviceWorker.register('/serviceWorker.js', {scope: '/foo/'}) 

这 样 定义 作用 域 有 两 个 目的 : 将 脚本 文件 的 相对 路 径 与 作用 域 的 相对 路 径 分 开 ， 同 时 将 该 路 径 本 身 
排除 在 作用 域 之 外 。 例 如 ， 对 于 前 面 的 代码 片段 而 言 ， 可 能 不 需要 在 服务 工作 者 线程 的 作用 域 中 包含 路 
径 /foo。 在 末尾 加 上 一 个 和 斜 杠 就 可 以 明确 排除 /foo。 当 然 ， 这 要 求 绝 对 作用 域 路 径 不 能 扩展 到 服务 工 
作者 线程 路 径 外 。 

如 果 想 扩展 服务 工作 者 线程 的 作用 域 ， 主 要 有 两 种 方式 。 

口 通过 包含 想 要 的 作用 域 的 路 径 提 供 ( 获取 ) 服务 脚本 。 
口 给 服务 脚本 的 响应 添加 service-Worker-Allowed 头 部 ， 把 它 的 值 设 置 为 想 要 的 作用 域 。 该 
作用 域 值 应 该 与 register () 中 的 作用 域 值 一 致 。 


27.4.2 ”服务 工作 者 线程 缓存 


在 服务 工作 者 线程 之 前 , 网 页 缺少 缓存 网 络 请 求 的 稳健 机 制 。 浏 览 器 一 直 使 用 HTTP 缓存 ,但 HTTP 
缓存 并 没有 对 JavaScript 暴露 编程 接口 , 上 且 其 行为 是 受 JavaScript 运行 时 外 部 控制 的 。 可 以 开发 临时 缓存 
机 制 ， 绥 存 响应 字符 串 或 blob ， 但 这 种 策 比较 麻烦 目 效率 低 。 

JavaScript 缓存 的 实现 之 前 也 有 过 尝试 。MDN 文档 也 介绍 了 : 

之 前 的 尝试 ， 即 AppCache， 看 起 来 是 个 不 错 的 想法 ， 因 为 它 支 持 非 常 容 易 地 指定 要 缓存 

的 资源 。 可 是 ， 它 对 你 想 要 做 的 事情 做 了 很 多 假设 ， 当 应 用 程序 没有 完全 遵循 这 些 假设 时 ， 它 

就 崩 江 了 。 
服务 工作 者 线程 的 一 个 主要 能 力 是 可 以 通过 编程 方式 实现 真正 的 网 络 请 求 缓存 机 制 。 与 HTTP 缓存 
或 CPU 缓存 不 同 ， 服 务工 作者 线程 绥 存 非常 简单 。 

口 服务 工作 者 线程 缓存 不 自动 缓存 任何 请 求 。 所 有 缓存 都 必须 明确 指定 
口 服务 工作 者 线程 缓存 没有 到 期 失效 的 概念 。 除 非 明 确 删除 ， 否 则 缓存 内 容 一 直 有 效 。 
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口 服务 工作 者 线程 缓存 必须 手动 更 新 和 删除 。 


保存 新 缓存 。 
D 唯一 的 浏览 器 强制 逐 出 策略 基于 服务 工作 者 线程 缓存 




















口 缓存 版 本 必须 手动 管理 。 每 次 服务 工作 者 线程 更 新 ， 新 服务 工作 者 线程 负责 提供 新 的 缓存 刍 以 





占用 的 空间 。 服 务工 作者 线程 负责 管理 自 














己 缓存 占用 的 空间 。 缓存 超过 浏览 器 限制 时 , 浏览 器 会 基于 最 近 最 少 使 用 ( LRU,， Least Recently 








Used ) 原则 为 新 缓存 腾 出 空间 。 














本 质 上 ， 服 务工 作者 线程 缓存 机 制 是 一 个 双 层 字典 ， 其 中 顶级 字典 的 条 目 映射 到 二 级 诅 套 字典 。 项 


级 字典 是 CacheStorage 对 象 ， 可 以 通过 服务 工作 者 线程 全 








局 作用 域 的 caches 属性 访问 。 顶 级 字典 





中 的 每 个 值 都 是 一 个 cache 对 象 ， 该 对 象 也 是 个 字典 ， 是 Request 对 象 到 Response 对 象 的 映射 。 





与 LocalStorage 一 样 ，Cache 对 象 在 CacheStorage 
界限 。 此 外 ，cache 条 上 日 只 能 以 源 为 基础 存 取 。 





字典 中 无 限期 存在 ， 会 超出 浏览 器 会 话 的 


注意 ”虽然 CacheStorage 和 Cache 对 象 是 在 Service Worker 规范 中 定义 的 , 但 它们 


也 可 以 在 主页 面 或 其 他 工作 者 线程 中 使 用 。 





1. cacheStorage 对 象 





CacheStorage 对 象 是 映射 到 cache 对 象 的 字符 串 键 / 值 存储 。cachestorage 提供 的 API 类 似 于 
异步 Map。cachestorage 的 接口 通过 全 局 对 象 的 caches 属性 暴露 出 来 。 





console.log(caches); // CacheStorage {} 














CacheStorage 中 的 每 个 缓存 可 以 通过 给 caches .open () 
转换 为 字符 串 。 如 果 绥 存 不 存在 ， 就 会 创 
Cache 对 象 是 通过 期 约 返回 的 


caches.open('vl').thenl(console.1og); 




















丛 


[e) 


// Cache {} 


() 传人 相应 字符 串 键 取得 。 非 字符 串 键 会 


与 Map 类似，cacheStorage 也 有 has()、delete() 和 keys() 方 法 。 这 些 方法 与 Map 上 对 应 方 





法 类 似 ， 但 都 基于 期 约 。 


// 打开 新 缓存 V1 
// 检查 缓存 vI1 是 否 存在 
// 检查 不 存在 的 缓存 V2 


caches.open('vil') 

.then(() => caches.has('v1')) 
.then (console.1o0g) // true 
.then(() => caches.has('v2')) 
.then(console.log); // false 


// 打开 新 缓存 vI 

// 检查 缓存 vIL 是 否 存在 

// 删除 缓存 vI 

// 再 次 检查 缓存 V1 是 否 存 在 


caches.open('v1') 
.then(() => caches.has('v1')) 
.then (console.1o0g) // true 
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.then(() => caches.delete('v1')) 
.then(() => caches.has('v1')) 
.then(console.1log); // false 


// 打开 缓存 vI、Vv3 和 V2 
// 检查 当前 缓存 的 键 
// 注意 : 缓存 键 按 创建 顺序 输出 


caches.open('V1') 


.then 


.then(() => caches.open('v3')) 
.then(() => caches.open('v2')) 
.then(() => caches.keys()) 

(a 


onsole.l1og); // ["vi", "v3", "v2"] 














CacheStorage 接口 还 有 一 个 match() 方 法 , 可 以 根据 Request 对 象 搜索 Cachestorage 中 的 所 
有 cache 对象。 搜索 顺序 是 cacheStorage.keys () 的 顺序 ， 返 回 匹配 的 第 一 个 响应 : 

// 创建 一 个 请 求 键 和 两 个 响应 值 

const request = new Request(''); 


const responsel = new Response('vl'); 
const response2 = new Response('v2'); 








// 用 同一 个 键 创 建 两 个 缓存 对 象 ， 最 终 会 先 找 到 V1 

// 因为 它 排 在 caches .keys () 输 出 的 前 面 

caches.open('vl') 

.then((vlcache) => vlcache.put (regquest, responsel)) 
() => caches.open('v2')) 

(v2cache) => v2cache.put (request, response2)) 
() => caches .match (request)) 

(response) => response.text()) 

console.1og); // v1 


CacheStorage.match() 可 以 接收 一 个 options 配置 对 象 。 下 一 节 会 介绍 该 对 象 。 

2. cache 对 象 

CacheStorage 通过 字符 串 映 射 到 cache 对 象 。cache 对 象 跟 cacheStorage 一 样 ， 类 似 于 异步 
的 Map。Cache 键 可 以 是 URL 字符 串 ， 也 可 以 是 Request 对 象 。 这 些 键 会 映射 到 Response 对 象 。 

服务 工作 者 线程 缓存 只 考虑 缓存 HTTP 的 GET 请 求 。 这 样 是 合理 的 ， 因 为 GET 请 求 的 响应 通常 不 
会 随时 间 而 改变 。 另 一 方面 ,默认 情况 下 ，cache 不 允许 使 用 POST 、PUT 和 DELETE 等 请 求 方法 。 这 
些 方法 意味 着 与 服务 器 动态 交换 信息 ， 因 此 不 适合 客户 端 缓存 。 

为 填充 cache， 可 能 使 用 以 下 三 个 方法 。 

口 put (request，response): 在 键 (Request 对 象 或 URL 字符 串 ) 和 值 (Response 对 象 ) 

同时 存在 时 用 于 添加 缓存 项 。 该 方法 返回 期 约 ， 在 添加 成 功 后 会 解决 。 

口 aaa(reauest) : 在 只 有 Request 对 象 或 URL 时 使 用 此 方法 发 送 fetcn () 请求， 并 缓存 响应 。 

该 方法 返回 期 约 ， 期 约 在 添加 成 功 后 会 解决 。 

口 aqaqAll (requests): 在 希望 填充 全 部 缓存 时 使 用 ， 比 如 在 服务 工作 者 线程 初始 化 时 也 初始 化 
缓存 。 该 方法 接收 URL 或 Request 对 象 的 数组 。adqA11 () 会 对 请 求 数组 中 的 每 一 项 分 别 调用 
adq ()。 该 方法 返回 期 约 ， 期 约 在 所 有 缓存 内 容 添 加 成 功 后 会 解决 。 

与 Map 类 似 , cache 也 有 delete() 和 keys() 方 法 。 这些 方法 与 Map 上 对 应 方法 类 似 , 但 都 基于 

期 约 。 
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Const requestl1 = new Redquest ('https://www.foo.com' ) : 
Const responsel = new Response( 'fooResponse ' ) ; 


caches.open('vil') 

.then((cache) => { 
cache.put (requestl1, responsel) 
.then(() => cache.keys()) 
.then(console.1og) // [Request] 
.then(() => cache.delete(request1)) 
.then(() => cache.keys()) 
.then(console.1o0g); // [] 

上 


要 检索 cache， 可 以 使 用 下 面 的 两 个 方法 。 
口 matchAll (request，options): 返回 期 约 ， 期 约 解决 为 匹配 缓存 中 Response 对 象 的 数组 。 
加 此 方法 对 结构 类 似 的 缓存 执行 批量 操作 ， 比 如 删除 所 有 组 存在 /images 目录 下 的 值 。 
图 可 以 通过 options 对 象 配置 请 求 匹配 方式 ， 本 节 稍 后 会 介绍 。 
口 match (request，options): 返回 期 约 ， 期 约 解决 为 匹配 缓存 中 的 Response 对 象 ; 如 果 没 
命中 缓存 则 返回 undqefined。 
图 本 质 上 相当 于 matchAll (request, options)[0]。 
图 可 以 通过 options 对 象 配置 请 求 匹配 方式 ， 本 节 稍 后 会 介绍 。 
绥 存 是 否 命 中 取决 于 URL 字符 串 和 /或 Request 对 象 URL 是 和 否 匹 配 。UREL 字符 串 和 Request 对 
象 是 可 互 换 的 ， 因 为 匹配 时 会 提取 Request 对 和 象 的 URL。 下 面 的 例子 演示 了 这 种 互 换 性 : 


const requestl1 
const request?2 










































































T 


= 'https://www.foo.com'; 

= new Request('https://www.bar.com'); 
Const responsel = new Response('fooResponse'); 

Const response2 = new Response('barResponse'); 


caches.open('vl') .then((cache) => { 
cache.put (request1, responsel) 


.then(() => cache.put (request2, response2)) 
.then(() => cache.match (new Request('https://www.foo.com'))) 
.then( (response) => response.text()) 





.then(() => cache.match('https://www.bar.com')) 
.then( (response) => response.text()) 
.then(console.l1og); // barResponse 

}); 


cache 对 象 使 用 Request 和 Response 对 象 的 clone ( ) 方 法 创建 副本 ， 并 把 它们 存储 为 键 / 值 对 。 
面 的 例子 演示 了 这 一 点 ， 因 为 从 缓存 中 取得 的 实例 并 不 等 于 原始 的 键 / 值 对 : 


Const requestl1 = new Redquest ('https://www.foo.com' ) : 
Const responsel = new Response( 'fooResponse ' ) ; 





( 

( 

( = 
.then(console.1og) // fooResponse 

( 

( 

( 














下 

















caches.open('vil') 
.then((cache) => { 
cache.put (requestl1, responsel) 





.then(() => cache.keys()) 

.then((keys) => console.log(keys[0] === request1)) // false 
.then(() => cache.match (request1)) 

.then( (response) => console.log(response === responsel)); // false 


}); 
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Cache.match()、Cache.matchAll() 和 CacheStorage.match() 都 支持 可 选 的 options 对 象 ， 
它 允 许 通 过 设置 以 下 属性 来 配置 URL 匹配 的 行为 。 



































口 cacheName: 


指定 字符 串 的 缓存 值 。 








例如 ，https://example.com?foo=bar 会 匹配 











子 展示 了 POST 请 求 匹 配 GET 请 求 : 


const requestl1 
const responsel 


const postRequestl1 


caches.open('V1L') 
.then((cache) => { 

cache.put (request1, 

.then(() 
.then(console.1og) 
.then(() 
.then(console.1og); 
时 


responsel) 


// undefined 


const requestl1 
const responsel 


const acceptRequest1 


只 有 CachesStorage.matchAll() 支 持 。 设置 为 字符 串 时 ， 只 会 匹配 cache 键 为 





口 ijgnoreSearch: 设置 为 true 时， 在 匹配 URL 时 忽略 查询 字符 串 ， 包 括 请 求 查询 和 缓存 键 。 


https://example.com。 





new Request ('https: 
new Response('fooResponse'); 


=> cache .match (postRequest!]1, 
// Response {} 


new Reduest ( 


口 ignoreMethod: 设置 为 true 时 ， 在 匹配 URL 时 忽略 请 求 查询 的 HTTP 方法 。 比 如 下 面 的 例 


/V/www.foo.com') 


new Reduest ('https://www.foo.com'， 
{ method: 


"POST' }); 


=> cache.match (postRequest1)) 


{ ignoreMethod: true })) 


ignorevVary: 匹配 的 时 候 考 虑 HITP 的 vary 头 部 ， 该 头 部 指定 哪个 请 求 头 部 导致 服务 器 响应 
不 同 的 值 。ignorevary 设置 为 true 时 ， 


new Request ('https: 
new Response('fooResponse', 
{ headers: 


在 匹配 URL 时 忽略 Vary 头 部 。 


/V/www.foo.com') 


{'Vary': 'Accept' }}); 
https://www.foo.com', 
{ headers: { 'Accept': 'text/json' } }); 


caches.open('V1L') 

.then( (cache) => { 
cache.put (zeduest1， 
.then(() 
.then(console.1og) 
.七 nen ( 
.七 nen ( 

大 


3. 最 大 存储 空间 


responsel) 
// undefined 


( 
console.1og); 


浏览 器 需要 限制 缓存 占用 的 磁盘 空间 ， 否 则 无 限制 存储 势必 会 造成 滥用 。 该 存储 空间 的 限制 没有 任 














) => cache.match(acceptRequest!1, 
// Response {} 


=> Cache.match(acceptRequest1)) 


{ ignoreVary: true })) 





上 





何 规范 定义 ， 完 全 由 浏览 器 供应 商 的 个 人 喜好 决定 。 





使 
空间 。 此 方法 只 在 安全 上 下 文中 可 用 : 


navigator.storage.estimate() 
.then(console.1o0g); 














// 不 同 浏 览 器 的 输出 可 能 不 同 : 


// { quota: 2147483648, usage: 590845 








月 StorageEstimate API 可 以 近似 地 获悉 有 多 少 空间 可 用 ( 以 字 节 为 单位 )， 以 及 当前 使 用 了 多 少 


} 
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根据 Service Worker 规范 : 
这 些 并 不 是 确切 的 数值 ， 考 虑 到 压缩 、 去 重 和 混淆 等 安全 原因 ， 该 数字 并 不 精确 。 


27.4.3 ”服务 工作 者 线程 客户 端 


服务 工作 者 线程 会 使 用 client 对 象 跟 踪 关 联 的 窗口 、 工 作 线程 或 服务 工作 者 线程 。 服 务工 作者 线 
程 可 以 通过 clients 接口 访问 这 些 client 对 象 ,该 接口 暴露 在 全 局 上 下 文 的 self.clients 属性 上 。 
client 对 象 支持 以 下 属性 和 方法 。 

口 ida: 返回 客户 端的 全 局 唯一 标识 符 ， 例 如 7e4248ec-b25e-4b33-bl15f-4af8bpb0a3ac4。ia 

可 用 于 通过 client .get () 获 取 客 户 端的 引用 。 

口 type: 返回 表示 客户 端 类 型 的 字符 串 。type 可 能 的 值 是 wingdow、worker 或 sharedworker。 

Our1: 返回 客户 端的 URL。 

口 postMessage () : 用 于 向 单个 客户 端 发 送 消息 。 

clients 接口 支持 通过 get () 或 matchaAll1() 访 问 client 对 象 .这 两 个 方法 都 通过 期 约 返回 结 
matchAll () 也 可 以 接收 options 对 象 ， 该 对 象 支持 以 下 属性 。 

口 includeUncontrolled: 在 设置 为 true 时 , 返回 结果 包含 不 受 当 前 服务 工作 者 线程 控制 的 客 

户 端 。 默 认为 false。 

口 type: 可 以 设置 为 window、worker 或 shareqworker， 对 返回 结果 进行 过 滤 。 默 认为 al1， 
返回 所 有 类 型 的 客户 端 。 

clients 接口 也 支持 以 下 方法 。 

口 openwindqow(ur1) : 在 新 窗口 中 打开 指定 URL， 实 际 上 会 给 当前 服务 工作 者 线程 添加 一 个 新 
Client。 这 个 新 client 对 象 以 解决 的 期 约 形式 返回 。 该 方法 可 用 于 回应 点 击 通 知 的 操作 ， 此 
时 服务 工作 者 线程 可 以 检测 单 击 事件 并 作为 响应 打开 一 个 窗口 。 

口 claim() : 强制 性 设置 当前 服务 工作 者 线程 以 控制 其 作用 域 中 的 所 有 客户 端 , claim() 可 用 于 不 
希望 等 待 页 面 重新 加 载 而 让 服务 工作 者 线程 开始 管理 页 面 。 


27.4.4 服务 工作 者 线程 与 一 致 性 


理解 服务 工作 者 线程 最 终 用 途 十 分 重要 : 让 网 页 能 够 模拟 原生 应 用 程序 。 要 像 原生 应 用 程序 一 样 ， 

服务 工作 者 线程 必须 支持 版 本 控制 ( versioning )。 

从 全 局 角度 说 ,服务 工作 者 线程 的 版 本 控制 可 以 确保 任何 时 候 两 个 网 页 的 操作 都 有 一 致 性 。 该 一 致 

性 可 以 表现 为 如 下 两 种 形式 。 

口 代码 一 致 性 。 网 页 不 是 像 原 生 应 用 程序 那样 基于 一 个 二 进 制 文件 创建 , 而 是 由 很 多 HITML CSS、 
JavaScript、 图 片 、JSON， 以 及 页 面 可 能 加 载 的 任何 类 型 的 文件 创建 。 网 页 经 常会 递增 更 新 ， 即 
版 本 升级 ， 以 增加 或 修改 行为 。 如 果 网 页 总 共 加 载 了 100 个 文件 ， 而 加 载 的 资源 同时 来 自 第 1 
版 和 第 2 版 , 那么 就 会 导致 完全 无 法 预测 , 而 且 很 可 能 出 错 。 服 务工 作者 线程 为 此 提供 了 一 种 强 
制 机 制 ， 确 保 来 自 同 源 的 所 有 并 存 页 面 始终 会 使 用 来 自 相同 版 本 的 资源 。 

口 数据 一 致 性 。 网 页 并 非 与 外 界 隔绝 的 应 用 程序 。 它 们 会 通过 各 种 浏览 器 API 如 Localstorage 
或 IndexegDB 在 本 地 读 取 并 写 人 数据 ; 也 会 向 远程 API 发 送 请 求 并 获取 数据 。 这 些 获 取 和 写 入 
数据 的 格式 在 不 同 版 本 中 可 能 也 会 变化 。 如 果 一 个 页 面 以 第 1 版 中 的 格式 写 人 了 数据 , 第 二 个 页 
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面 以 第 2 版 中 的 格式 读 取 该 数据 就 会 导致 无 法 预测 的 结果 甚至 出 错 。 服 务工 作者 线程 的 资源 一 致 

性 机 制 可 以 保证 网 页 输入 /输出 行为 对 同 源 的 所 有 并 存 网 页 都 相同 。 

为 确保 一 致 性 ， 服 务工 作者 线程 的 生命 周期 不 遗 余力 地 避免 出 现 有 损 一 致 性 的 现象 。 比 如 下 面 这 些 

可 能 。 

口 服务 工作 者 线程 提早 失败 。 在 安装 服务 工作 者 线程 时 ， 任 何 预料 之 外 的 问题 都 可 能 阻止 服务 工 
作者 线程 成 功 安装 。 包 括 服务 脚本 加 载 失 败 、 服 务 脚本 中 存在 语法 或 运行 时 错误 、 无 法 通过 
importScripts() 加 载 工 作者 线程 依赖 ， 甚 至 加 载 某 个 缓存 资源 失败 。 

口 服务 工作 者 线程 激进 更 新 。 浏览 器 再 次 加 载 服务 脚本 时 ( 无 论 通 过 register () 手 动 加 载 还 是 基 
于 页 面 重 载 )， 服 务 脚本 或 通过 importscripts () 加 载 的 依赖 中 哪 侦 有 一 个 字 节 的 差异 ， 也 会 
启动 安装 新 版 本 的 服务 工作 者 线程 。 

口 未 激活 服务 工作 者 线程 消极 活动 。 当 页 面 上 第 一 次 调用 register () 时 , 服务 工作 者 线程 会 被 安 
装 ， 但 不 会 被 激活 ， 并 且 在 导航 事件 发 生前 不 会 控制 页 面 。 这 应 该 是 合理 的 : 可 以 认为 当前 页 

面 已 加 载 了 资源 ， 因 此 服务 工作 者 线程 不 应 该 被 激活 ， 否 则 就 会 加 载 不 一 致 的 资源 。 

口 活动 的 服务 工作 者 线程 粘连 。 只 要 至 少 有 一 个 客户 端 与 关联 到 活动 的 服务 工作 者 线程 ， 浏 览 
就 会 在 该 源 的 所 有 页 面 中 使 用 它 。 浏 览 器 可 以 安装 新 服务 工作 者 线程 实例 以 替代 这 个 活动 的 实 
例 , 但 浏览 器 在 与 活动 实例 关联 的 客户 端 为 0 (或 强制 更 新 服务 工作 者 线程 ) 之 前 不 会 切换 到 新 

工作 者 线程 。 这 个 服务 工作 者 线程 逐 出 策略 能 够 防止 两 个 客户 端 同时 运行 两 个 不 同 版 本 的 服务 

工作 者 线程 。 


27.4.5 理解 服务 工作 者 线程 的 生命 周期 


Service Worker 规范 定义 了 6 种 服务 工作 者 线程 可 能 存在 的 状态 : 已 解析 (parsed )、 安 装 中 
(installing )、 已 安装 (installed )、 激 活 中 ( activating )、 已 激活 (activated ) 和 已 失效 (redundant )。 完 整 
的 服务 工作 者 线程 生命 周期 会 以 该 顺序 进入 相应 状态 , 尽管 有 可 能 不 会 进入 每 个 状态 。 安 装 或 激活 服务 
工作 者 线程 时 遇 到 错误 会 跳 到 已 失效 状态 。 

上 述 状态 的 每 次 变化 都 会 在 serviceworker 对 象 上 触发 statechange 事件 ， 可 以 像 下面 这 样 为 
它 添 加 一 个 事件 处 理 程序 : 


navigator.serviceWorker.register('./serviceWorker.js') 
.then((registration) => { 
registration.installing.onstatechange = ({ target: { state } }) => { 
console.log('state changed to', state); 
}; 
Ps 


1. 已 解析 状态 
调用 navigator.serviceWorker.register() 会 启动 创建 服务 工作 者 线程 实例 的 过 程 。 刚 创建 的 服 
务工 作者 线程 实例 会 进入 已 解析 状态 。 该 状态 没有 事件 ， 也 没有 与 之 相关 的 serviceworker.state 值 。 
















































































































































































注意 ”虽然 已 解析 (parsed ) 是 Service Worker 规范 正式 定义 的 一 个 状态 , 但 Service- 


Worker.prototype.state 永远 不 会 返回 "parsed"。 通 过 该 属性 能 够 返回 的 最 早 阶段 
Re Taal Lins 
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浏览 器 获取 脚本 文件 ， 然 后 执行 一 些 初 始 化 任务 ， 服 务工 作者 线程 的 生命 周期 就 开始 了 。 

(1) 确保 服务 脚本 来 自 相 同 的 源 。 

(2) 确保 在 安全 上 下 文中 注册 服务 工作 者 线程 。 

(3) 确保 服务 脚本 可 以 被 浏览 器 JavaScript 解释 器 成 功 解析 而 不 会 抛 出 任何 错误 。 

(4) 捕获 服务 脚本 的 快照 。 下 一 次 浏览 吉 下 载 到 服务 脚本 ， 会 与 这 个 快照 对 比 差 异 ， 并 据 此 决定 是 
否 应 该 更 新 服务 工作 者 线程 。 

所 有 这 些 任务 全 部 成 功 , 则 register() 返 回 的 期 约会 解决 为 一 个 ServiceWorkerRegistration 
对 象 。 新 创建 的 服务 工作 者 线程 实例 进入 到 安装 中 状态 。 

2. 安装 中 状态 

安装 中 状态 是 执行 所 有 服务 工作 者 线程 设置 任务 的 状态 。 这 些 任 务 包括 在 服务 工作 者 线程 控制 页 面 
前 必须 完成 的 操作 。 

在 客户 端 ， 这 个 阶段 可 以 通过 检查 serviceWorkerR gistration.installing 是 否 被 设置 为 
ServiceWorker 实例 : 


navigator.serviceWorker.register('./serviceWorker.js') 
.then( (registration) => { 
if (registration.installing) { 
console.log('Service worker is in the installing state'); 
} 
ps 


关联 的 serviceWorkerRegistration 对 象 也 会 在 服务 工作 者 线程 到 达 该 状态 时 触发 updatefound 



































事件 : 
navigator.serviceWorker.register('./serviceWorker.js') 
.then( (registration) => { 
registration.onupdatefound = () => 


console.log('Service worker is in the installing state'); 
}; 
} 


在 服务 工作 者 线程 中 ， 这 个 阶段 可 以 通过 给 install 事件 添加 处 理 程序 来 确 


self.oninstall = (installEvent) => { 
console.log('Service worker is in the installing state'); 


元 

安装 中 状态 频繁 用 于 填充 服务 工作 者 线程 的 缓存 。 服 务工 作者 线程 在 成 功 缓存 指定 资源 之 前 可 以 一 
直 处 于 该 状态 。 如 果 任 何 资源 缓存 失败 ， 服 务工 作者 线程 都 会 安装 失败 并 跳 至 已 失效 状态 。 

服务 工作 者 线程 可 以 通过 ExtendableEvent 停留 在 安装 中 状态 。InstallEvent 继承 自 Extendable- 
Event ， 因 此 暴露 了 一 个 API， 人 允许 将 状态 过 渡 延 迟到 期 约 解决 。 为 此 要 调用 ExtendableEvent. 
waitUntil() 方 法 , 该 方法 接收 一 个 期 约 参数 , 会 将 状态 过 渡 延 迟到 这 个 期 约 解决 。 例 如 ,下 面 的 例子 
可 以 延迟 $ 秒 再 将 状态 过 渡 到 已 安装 状态 : 


self.oninstall = (installEvent) => { 
installEvent .waitUntil( 
new Promise((resolve, reject) => setTimeout (resolve, 5000)) 
); 


更 接近 实际 的 例子 是 通过 cache.adqaAl1l1() 绥 存 一 组 资源 之 后 再 过 渡 
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CONnst CACHE. KEY SS "v1 


self.oninstall = (installEvent) => { 
installEvent .waitUntill( 
caches .open (CACHE KEY) 
.then((cache) => cache.addAll([ 
"foo.js'， 
'bar.html', 
'baz.css', 
])) 
); 


如 果 没 有 错误 发 生 或 者 没有 拒绝 ， 服 务工 作者 线程 就 会 前 进 到 已 安装 状态 。 

3. 已 安装 状态 

已 安装 状态 也 称 为 等 待 中 (waiting ) 状态 ， 意 思 是 服务 工作 者 线程 此 时 没有 别 的 事件 要 做 ， 只 是 准 
备 在 得 到 许可 的 时 候 去 控制 客户 端 。 如 果 没 有 活动 的 服务 工作 者 线程 ， 则 新 安装 的 服务 工作 者 线程 会 跳 
到 这 个 状态 ， 并 直接 进入 激活 中 状态 ， 因 为 没有 必要 再 等 了 。 

在 客户 端 ， 这 个 阶段 可 以 通过 检查 ServiceWorkerRegistration.waiting 是 否 被 设置 为 一 个 


Eh 


ServiceWorker 实例 来 确定 : 




































































navigator.serviceWorker.register('./serviceWorker.js') 
.then((registration) => { 
if (registration.waiting) { 
console.log('Service worker is in the installing/waiting state'); 
} 
用: 


如 果 已 有 了 一 个 活动 的 服务 工作 者 线程 ， 则 已 安装 状态 是 触发 逻辑 的 好 时 机 ， 这 样 会 把 这 个 新 服务 
工作 者 线程 推进 到 激活 中 状态 。 可 以 通过 self.skipwaiting() 强 制 推进 服务 工作 者 线程 的 状态 ， 也 
可 以 通过 提示 用 户 重新 加 载 应 用 程序 ， 从 而 使 浏览 器 可 以 按部就班 地 推进 。 

4. 激活 中 状态 

激活 中 状态 表示 服务 工作 者 线程 已 经 被 浏览 器 选中 即将 变 成 可 以 控制 页 面 的 服务 工作 者 线程 。 如 果 
浏览 器 中 没有 活动 服务 工作 者 线程 ,这 个 新 服务 工作 者 线程 会 自动 到 达 激 活 中 状态 。 如 果 有 一 个 活动 服 
务工 作者 线程 ， 则 这 个 作为 替代 的 服务 工作 者 线程 可 以 通过 如 下 方式 进入 激活 中 状态 。 

口 原 有 服务 工作 者 线程 控制 的 客户 端 数 量变 为 0。 这 通常 意味 着 所 有 受 控 的 浏览 器 标签 页 都 被 关 

闭 。 在 下 一 个 导航 事件 时 ， 新 服务 工作 者 线程 会 到 达 激 活 中 状态 。 

口 已 安装 的 服务 工作 者 线程 调用 self .skipwaiting ()。 这 样 可 以 立即 生效 ， 而 不 必 等 待 一 次 导 
航 事件 。 

在 激活 中 状态 下 ， 不 能 像 已 激活 状态 中 那样 执行 发 送 请 求 或 推送 事件 的 操作 。 

在 客户 端 ， 这 个 阶段 大 致 可 以 通过 检查 ServiceWorkerRegistration.active 是 否 被 设置 为 
个 serviceWorker 实例 来 确定 : 























































































































navigator.serviceWorker.register('./serviceWorker.js') 
.then((registration) => { 
if (registration.active) { 
console.log('Service worker is in the activating/activated state'); 
} 
过 
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注意 ，ServiceWorkerRegistration.active 属性 表示 服务 工作 者 线程 可 能 在 激活 中 状态 ， 也 
可 能 在 已 激活 状态 。 

在 这 个 服务 工作 者 线程 内 部 ， 可 以 通过 给 activate 事件 添加 处 理 程序 来 获悉 : 

self.oninstall = (activateEvent) => { 

console.log('Service worker is in the activating state'); 

地 
activate 事件 表示 可 以 将 老 服 务工 作者 线程 清理 掉 了 ， 该 事件 经 常 
据 库 。 例 如 ， 下 面 的 代码 清除 了 所 有 版 本 比较 老 的 缓存 : 



































日 于 清除 旧 缓存 数据 和 迁移 数 

















Onst CACHE KEY 二 VS: 
self.oninstall = (activateEvent) => { 
caches .keys() 
.then((keys) => keys.filter((key) => key != CACHE KEY)) 


.then((oldKeys) => oldKeys.forEach( (oldKey) => caches.delete(oldKey)); 
于 了 


activate 事件 也 继承 自 ExtendqableEvent ， 因 此 也 支持 waitUntil() 方 法 ,可 以 延迟 过 渡 到 已 
激活 状态 ， 或 者 基于 期 约 拒绝 过 渡 到 已 失效 状态 。 











注意 服务 工作 者 线程 中 的 activate 事件 并 不 代表 服务 工作 者 线程 正在 控制 客户 端 。 





5. 已 激活 状态 
已 激活 状态 表示 服务 工作 者 线程 正在 控制 一 个 或 多 个 客户 端 。 在 这 个 状态 , 服务 工作 者 线程 会 捕获 
作用 域 中 的 fetcn () 事件、 通知 和 推送 事件 。 
在 客户 端 ， 这 个 阶段 大 致 可 以 通过 检查 ServiceWorkerRegistration.active 是 否 被 设置 为 一 
个 serviceWorker 实例 来 确定 : 
navigator.serviceWorker.register('./serviceWorker.js') 
.then( (registration) => { 
if (registration.active) { 
console.log('Service worker is in the activating/activated state'); 
} 
下 
注意 ，ServiceWorkerRegistration.active 属性 表示 服务 工作 者 线程 可 能 在 激活 中 状态 ， 也 
可 能 在 已 激活 状态 。 
更 可 靠 的 确定 服务 工作 者 线程 处 于 已 激活 状态 一 种 方式 是 检查 ServiceWorkerRegistration 的 
controller 属性 。 该 属性 会 返回 激活 的 ServiceWorker 实例 ， 即 控制 页 面 的 实例 : 
navigator.serviceWorker.register('./serviceWorker.js') 
.then( (registration) => { 
if (registration.controller) { 
console.log('Service worker is in the activated state'); 
} 
Ps 
在 新 服务 工作 者 线程 控制 客户 端 时 ， 该 客户 端 中 的 ServiceWorkerContainer 会 触发 controller- 
change 事件 : 
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navigator.serviceWorker.oncontrollerchange = 


() 


一 


Console.log('A new service worker is controlling this client')， 


下 





另外 ， 也 可 以 使 用 serviceWorkerContainer.ready 期 约 来 检测 活动 服务 工作 者 线程 。 该 期 约 




















会 在 当前 页 面 扩 





有 活动 工作 者 线程 时 立即 解决 : 


navigator.serviceWorker.ready.then(() 
console.log('A new service worker is controlling this client'); 


FF) 
6. 已 失效 状态 








已 失效 状态 表示 服务 工作 者 线程 已 被 宣布 死亡 。 不 会 再 有 事件 


回收 它 的 资源 。 
7. 更 新 服务 工作 者 线程 


2 








发 送 给 它 , 浏览 占 随 时 可 能 销毁 它 并 





因为 版 本 控制 的 概念 根植 于 服务 工作 者 线程 的 整个 生命 周期 ， 所 以 服务 工作 者 线程 会 随 着 版 本 变 











化 。 为 此 ， 服务 工作 者 线程 提供 了 稳健 同时 也 复杂 的 流程 ， 以 安装 











这 个 更 新 流程 的 初始 阶 
口 以 


役 是 更 让 











新 获取 的 服务 脚本 会 与 当前 服务 工作 者 线程 的 脚本 比较 差异 。 如 果 不 相同 ,浏览 器 就 会 
更 新 的 服务 工作 者 线程 进入 自己 的 生命 周期 ， 
等 待 浏览 器 决定 让 它 安全 地 获得 页 生 


ee 





已 安装 状态 后 , 更 新 服务 工作 者 线程 会 
























































新 检查 , 也 驶 是 浏览 需 重 计 

















的 





个 页 面 。 











性 事件 ， 且 





和 蔡 换 过 时 的 服务 工作 者 线程 。 





折 请 求 服务 肢 本。 以 下 事件 可 以 触发 更 新 检查 。 
创建 当前 活动 服务 工作 者 线程 时 不 一 样 的 URL 调 用 navigator.serviceWorker.register ()。 
口 浏览 器 导航 到 服务 工作 者 线程 作用 域 
口 发 生 了 fetch() 或 push () 等 功能 





至 少 24 小 时 内 没有 发 生 更 新 检查 。 


























用 新 脚本 初 
直至 抵达 已 安装 状态 。 到 
ji 的 控制 权 (〈 或 用 户 强制 它 









































证 更 新 服务 工作 者 线程 进入 激活 状态 并 取代 已 有 的 服务 工作 者 线程 。 比 如 ， 
而 一 个 更 新 服务 工作 者 线程 正在 已 安装 状态 





期 间 会 发 生 重合 ， 即 旧 页 面 还 没有 鲁 载 ， 








新 页 面 已 加 载 了 。 因 此, 现 有 的 服 





























ee 
关键 在 于 , 刷新 页 面 不 会 
有 个 打开 的 页 面 , 其 中 有 一 个 服务 工作 者 线程 正在 控制 它 ， 
中 等 待 。 客 户 端 在 页 面 刷新 
务工 作者 线程 永远 不 会 让 出 控制 权 ， 毕 竞 
作者 线程 唯一 的 方式 就 是 关闭 所 有 受 控 页 面 。 


























至 少 还 有 一 个 客户 端 在 它 的 控 表 


27.4.6 ”控制 反 转 与 服务 工作 者 线程 持久 化 
虽然 专用 工作 者 线程 和 共享 工作 者 线程 是 有 状态 的 ， 但 服务 工作 者 线程 是 无 状态 的 。 更 具体 地 说 ， 


服务 工作 者 线程 遵循 控制 反 转 (IoC，Inversion of Control ) 模式 并 
应 该 依赖 工作 者 线程 的 全 
FE 者 线程 的 版 本 4 
高 度 依赖 浏览 器 状态 ， 
理解 服务 工作 者 线程 的 生命 周期 与 它 所 控 秆 


这 样 就 意味 着 服务 工作 者 线程 不 应 
码 应 该 在 事件 处 理 程序 中 定义 。 当 然 ， 
脚本 执行 的 次 数 变化 很 大 ， 




















务工 作者 线程 实现 为 独立 的 进程 ， 
空闲 了 ， 
但 不 能 依赖 它们 的 持久 化 全 局 状态 。 


服务 工作 








上 之 下 。 为 此 ， 取 代 现 有 服务 工 























且 是 事件 驱动 的 。 
局 状态 。 








服务 工作 者 线程 中 的 绝 大 多 数 代 











因此 服务 脚本 的 





新 启动 。 








这 意味 着 可 以 依赖 


FE 为 全 局 常量 是 个 














显而易见 的 例外 。 服 务 
行为 应 该 是 寡 等 的 。 











央 的 客户 端的 生命 周期 无 关 非 常 重要 。 大 多 数 浏 览 器 将 服 
而 该 进程 由 浏览 器 单独 控制 。 如 果 浏 览 絮 检测 到 某 个 服务 工作 者 线程 
就 可 以 终止 它 并 在 需要 时 再 





服务 工作 者 线程 在 激活 后 处 理事 件 ， 








27.4 服务 工作 者 线程 835 





27.4.7 通过 updateViaCache 管理 服务 文件 缓存 


正常 情况 下 ,浏览 器 加 载 的 所 有 JavaScript 资源 会 按照 它们 的 cache-control 头 部 纳入 HITP 组 
存 管 理 。 因 为 服务 脚本 没有 优先 权 ， 所 以 浏览 器 不 会 在 缓存 文件 失效 前 接收 更 新 的 服务 脚本 。 

为 了 尽 可 能 传播 更 新 后 的 服务 脚本 ， 常 见 的 解决 方案 是 在 响应 服务 脚本 时 设置 cache-Ccontrol : 
max-age=0 头 部 。 这 样 浏 览 器 就 能 始终 取得 最 新 的 脚本 文件 。 

这 个 即时 失效 的 方案 能 够 满足 需求 , 但 仅仅 依靠 HTTP 头 部 来 决定 是 否 更 新 意味 着 只 能 由 服务 器 控 
制 客户 端 。 为 了 让 客户 端 能 控制 自己 的 更 新 行为 ， 可 以 通过 updateviacache 属性 设置 客户 端 对 待 服 
务 脚本 的 方式 。 该 属性 可 以 在 注册 服务 工作 者 线程 时 定义 ， 可 以 是 如 下 三 个 字符 串 值 。 
口 imports: 默认 值 。 顶级 服务 脚本 永远 不 会 被 缓存 , 但 通过 importScripts () 在 服务 工作 者 线 
程 内 部 导入 的 文件 会 按照 cache-Control 头 部 设置 纳入 HTTP 缓存 管理 。 
口 a11: 服务 脚本 没有 任何 特殊 待遇 。 所 有 文件 都 会 按照 cache-control 头 部 设置 纳 和 人 HITP 组 




































































存 管理 。 
口 none: 顶级 服务 脚本 和 通过 importscripts() 在 服务 工作 者 线程 内 部 导入 的 文件 永远 都 不 会 
可 以 像 下 面 这 样 使 用 updateviacache 属性 : 
navigator.serviceWorker.register('/serviceWorker.js', { 


updateViaCache: 'none' 


}); 


浏览 器 仍 在 渐进 地 支持 这 个 选项 ， 因 此 强烈 推荐 读者 同时 使 用 updateviacache 和 CacheControl 
头 部 指定 客户 端的 缓存 行为 。 


27.4.8 ”强制 性 服务 工作 者 线程 操作 


某 些 情况 下 ,， 有 必要 尽 可 能 快 地 让 服务 工作 者 线程 进入 已 激活 状态 ,即使 可 能 会 造成 资源 版 本 控制 
不 一 致 。 该 操作 通常 适合 在 安装 事件 中 缓存 资源 ， 此 时 要 强制 服务 工作 者 线程 进入 活动 状态 ,然后 再 强 
制 活动 服务 工作 者 线程 去 控制 关联 的 客户 端 。 

实现 上 述 操作 的 基本 代码 如 下 。 


COnst CACHE _KEY 二 ‘VI: 






























































self.oninstall = (installEvent) => { 
// 填充 缓存 ， 然 后 强制 服务 工作 者 线程 进入 已 激活 状态 
// 这 样 会 触发 activate 事件 
installEvent .waitUntill( 

caches .open (CACHE_KEY) 

.then( (cache) => cache.addAll([ 

Tf OO CA 

'bar.js', 

Jj) 

.then(() => self.skipwaiting()) 





)3 
}3 


// 强制 服务 工作 者 线程 接管 客户 匣 
// 这 会 在 每 个 客户 闹 触 发 controllerchange 事件 
self.onactivate = (activateEvent) => clients.claim(); 
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浏览 器 会 在 每 次 导航 事件 中 检查 新 服务 脚本 , 但 有 时 候 这 样 也 太 不 够 了 。Servi ceWorkerRegistration 
对 象 为 此 提供 了 一 个 update () 方 法 ， 可 以 用 来 告诉 浏览 器 去 重新 获取 服务 脚本 ， 与 现 有 的 比较 ， 然 后 
必要 时 安装 更 新 的 服务 工作 者 线程 。 可 以 这 样 来 实现 : 


navigator.serviceWorker.register('./serviceWorker.js') 
.then((registration) => { 

// 每 17 分 钟 左 右 检 查 一 个 更 新 版 本 

setInterval(() => registration.update(), 1E6); 
ye 


27.4.9 服务 工作 者 线程 消息 


与 专用 工作 者 线程 和 共享 工作 者 线程 一 样 ， 服 务工 作者 线程 也 能 与 客户 端 通过 postMessage () 交 
换 消息 。 实 现 通信 的 最 简单 方式 是 向 活动 工作 者 线程 发 送 一 条 消息 ， 然 后 使 用 事件 对 象 发 送 回 应 。 发 送 
给 服务 工作 者 线程 的 消息 可 以 在 全 局 作用 域 处 理 ， 而 发 送 回 客户 端的 消息 则 可 以 在 ServiceWorker- 
Context 对 象 上 人 处理: 













































































ServiceWorker.js 
self.onmessage = ({data, source}) => { 
console.log('service worker heard:', data); 


source.postMessage('bar'); 
Ee 


main.js 

navigator.serviceWorker.onmessage = ({data}) => { 
console.log('client heard:', data); 

二 

navigator.serviceWorker.register('./serviceWorker.js') 


.then((registration) => { 
if (registration.active) { 
registration.active.postMessage('foo'); 
} 
小 


// service worker heard: foo 
// client heard: bar 


也 可 以 简单 地 使 用 serviceWorker.controller 属 





ea 
三 








ServiceWorker.js 


self.onmessage = ({data, source}) => { 
console.log('service worker heard:', data); 


source.postMessage('bar'); 
二 


main.js 
navigator.serviceWorker.onmessage = ({data}) => { 
console.log('client heard:', data); 


于 


navigator.serviceWorker.register('./serviceWorker.js') 
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-then tt) ‘= 二 
if (navigator.serviceWorker.controller) { 
navigator.serviceWorker.controller.postMessage('foo'); 
} 
小 


// service worker heard: foo 
// client heard: bar 


前 面 的 例子 在 每 次 页 面 重新 加 载 时 都 会 运行 。 这 是 因为 服务 工作 者 线程 会 回应 每 次 刷新 后 客户 端 肢 
本 发 送 的 消息 。 在 通过 新 标签 页 打开 这 个 页 面 时 也 一 样 。 
如 果 服 务工 作者 线程 需要 率先 发 送 消息 ， 可 以 像 下面 这 样 获 得 客户 端的 引用 : 











浊 





























ServiceWorkerjs 

self.onmessage = ({data}) => { 
console.log('service worker heard:', data); 

2} 

self.onactivate = () => { 


self.clients.matchAll({includeUncontrolled: true}) 
.then((clientMatches) => clientMatches[0] .postMessage('foo')); 


}; 


main.js 
navigator.serviceWorker.onmessage = ({data, source}) => { 
console.log('client heard:', data); 


source.postMessage('bar'); 


于 了 
navigator.serviceWorker.register('./serviceWorker.js') 


// client heard: foo 
// service worker heard: bar 


前 面 的 例子 只 会 运行 一 次 ， 因 为 活动 事件 在 每 个 服务 工作 者 线程 上 只 会 触发 一 次 。 
因为 客户 端 和 服务 工作 者 线程 可 以 相互 之 间 发 送 消息 ,所 以 通过 Messagechannel 或 Broadqcast- 
channel 实现 通信 也 是 可 能 的 。 


27.4.10 ”拦截 fetch 事件 


服务 工作 者 线程 最 重要 的 一 个 特性 就 是 拦截 网 络 请 求 。 服 务工 作者 线程 作用 域 中 的 网 络 请 求 会 注册 
为 fetch 事件 。 这 种 拦截 能 力 不 限于 fetch () 方 法 发 送 的 请 求 ， 也 能 拦截 对 JavaScript、CSS 、 图 片 和 
HTML (包括 对 主 HTML 文档 本 身 ) 等 资源 发 送 的 请 求 。 这 些 请 求 可 以 来 自 JavaScript， 也 可 以 通过 
<script>、<1ink> 或 <img> 标 签 创建 。 直 观 地 说 ， 这 样 是 合理 的 : 如 果 想 让 服务 工作 者 线程 模拟 离线 
应 用 程序 ， 它 就 必须 能 够 把 挖 页面 正常 运行 所 需 的 所 有 请 求 资源 。 

FetchEvent 继承 自 ExtendableEvent。 让 服务 工作 者 线程 能 够 决定 如 何 处 理 fetch 事件 的 方法 
是 event .respongWitn()。 该 方法 接收 期 约 , 该 期 约会 解决 为 一 个 Response 对 象 ,当然 ,该 Response 
对 象 实际 上 来 自 哪里 完全 由 服务 工作 者 线程 决定 。 可 以 来 自 网 络 , 来 自 缓存 ， 或 者 动态 创建 。 下 面 几 节 
将 介绍 几 种 网 络 /缓存 策略 ， 可 以 在 服务 工作 者 线程 中 使 用 。 
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1. 从 网 络 返 回 
这 个 策略 就 是 简单 地 转发 fet ch 
该 策略 。 可 以 像 下 面 实现 这 一 策略 : 


self.onfetch = (fetchEvent) => { 
fetchEvent.respondWith(fetch(fetchEvent.request)); 


}; 


山中 


有 件 。 那 些 绝对 需要 发 送 到 服务 器 的 请 求 例如 POST 请 求 就 适合 




















注意 ”前面 的 代码 只 演示 了 如 何 使 用 event .respondWith () 。 如 果 event .respongGWwitnh() 


没有 被 调用 ,浏览 器 也 会 通过 网 络 发 送 请 求 。 





2. 从 缓存 返回 
这 个 策略 其 实 就 是 缓存 检查 。 对 于 任何 肯定 有 缓存 的 资源 (如 在 安装 阶段 缓存 的 资源 )， 可 以 采用 


该 策略 : 

self.onfetch = (fetchEvent) => { 
fetchEvent.respondWith(caches.match(fetchEvent.request)); 
} 


3. 从 网 络 返 回 ， 缓 存 作 后 备 
这 个 策略 把 从 网 络 获 取 最 新 的 数据 作为 首选 ,但 如 果 缓 存 中 有 值 也 会 返回 缓存 的 值 。 如 果 应 用 程序 


需要 尽 可 能 展示 最 新 数据 ， 但 在 离线 的 情况 下 仍 要 展示 一 些 信息 ， 就 可 以 采用 该 策略 : 


self.onfetch = (fetchEvent) => { 
fetchEvent.respondWith!( 
fetch(fetchEvent .request) 
.Catch(() => caches.match(fetchEvent.request)) 
} 
}3 


4. 从 缓存 返回 ， 网 络 作 后 备 
这 个 策略 优先 考虑 响应 速度 ， 但 仍 会 在 没有 缓存 的 情况 下 发 送 网 络 请 求 。 这 是 大 多 数 渐进 式 Web 
应 用 程序 (PWA ，Progressive Web Application ) 采取 的 首选 策略 : 


self.onfetch = (fetchEvent) => { 
fetchEvent.respondWith( 
caches.match(fetchEvent.request) 
.then((response) => response || fetch(fetchEvent.request)) 
); 
J 


5. 通用 后 备 
应 用 程序 需要 考虑 缓存 和 网 络 都 不 可 用 的 情况 。 服 务工 作者 线程 可 以 在 安装 时 缓存 后 备 资源 ， 然 后 


在 缓存 和 网 络 都 失败 时 返回 它们 : 


self.onfetch = (fetchEvent) => { 
fetchEvent.respondWith!( 
// 开始 执行 “从 缓存 返回 ， 以 网 络 为 后 备 ” 策 略 
caches .match (fetchEvent .request) 
.then( (response) => response || fetchl(fetchEvent.request)) 
.Catch(() => caches.match('/fallback.html')) 
As 
a 
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这 里 的 catch () 子 句 可 以 扩展 为 支持 不 同类 型 的 后 备 ， 例 如 点 位 图 、 哑 数据 ， 等 等 。 


注意 Jake Archibald 在 Google Developers 网 站 有 一 篇 关于 网 络 /缓存 策略 的 好 文章 《离线 


指南 》。 





27.4.11 推送 通知 


对 于 模拟 原生 应 用 程序 的 Web 应 用 程序 而 言 ， 必 须 支 持 推送 消息 。 这 意味 着 网 页 必须 能 够 接收 服 
务 器 的 推送 事件 ， 然 后 在 设备 上 显示 通知 (即使 应 用 程序 没有 运行 )。 当然 ， 这 在 常规 网 页 中 肯定 是 不 
可 能 的 。 不 过 ， 有 了 服务 工作 者 线程 就 可 以 实现 该 行为 。 
为 了 在 PWA 应 用 程序 中 支持 推送 通知 ， 必 须 支 持 以 下 4 种 行为 。 
口 服务 工作 者 线程 必须 能 够 显示 通知 。 
口 服务 工作 者 线程 必须 能 够 处 理 与 这 些 通知 的 交互 。 
口 服务 工作 者 线程 必须 能 够 订阅 服务 器 发 送 的 推送 通知 。 
口 服务 工作 者 线程 必须 能 够 处 理 推 送 消息 ， 即 使 应 用 程序 没 在 前 台 运 行 或 者 根本 没 打开 
1. 显示 通知 
服务 工作 者 线程 可 以 通过 它们 的 注册 对 象 使 用 Notification API。 这 样 做 有 很 好 的 理由 : 与 服务 工作 
者 线程 关联 的 通知 也 会 触发 服务 工作 者 线程 内 部 的 交互 事件 。 
显示 通知 要 求 向 用 户 明 确 地 请 求 授 权 。 授 权 完 成 后 ， 可 以 通过 ServiceWorkerRegistration. 
showNotification() 显 示 通 知 。 下 面 是 示例 实现 : 


navigator.serviceWorker.register('./serviceWorker.js') 
.then( (registration) => { 
Notification.requestPermission() 
.then((status) => { 
if (status === 'granted') { 
registration.showNotification('foo'); 
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}); 
入 


类 似 地 ， 在 服务 工作 者 线程 内 部 可 以 使 用 全 局 registration 属性 触发 通知 : 


self.onactivate = () 























=> self.registration.showNotification('bar'); 
































在 上 面 的 例子 中 ， 获 得 显示 通知 的 授权 后 ， 会 把 foo 通知 显示 在 浏览 器 中 。 该 通知 与 使 用 new 
otification() 创 建 的 通知 看 不 出 有 任何 差别 。 此 外 ， 显 示 该 通知 不 需要 服务 工作 者 线程 额外 做 任何 
有 情 。 服 务工 作者 线程 只 在 需要 处 理 通知 事件 时 才 会 发 挥 作用 。 

2. 处 理 通 知事 件 

通过 ServiceWorkerRegistration 对 象 创建 的 通知 会 向 服务 工作 者 线程 发 送 notificationclick 
和 notificationclose 事件 。 假 设 前 面 例子 中 的 服务 脚本 定义 了 如 下 事件 处 理 程序 : 


self.onnotificationclick = ({notification}) => { 
console.log('notification click', notification); 


上 


















































山中 























self.onnotificationclose = ({notification}) => { 
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console.log('notification close', notification); 


过 

在 这 个 例子 中 , 与 通知 的 两 种 交互 操作 都 在 服务 工作 者 线程 中 注册 了 处 理 程序 。 这 里 的 notification 
事件 对 象 暴露 了 notification 属性 ， 其 中 包含 着 生成 该 事件 Notification 对 象 。 这 些 处 理 程序 可 
以 决定 交互 操作 之 后 的 响应 方式 。 

一 般 来 说 ， 单 击 通 知 意味 着 用 户 希 望 转 到 某 个 具体 的 页 面 。 在 服务 工作 者 线程 处 理 程 序 中 ,可 以 通 
过 clients.openWindow() 打 开 相 应 的 URL， 例 如 : 


self.onnotificationclick = ({notification}) => { 
clients.openWindow('https://foo.com'); 


地 

3. 订阅 推送 事件 

对 于 发 送 给 服务 工作 者 线程 的 推送 消息 ， 必 须 通过 服务 工作 者 线程 的 PushManager 来 订阅 。 这 样 
服务 工作 者 线程 就 可 以 在 pusn 事件 处 理 程序 中 处 理 推送 消息 。 

下 面 展 示 了 使 用 serviceworkerRegistration.pushManager 订阅 推送 消息 的 例子 : 

















































































































navigator.serviceWorker.register('./serviceWorker.js') 
.then((registration) => { 
registration.pushManager.subscribel(t{ 
applicationServerKey: key，// 来 自 服务 器 的 公 铀 
UserVisibleonly: true 
}); 
}) > 


另外 ， 服 务工 作者 线程 也 可 以 使 用 全 局 的 registration 属性 自己 订阅 : 


self.onactivate = () => { 
self.registration.pushManager.subscribel({ 
applicationServerKey: key，// 来 自 服 务 器 的 公 铀 
UserVisibleonly: true 
}) 
}; 


4. 处 理 推送 事件 
订阅 之 后 , 服务 工作 者 线程 会 在 每 次 服务 器 推送 消息 时 收 到 push 事件 。 这 时 候 它 可 以 这 样 来 处 理 : 


self.onpush = (pushEvent) => { 
console.log('Service worker was pushed data:', pushEvent.data.text()); 


} 3 
为 实现 真正 的 推送 通知 ， 这 个 处 理 程序 只 需要 通过 注册 对 象 创 建 一 个 通知 即 可 。 不过， 完善 的 推送 
通知 需要 创建 它 的 服务 工作 者 线程 保持 活动 足够 长 时 间 ， 以 便 处 理 后 续 的 交互 事件 。 
要 实现 这 一 点 ，push 事件 继承 了 ExtendableEvent。 可 以 把 showNotification() 返 回 的 期 约 
传 给 waituntil()， 这样 就 会 让 服务 工作 者 线程 一 直 活 动 到 通知 的 期 约 解决 。 
下 面 展 示 了 实现 上 述 逻 辑 的 简单 框架 : 
main.js 
navigator.serviceWorker.register('./serviceWorker.js') 
.then((registration) => { 
// 请 求 显示 通知 的 授权 
Notification.recduestPermission() 
.then((status) => { 
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if (status === 'granted') { 
// 如 果 获 得 授权 ， 只 订阅 推送 消息 
registration.pushManager.subscripbelt{ 
applicationServerKey: key，// 来 自 服 务 器 的 公 铀 
UserVisibleonly: true 


ServiceWorker.js 
// 收 到 推送 事件 后 ， 在 通知 中 以 文本 形式 显示 数据 
self.onpush = (pushEvent) => { 


// 保持 服务 工作 者 线程 活动 到 通知 期 约 解决 
pushEvent .waitUntill( 
self.registration.showNotification(pushEvent.data.text()) 
j 过 
) 


// 如 果 用 户 单 击 通知 ， 则 打开 相应 的 应 用 程序 页 面 
self.onnotificationclick = ({notification}) => { 
clients.openWindow('https://example.com/clicked-notification'); 


过 


27.5 小结 


工作 者 线程 可 以 运行 异步 JavaScript 而 不 阻塞 用 户 界 面 。 这 非常 适合 复杂 计算 和 数据 处 理 ， 特 别 是 
需要 花 较 长 时 间 因 而 会 影响 用 户 使 用 网 页 的 处 理 任 务 。 工 作者 线程 有 自己 独立 的 环境 ， 只 能 通过 异步 消 
息 与 外 界 通信 。 
工作 者 线程 可 以 是 专用 线程 、 共 享 线程 。 专 用 线程 只 能 由 一 个 页 面 使 用 ， 而 共享 线程 则 可 以 由 同 源 
的 任意 页 面 共享 。 

服务 工作 者 线程 用 于 让 网 页 模拟 原生 应 用 程序 。 服 务工 作者 线程 也 是 一 种 工作 者 线程 , 但 它们 更 像 
是 网 络 代 理 ， 而 非 独 立 的 浏览 器 线程 。 i 它们 看 成 是 高 度 定制 化 的 网 络 缓存 ， 它 们 也 可 以 在 PWA 
中 支持 推送 通知 。 











































































































28 
最 佳 实践 


本 章 内 容 

口 编写 可 维护 的 代码 
口 保证 代码 性 能 

口 部 署 代码 到 线 上 环境 
































自 2000 年 以 来 ，Web 开发 一 直 在 以 惊人 的 速度 发 展 。 从 最 初 毫 无 章法 可 循 的 “野蛮 生长 ”"”， 到 如 今 
已 发 展 出 完整 的 规范 体系 ， 各 种 研究 成 果 和 最 佳 实践 层出不穷 。 随 着 简单 的 网 站 变 成 复杂 的 Web 应 用 
程序 ， 曾 经 的 Web 开发 爱好 者 也 变 成 了 收入 不 菲 的 专业 人 士 。Web 开发 领域 的 最 新 技术 和 开发 工具 已 
经 今 人 目不暇接 。 其 中 , JavaScript 尤其 成 为 了 研究 和 关注 的 焦点 。JavaScript 的 最 佳 实践 可 以 分 成 几 类 ， 
适用 于 开发 流程 的 不 同 阶 段 。 


28.1 可 维护 性 


在 早期 网 站 中 ，JavaScript 主要 用 于 实现 一 些小 型 动 效 或 表单 验证 。 今 天 的 Web 应 用 程序 则 动 辑 成 
于 上 万 行 JavaScript 代码 ， 用 于 完成 各 种 各 样 的 复杂 处 理 。 这 些 变化 要 求 开 发 者 把 可 维护 能 力 放 到 重要 
位 置 上 。 正 如 更 传统 意义 上 的 软件 工程 师 一 样 ，JavaScript 开发 者 受 雇 是 要 为 公司 创造 价值 的 。 他 们 不 
仅 要 保证 产品 如 期 上 线 ， 而 且 要 随 着 时 间 推 移 为 公司 不 断 积累 知识 资产 。 
编写 可 维护 的 代码 十 分 重要 ， 因 为 大 多 数 开发 者 会 花 大 量 时 间 去 维护 别人 写 的 代码 。 实 际 开发 中 ， 
从 第 一 行 代码 开始 写 起 的 情况 非常 少 , 通常 是 要 在 别人 的 代码 之 上 构建 自己 的 工作 。 让 自己 的 代码 容易 
维护 ， 可 以 保证 其 他 开发 者 更 好 地 完成 自己 的 工作 。 



















































































































































































尽管 部 分 概念 特定 于 JavaScript。 


28.1.1 什么 是 可 维护 的 代码 


通常 ， 说 代码 “可 维护 ”就 意味 着 它 具 备 如 下 特点 。 

口 容易 理解 : 无 须 求助 原始 开发 者 ， 任 何人 一 看 代码 就 知道 它 是 干什么 的 ， 以 及 它 是 怎么 实现 的 。 
口 符合 常识 : 代码 中 的 一 切 都 显得 顺理成章 ， 无 论 操 作 有 多 么 复杂 。 

D 容易 适 配 : 即使 数据 发 生变 化 也 不 用 完全 重 写 。 

口 容易 扩展 : 代码 架构 经 过 认真 设计 ， 支 持 未 来 扩展 核心 功能 。 

D 容易 调试 : 出 问题 时 ， 代 码 可 以 给 出 明确 的 信息 ， 通 过 它 能 直接 定位 问题 。 
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能 够 写 出 可 维护 的 JavaScript 代码 是 一 项 重要 的 专业 技能 。 这 就 是 业余 爱好 者 和 专业 开发 人 员 之 间 
的 区 别 ， 前 者 用 一 个 周末 就 拼凑 出 一 个 网 站 ， 而 后 者 真正 了 解 自己 的 技术 。 


28.1.2 ”编码 规范 


i 写 可 维护 代码 的 第 一 步 是 认真 考虑 编码 规范 。 大 多 数 编程 语言 会 涉及 编码 规范 ， 简 单 上 网 一 搜 ， 
就 可 以 找到 成 千 上 万 的 相关 文章 。 专 业 组 织 有 为 开发 者 建立 的 编码 规范 ， 旨 在 让 人 写 出 更 容易 维护 的 代 
码 。 优 秀 开源 项 目 有 严格 的 编码 规范 ， 可 以 让 社区 的 所 有 人 容易 地 理解 代码 是 如 何 组 织 的 。 
i 码 规范 对 JavaScript 而 言 非常 重要 ， 因 为 这 门 语 言 实 在 太 灵 活 了 。 与 大 多 数 面 向 对 象 语言 不 同 ， 
JavaScript 并 不 强迫 开发 者 把 任何 东西 都 定义 为 对 象 。 它 支持 任何 编程 风格 ， 包 括 传统 的 面向 对 象 编程 、 
声明 式 编程 ， 以 及 函数 式 编程 。 简 单 看 几 个 开源 的 JavaScript 库 ， 就 会 发 现 有 很 多 方式 可 以 创建 对 象 、 
定义 方法 和 管理 环境 。 
接 下 来 的 几 节 会 讨论 制定 编码 规范 的 一 些 基 础 知识 。 这 些 话题 很 重要 ， 当 然 每 个 人 的 需求 不 同 , 实 
现 方式 也 可 以 不 同 。 
1. 可 读 性 
要 想 让 代码 容易 维护 ， 首 先 必须 使 其 可 读 。 可 读 性 必须 考虑 代码 是 一 种 文本 文件 。 为 此 ， 代 码 缩 进 
是 保证 可 读 性 的 重要 基础 。 如 果 所 有 人 都 使 用 相同 的 缩 进 ， 整 个 项 目的 代码 就 会 更 容易 让 人 看 懂 。 缩 进 
通常 要 使 用 空格 数 而 不 是 Tab ( 制 表 符 ) 来 定义 ,， 因 为 后 者 在 不 同文 本 编辑 器 中 的 显示 不 同 。 一 般 来 说 ， 
缩 进 是 4 个 空格 ， 当 然 具 体 多 少 个 可 以 自己 定 。 
可 读 性 的 另 一 方面 是 代码 注释 。 在 大 多 数 编程 语言 中 ,广泛 接受 的 做 法 是 为 每 个 方法 都 编写 注释 。 
因为 JavaScript 可 以 在 代码 中 的 任何 地 方 创建 函数 ， 所 以 这 一 点 经 党 被 忽视 。 正 因为 如 此 ， 可 能 给 
JavaScript 中 的 每 个 函数 都 写 注释 才 更 重要 。 一 般 来 说 ， 以 下 这 些 地 方 应 该 写 注释 。 
口 函数 和 方法 。 每 个 函数 和 方法 都 应 该 有 注释 来 描述 其 用 途 ， 以 及 完成 任务 所 用 的 算法 。 同 时 ， 
也 写 清 使 用 这 个 函数 或 方法 的 前 提 ( 假设 )、 每 个 参数 的 含义 ， 以 及 函数 是 否 返回 值 (因为 通过 
函数 定义 看 不 出 来 )。 
口 大 型 代码 块 。 多 行 代 码 但 用 于 完成 单一 任务 的 ， 应 该 在 前 面 给 出 注释 ， 把 要 完成 的 任务 写 清楚 。 
口 复杂 的 算法 。 如 果 使 用 了 独特 的 方法 解决 问题 ， 要 通过 注释 解释 明白 。 这 样 不 仅 可 以 帮助 别人 
查看 代码 ， 也 可 以 帮助 自己 今后 查看 代码 。 
口 使 用 黑 科 技 。 由 于 浏览 器 之 间 的 差异 ，JavaScript 代码 中 通常 包含 一 些 黑 科技 。 不 要 假设 其 他 人 
一 看 就 能 明白 某 个 黑 科 技 是 为 了 解决 某 个 浏览 器 的 什么 问题 。 如 果 某 个 浏览 器 不 能 使 用 正常 方 
式 达 到 目的 ， 那 要 在 注释 里 把 黑 科 技 的 用 途 写 出 来 。 这 样 可 以 避免 别人 误 以 为 黑 科 技 没 有 用 而 
把 它 “ 修 复 ” 掉 ， 结 果 你 已 解决 的 问题 又 会 出 现 。 
缩 进 和 注释 可 以 让 代码 更 容易 理解 ， 将 来 也 更 容易 维护 。 
2. 变量 和 函数 命名 
代码 中 变量 和 函数 的 适当 命名 对 于 其 可 读 性 和 可 维护 性 至 关 重 要 。 因 为 很 多 JavaScript 开发 者 是 业 
余 爱 好 者 出 身 ， 所 以 很 容易 用 foo 、bar 命名 变量 ， 用 daosomething 来 命名 函数 。 专 业 JavaScript 开 
发 者 必须 改 掉 这 些 习 惯 ， 这 样 才 能 写 出 可 维护 的 代码 。 以 下 是 关于 命名 的 通用 规则 。 
口 变量 名 应 该 是 名 词 ， 例 如 car 或 person。 
口 函数 名 应 该 以 动词 开始 , 例如 getName () 。 返回 布尔 值 的 函数 通常 以 is 开头, 比如 isgnablea ()。 28 
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口 对 变量 和 函数 都 使 用 符合 逻辑 的 名 称 ， 不 用 担心 长 度 。 长 名 字 的 问题 可 以 通过 后 处 理 和 压缩 解 
决 ( 本章 稍 后 会 讨论 )。 
口 变量 、 函 数 和 方法 应 该 以 小 写字 母 开 头 ， 使 用 驼峰 大 小 写 ( camelCase ) 形式 ， 如 getName () 和 
isPerson。 类 名 应 该 首 字 母 大 写 ， 如 Person、RequestFactory。 常 量 值 应 该 全 部 大 写 并 以 
下 划 线 相 接 ， 比 如 REQUEST_TIMEOUT。 
口 名 称 要 尽量 用 描述 性 和 直观 的 词汇 ， 但 不 要 过 于 宛 长 。getName () 一 看 就 知道 会 返回 名 称 ， 而 
PersonFactory 一 看 就 知道 会 产生 某 个 Person 对 象 或 实体 。 

要 完全 避免 没有 用 的 变量 名 ， 如 不 能 表示 所 包含 数据 的 类 型 的 变量 名 。 通 过 适当 命名 ,代码 读 起 来 
就 会 像 故 事 ， 因 此 更 容易 理解 。 
3. 变量 类 型 透明 化 

因为 JavaScript 是 松散 类 型 的 语言 ， 所 以 很 容易 忘记 变量 包含 的 数据 类 型 。 适 当 命 名 可 以 在 某 种 程 
度 上 解决 这 个 问题 ， 但 还 不 够 。 有 三 种 方式 可 以 标明 变量 的 数据 类 型 。 

第 一 种 标明 变量 类 型 的 方式 是 通过 初始 化 。 定 义 变 量 时 , 应 该 立即 将 其 初始 化 为 一 个 将 来 要 使 用 的 
类 型 值 。 例 如 ， 要 保存 布尔 值 的 变量 ， 可 以 将 其 初始 化 为 true 或 false; 而 要 保存 数值 的 变量 ， 可 以 
将 其 初始 化 为 一 个 数值 。 再 看 几 个 例子 : 
// 通过 初始 化 标明 变量 类 型 











































































































let found = false; // 布尔 值 
let count = -1; // 数值 
let name = ""; // 字符 串 
let person = null; // 对 象 


























初始 化 为 特定 数据 类 型 的 值 可 以 明确 表示 变量 的 类 型 。ES6 之 前 ,初始 化 方式 不 适合 函数 声明 中 桥 
数 的 参数 ; ES6 之 后 ， 可 以 在 函数 声明 中 为 参数 指定 默认 值 来 标明 参数 类 型 。 

第 二 种 标明 变量 类 型 的 方式 是 使 用 匈牙利 表示 法 。 匈牙利 表示 法 指 的 是 在 变量 名 前 面前 级 一 个 或 多 
个 字符 表示 数据 类 型 。 这 种 表示 法 曾 在 脚本 语言 中 非常 流行 , 很 长 时 间 以 来 也 是 JavaScript 首选 的 格式 。 
对 于 基本 数据 类 型 ，JavaScript 传统 的 匈牙利 表示 法 用 o 表示 对 象 ，s 表示 字符 串 ，i 表示 整数 ，f 表示 
浮 点 数 ，b 表示 布尔 值 。 示 例如 下 : 


// 使 用 向 牙 利 表示 法 标明 数据 类 型 
let bFound; // 布尔 值 

let iCount; // 整数 

let sName; // 字符 串 

let oPerson; // 对 象 


匈牙利 表示 法 也 可 以 很 好 地 应 用 于 函数 参数 。 它 的 缺点 是 使 代码 可 读 性 下 降 、 不 够 直观 ， 并 破坏 了 
类 似 句 子 的 自然 阅读 流畅 性 。 因 此 ， 和 匈牙利 表示 法 在 开发 者 中 失宠 了 。 

最 后 一 种 标明 变量 类 型 的 方式 是 使 用 类 型 注释 。 类 型 注释 放 在 变量 名 后 面 、 初 始 化 表达 式 的 前 面 。 
基本 思路 是 在 变量 旁边 使 用 注释 说 明 类 型 ， 比 如 : 

// 使 用 类 型 注释 表明 数据 类 型 














































































































Jet found /*:Boolean*/ = false 

let count /*:int*/ > 03 

let name /* String*/ = "Nicholas"; 
let person /*:Object*/ = null; 














类 型 注释 在 保持 代码 整体 可 读 性 的 同时 向 其 注释 了 类 型 信息 。 类 型 注释 的 缺点 是 不 能 再 使 用 多 行 注 
释 把 大 型 代码 块 注释 掉 了 。 因 为 类 型 注释 也 是 多 行 注释 ， 所 以 会 造成 干扰 ， 如 下 例 所 示 : 





28.1 可 维护 性 845 





// 这 样 多 行 注释 不 会 生效 
/* 


let found /*:Boolean*/ = false 

let count, , /warnt*y #0 

let name /string*/ Ee. "Nieholass 
let person /*:Object*/ = null; 


*/ 
这 里 本 来 是 想 使 用 多 行 注 释 把 所 有 变量 声明 都 注释 掉 。 但 类 型 注释 产生 了 干扰 ， 因 为 第 一 个 /* 
(第 2 行 ) 的 实例 会 与 第 一 个 */ (第 3 行 ) 的 实例 匹配 ， 所 以 会 导致 语法 错误 。 如 果 想 注释 掉 使 用 类 型 
注释 的 代码 ， 则 只 能 使 用 单行 注释 一 行 一 行 地 注释 掉 每 一 行 〈 很 多 编辑 器 可 以 自动 完成 ) 
以 上 是 最 常用 的 三 种 标明 变量 数据 类 型 方式 。 每 种 方式 都 有 其 优点 和 缺点 , 可 以 根据 实际 情况 选用 。 
关键 要 看 哪 一 种 最 适合 自己 的 项 目 ， 并 保证 一 致 性 。 


28.1.3 ”松散 耦合 


只 要 应 用 程序 的 某 个 部 分 对 另 一 个 部 分 依赖 得 过 于 紧密 ， 代 码 就 会 变 成 紧密 耦合 ， 因 而 难以 维护 。 
典型 的 问题 是 在 一 个 对 象 中 直接 引用 另 一 个 对 象 ， 这 样 ， 修 改 其 中 一 个 ， 可 能 必须 还 得 修改 另 一 个 。 紧 
密 耦 合 的 软件 难于 维护 ， 肯 定 需要 频繁 地 重 写 。 

考虑 到 相关 的 技术 ，Web 应 用 程序 在 某 些 情况 下 可 能 变 得 过 于 紧密 耦合 。 关 键 在 于 有 这 个 意识 ， 随 
时 注意 不 要 让 代码 产生 紧密 耦合 。 

1. 解 而 HTML/JavaScript 

Web 开发 中 最 常见 的 耦合 是 HTML/JavaScript 耦合 。 在 网 页 中 ，HTML 和 JavaScript 分 别 代表 不 同 
层面 的 解决 方案 。HTML 是 数据 ，JavaScript 是 行为 。 这 是 因为 它们 之 间 要 交互 操作 ， 需 要 通过 不 同 的 
方式 将 这 两 种 技术 联系 起 来 。 可 惜 的 是 ， 其 中 一 些 方式 会 导致 HTML 与 JavaScript 紧密 耦合 。 

把 JavaScript 直接 租 入 在 HTML 中 ， 要 么 使 用 包含 嵌入 代码 的 <script> 元 素 ， 要 么 使 用 HTITML 属 
性 添加 事件 处 理 程序 ， 这 些 都 会 造成 紧密 耦合 。 比 如 下 面 的 例子 : 


<!-- 使 用 <script> 造 成 HTML/JavaScript 紧密 耦合 --> 
<script> 

document .write("Hello world!"); 
</script> 


















































































































































<!-- 使 用 事件 处 理 程序 属性 造成 HTML/JavaScript 紧密 耦合 --> 
<input type="button" value="Click Me" onclick="doSomething()"/> 


虽然 技术 上 这 样 做 没有 问题 , 但 实践 中 ， 这样 会 将 表示 数据 的 HTML 与 定义 行为 的 JavaScript 紧密 
耦合 在 一 起 。 理 想 情况 下 ，HIML 和 JavaScript 应 该 完全 分 开 ， 通过 外 部 文件 引入 JavaScript， 然后 使 用 
DOM 添加 行为 。 

HTML 与 JavaScript 紧密 耦合 的 情况 下 ， 每 次 分 析 JavaScript 的 报错 都 要 先 确定 错误 来 自 HTML 还 
是 JavaScript。 这 样 也 会 引入 代码 可 用 性 的 新 错误 。 在 这 个 例子 中 , 用户 可 能 会 在 dosomething () 函数 
可 用 之 前 点 击 按钮 ， 从 而 导致 JavaScript 报错 。 因 为 每 次 修改 按钮 的 行为 都 需要 既 改 HIML 又 改 
JavaScript， 而 实际 上 只 有 后 者 才 是 有 必要 修改 的 ， 所 以 就 会 降低 代码 的 可 维护 性 。 

在 相反 的 情况 下 ，HTML 和 JavaScript 也 会 变 得 紧密 耦合 : 把 HIML 包含 在 JavaScript 
况 通常 发 生 在 把 一 段 HTML 通过 innerHTML 插入 到 页 面 中 时 ， 示 例如 下 : 





















































。 这 种 情 
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// HTML 紧密 耦合 到 了 JavaScript 
function insertMessage (msg) { 
let container = document .getElementById("container"); 
container.innerHTML = <div class="msg"> 
< Clase="Dost Stnsgey/ pS 
<p><em>Latest message above.</em></p> 
</div>; 

} 

一 般 来 说 ， 应 该 避免 在 JavaScript 中 创建 大 量 HTML。 同 样 ， 这 主要 是 为 了 做 到 数据 层 和 行为 层 各 
司 其 职 ， 在 出 错时 更 容易 定位 问题 所 在 。 使 用 上 面 的 示例 代码 时 ， 如 果 动 态 插入 的 HTML 格式 不 对 ， 
就 会 造成 页 面 布局 出 错 。 不 过 在 这 种 情况 下 定位 错误 就 更 困难 了 ， 因 为 这 时 候 通 常 首先 会 去 找 页 面 中 出 
错 的 HTML 源 代码 , 但 又 找 不 到 ， 因 为 它 是 动态 生成 的 。 修改 数据 或 页 面 的 同时 还 需要 修改 JavaScript， 
这 说 明 两 层 是 紧密 耦合 的 。 

HTML 演 染 应 该 尽 可 能 与 JavaScript 分 开 。 在 使 用 JavaScript 插入 数据 时 ， 应 该 尽 可 能 不 要 插入 标 
记 。 相 应 的 标记 可 以 包含 并 隐藏 在 页 面 中 ， 在 需要 的 时 候 JavaScript 可 以 直接 用 它 来 显示 ， 而 不 需要 动 
态 生成 。 另 一 个 办 法 是 通过 Ajax 请 求 获取 要 显示 的 HIML, 这 样 也 可 以 保证 同一 个 泻 染 层 ( PHP、JSP、 
Ruby 等 ) 负责 输出 标记 ， 而 不 是 把 标记 由 在 JavaScript 中 。 

解 而 HTML 和 JavaScript 可 以 节省 排 错 时 间 ， 因 为 更 容易 定位 错误 来 源 。 同 样 解 厢 也 有 助 于 保证 可 
维护 性 。 修 改行 为 只 涉及 JavaScript， 修 改 标记 只 涉及 要 泻 染 的 文件 。 

2. 解 耦 CSS/JavaScript 

Web 应 用 程序 的 另 一 层 是 CSS ,主要 负责 页 面 显示 。JavaScript 和 CSS 紧密 相关 ,它们 都 建构 在 HTML 
之 上 ， 因 此 也 经 常 一 起 使 用 。 与 HTML 和 JavaScript 的 情况 类 似 ，CSS 也 可 能 与 JavaScript 产生 紧密 耦 
合 。 最 常见 的 例子 就 是 使 用 JavaScript 修改 个 别 样式 ， 比 如 : 


// CSS 紧 耦 合 到 了 JavaScript 
element .Style.color = "redq" 
element .Style.backgrounadColor = "blue"; 


因为 CSS 负责 页 面 显示 ， 所 以 任何 样式 的 问题 都 应 该 通过 CSS 文件 解决 。 可 是 ， 如 果 JavaScript 
直接 修改 个 别 样式 ( 比如 颜色 )， 就 会 增加 一 个 排 错 时 要 考虑 甚至 要 修改 的 因素 。 结 果 是 JavaScript 某 种 
程度 上 承担 了 页 面 显示 的 任务 ， 与 CSS 成 了 紧密 耦合 。 如 果 将 来 有 一 天 要 修改 样式 ， 那 么 CSS 和 
JavaScript 可 能 都 需要 修改 。 这 对 负责 维护 的 开发 者 来 说 是 一 个 置 梦 。 层 与 层 的 清晰 解 耦 是 必需 的 。 

现代 Web 应 用 程序 经 常 使 用 JavaScript 改变 样式 ， 因 此 虽然 不 太 可 能 完全 解 耦 CSS 和 JavaScript， 
但 可 以 让 这 种 耦合 变 成 更 松散 。 这 主要 可 以 通过 动态 修改 类 名 而 不 是 样式 来 实现 ， 比 如 : 

// CSS 与 JavaScript 松散 耦合 

element .className = "edit"; 


通过 修改 元 素 的 CSS 类 名 ， 可 以 把 大 部 分 样式 限制 在 CSS 文件 里 。JavaScript 只 负责 修改 应 用 样式 
的 类 名 ， 而 不 直接 影响 元 素 的 样式 。 只 要 应 用 的 类 名 没 错 ， 那 么 显示 的 问题 就 只 跟 CSS 有 关 ， 而 跟 
JavaScript 无 关 。 

同样 , 保证 层 与 层 之 间 的 适当 分 离 至 关 重 要 。 显 示 出 问题 就 应 该 只 到 CSS 中 解决 , 行为 出 问题 就 应 
该 只 找 JavaScript 的 问题 。 这 些 层 之 间 的 松散 耦合 可 以 提升 整个 应 用 程序 的 可 维护 性 。 

3. 解 耦 应 用 程序 逻辑 /事件 处 理 程序 

每 个 Web 应 用 程序 中 都 会 有 大 量 事件 处 理 程序 在 监听 各 种 事件 。 可 是 ， 其 中 很 少 能 真正 做 到 应 用 
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程序 逻辑 与 事件 处 理 程序 分 离 。 来 看 下 面 的 例子 : 


function handleKeyPress (event) { 
if (event.keyCode == 13) { 
let target = event.target; 
let value = 5 * parseInt (target .value); 
if (value > 10) { 
document .getElementById("error-msg") .style.display = "block"; 
} 
} 


这 个 事件 处 理 程序 除了 处 理事 件 ,还 包含 了 应 用 程序 逻辑 。 这 样 做 的 问题 是 双重 的 。 首 先 , 除了 事 
件 没有 办 法 触发 应 用 程序 逻辑 ,结果 造成 调试 困难 。 如 果 没 有 产生 预期 的 结果 怎么 办 ?是 因为 没有 调用 
事件 处 理 程序 , 还 是 因为 应 用 程序 逻辑 有 错误 ?其 次 ,如 果 后 续 事件 也 会 对 应 相同 的 应 用 程序 逻辑 ， 则 
会 导致 代码 重复 ,或 者 把 它 提取 到 单独 的 函数 中 。 无 论 情 况 如 何 ， 都 会 导致 原本 不 必要 的 多 余 工作 。 

更 好 的 做 法 是 将 应 用 程序 逻辑 与 事件 处 理 程序 分 开 , 各 自负 责 处 理 各 自 的 事情 。 事件 处 理 程序 应 该 
专注 于 event 对 象 的 相关 信息 ， 然 后 把 这 些 信 息 传 给 处 理应 用 程序 逻辑 的 某 些 方法 。 例 如 ， 前 面 的 例 
子 可 以 重 写 为 如 下 代码 : 


function validateVvalue(value) { 
value = 5 * parseInt (value); 
if (value > 10) { 
document .getElementById("error-msg") .style.display = "block"; 
} 
} 












































































































































function handleKeyPress (event) { 
if (event.keyCode == 13) { 
let target = event.target; 
validateValue (target .value); 
} 
} 


这 样 修改 之 后 , 应 用 程序 逻辑 跟 事 件 处理 程 序 就 分 开 了 。handleKeyPress () 函数 只 负责 检查 用 户 
是 不 是 按 下 了 回 车 键 (event .keyCode 等 于 13 )， 如 果 是 则 取得 事件 目标 ， 并 把 目标 值 传 给 
validateValue() 函数 , 该 也 数 包含 应 用 程序 迎 辑 。 注 意 ,，valigdatevalue () 函数 中 不 包含 任何 依赖 
事件 处 理 程序 的 代码 。 这 个 子 数 只 负责 接收 一 个 值 ， 并 根据 该 值 执行 其 他 所 有 操作 。 

把 应 用 程序 逻辑 从 事件 处 理 程序 中 分 离 出 来 有 很 多 好 处 。 首 先 , 这 可 以 让 我 们 以 最 少 的 工作 量 轻 松 
地 修改 触发 某 些 流程 的 事件 。 如 果 原 来 是 通过 鼠标 单 击 触发 流程 ， 而 现在 又 想 增 加 键盘 操作 来 触发 , 那 
么 修改 起 来 也 很 简单 。 其 次 ， 可 以 在 不 用 添加 事件 的 情况 下 测试 代码 ， 这 样 创建 单元 测试 或 自动 化 应 用 
程序 流 都 会 更 简单 。 

以 下 是 在 解 耦 应 用 程序 逻辑 和 业务 逻辑 时 应 该 注意 的 几 点 。 

口 不 要 把 event 对 象 传 给 其 他 方法 ， 而 是 只 传递 event 对 象 中 必要 的 数据 。 

口 应 用 程序 中 每 个 可 能 的 操作 都 应 该 无 须 事件 处 理 程 序 就 可 以 执行 。 

口 事件 处 理 程序 应 该 处 理事 件 ， 而 把 后 续 处 理 交 给 应 用 程序 逻辑 。 

故 到 上 述 几 点 能 够 给 任何 代码 的 可 维护 性 带 来 巨大 的 提升 , 同时 也 能 为 将 来 的 测试 和 开发 提供 很 多 
可 能 性 。 
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28.1.4 ”编码 惯例 


编写 可 维护 的 JavaScript 不 仅仅 涉及 代码 格式 和 规范 ， 也 涉及 代码 做 什么 。 企 业 开发 Web 应 用 程序 
通常 需要 很 多 人 协同 工作 。 这 时 候 就 需要 保证 每 个 人 的 浏览 器 环境 都 有 恒定 不 变 的 规则 。 为 此 ， 开 发 者 
应 该 遵守 某 些 编码 惯例 。 

1. 尊重 对 象 所 有 权 

JavaScript 的 动态 特性 意味 着 几乎 可 以 在 任何 时 候 修改 任何 东西 。 过 去 有 人 说 ，JavaScript 中 没有 什 
么 是 神圣 不 可 侵犯 的 ， 因 为 不 能 把 任何 东西 标记 为 最 终结 果 或 者 恒定 不 变 。 但 ECMAScript 5 引入 防 自 
改 对 象 之 后 ， 情 况 不 同 了 。 当 然 ， 对 象 默认 还 是 可 以 修改 的 。 在 其 他 语言 中 ， 在 没有 源 代 码 的 情况 下 ， 
对 象 和 类 不 可 修改 。JavaScript 则 允许 在 任何 时 候 修改 任何 对 象 ， 因 此 就 可 能 导致 意外 地 覆盖 默认 行为 。 
因为 这 门 语言 没有 什么 限制 ， 所 以 就 需要 开发 者 自己 限制 自己 。 

在 企业 开发 中 , 非常 重要 的 编码 惯例 就 是 尊重 对 象 所 有 权 ， 这 意味 着 不 要 修改 不 属于 你 的 对 象 。 简 
单 来 讲 ， 如 果 你 不 负责 创建 和 维护 某 个 对 象 及 其 构造 函数 或 方法 ,就 不 应 该 对 其 进行 任何 修改 。 更 具体 
一 点 说 ， 就 是 如 下 惯例 。 

口 不 要 给 实例 或 原型 添加 属性 。 
口 不 要 给 实例 或 原型 添加 方法 。 

口 不 要 重 定义 已 有 的 方法 。 

问题 在 于 ,开发 者 会 假设 浏览 器 环境 以 某 种 方式 运行 。 修 改 了 多 个 人 使 用 的 对 象 也 就 意味 着 会 有 错 
误 发 生 。 假 设 有 人 和 希望 某 个 函数 叫 作 stopEvent () ， 用 于 取消 某 个 事件 的 默认 行为 。 然 后 ， 你 把 它 给 
改 了 ,除了 取消 事件 的 默认 行为 ， 又 添加 了 其 他 事件 处 理 程序 。 可 想 而 知 ， 问 题 肯 定 会 接 中 而 至 。 别 人 
还 认为 这 个 函数 只 做 最 开始 的 那 点 事 , 但 由 于 对 它 后 来 添加 的 副作用 并 不 知情 ,因此 很 可 能 就 会 用 错 或 
者 造成 损失 。 

以 上 规则 不 仅 适 用 于 自 定 义 类 型 和 对 象 ， 而 且 适 用 于 原生 类 型 和 对 象 ， 比 如 object、string、 
document 、window， 等 等 。 考 虑 到 浏览 器 厂商 也 有 可 能 会 在 不 公开 的 情况 下 以 非 预 期 方式 修改 这 些 对 
象 ， 潜 在 的 风险 就 更 大 了 。 

有 个 流行 的 Prototype 库 就 发 生 过 类 似 的 事件 。 该 库 在 document 对 象 上 实现 了 getElementsBy- 
ClassName () 方 法 , 返回 一 个 Array 的 实例 ,而 这 个 实例 上 还 增加 了 each() 方 法 。 jQuery 的 作者 John 
Resig 后 来 在 自己 的 博客 上 分 析 了 这 个 问题 造成 的 影响 。 他 在 博客 中 指出 这 个 问题 是 由 于 浏览 器 也 原生 
实现 了 相同 的 getElementsByClassName () 方 法 造成 的 ， 但 Prototype 的 同名 方法 返回 的 是 Array 而 
非 NodeList，NodeList 没有 each () 方 法 。 使 用 这 个 库 的 开发 者 之 前 会 写 这 样 的 代码 : 

document .getElementsByClassName ("selected") .each (Element .hide); 
虽然 这 样 写 在 没有 原生 实现 getElementsByClassName () 方 法 的 浏览 器 里 没有 问题 , 但 在 实现 它 
的 浏览 器 里 就 会 出 问题 。 这 是 因为 两 个 同名 方法 返回 的 结果 不 一 样 。 我 们 不 能 预见 浏览 器 厂商 将 来 会 怎 
么 修改 原生 对 象 ， 因 此 不 管 怎么 修改 它们 都 可 能 在 将 来 某 个 时 刻 出 现 冲 突 时 导致 问题 。 

为 此 , 最 好 的 方法 是 永远 不 要 修改 不 属于 你 的 对 象 。 只 有 你 自己 创建 的 才 是 你 的 对 象 ， 包 括 自 定义 
类 型 和 对 象 字面 量 。Array、document 等 对 象 都 不 是 你 的 ， 因为 在 你 的 代码 执行 之 前 它们 已 经 存在 了 。 
可 以 按 如 下 这 样 为 对 象 添加 新 功能 。 

口 创建 包含 想 要 功能 的 新 对 象 ， 通 过 它 与 别人 的 对 象 交 互 。 
口 创建 新 自 定义 类 型 继承 本 来 想 要 修改 的 类 型 ， 可 以 给 自 定义 类 型 添加 新 功能 。 








































































































































































































































































































































































































28.1 可 维护 性 849 








很 多 JavaScript 库 目 前 支持 这 种 开发 理念 ， 这 样 无论 浏 览 器 怎样 改变 都 可 以 发 展 和 适应 。 

2. 不 声明 全 局 变量 

与 尊重 对 象 所 有 权 密 切 相 关 的 是 尽 可 能 不 声明 全 局 变量 和 函数 。 同 样 ， 这 也 关系 到 创建 一 致 和 可 维 
护 的 脚本 运行 环境 。 最 多 可 以 创建 一 个 全 局 变量 ， 作 为 其 他 对 象 和 函数 的 命名 空间 。 来 看 下 面 的 例子 : 

// 两 个 全 局 变量 : 不 要 | 


var name = "Nicholas"; 
function sayName() { 
console.1log (name); 


} 
以 上 代码 声明 了 两 个 全 局 变量 : name 和 sayName ()。 可 以 像 下 面 这 样 把 它们 包含 在 一 个 对 象 中 : 
// 一 个 全 局 变量 : 推荐 
var MyApplication = { 
name: "Nicholas", 
sayName: function() { 
console.log(this.name); 
} 
于 
这 个 重 写 后 的 版 本 只 声明 了 一 个 全 局 对 象 MyApplication。 该 对 象 包含 了 7 name 和 sayName () 。 
这 样 可 以 避免 之 前 版 本 的 几 个 问题 。 首 先 ， 变 量 name 会 覆盖 windqow.name 属性 ， 而 这 可 能 会 影响 其 
他 功能 。 其 次 ， 有 助 于 分 清 功能 都 集中 在 哪里 。 调 用 Myapplication.sayName () 从 逻辑 上 会 暗示 ， 
出 现任 何 问题 都 可 以 在 MyApplication 的 代码 中 找 原 因 。 
这 样 一 个 全 局 对 象 可 以 扩展 为 命名 空间 的 概念 。 命 名 空间 涉及 创建 一 个 对 象 ,然后 通过 这 个 对 象 来 
暴露 能 力 。 比 如 ，Google Closure 库 就 利用 了 这 样 的 命名 空间 来 组 织 其 代码 。 下 面 是 几 个 例子 。 
口 goog. string: 用 于 操作 字符 串 的 方法 。 
口 goog.html.utils: 与 HTML 相关 的 方法 。 
口 goog .il8n: 与 国际 化 (il8n ) 相关 的 方法 。 
对 象 goog 就 相当 于 一 个 容器 ， 其 他 对 象 包含 在 这 里 面 。 只 要 使 用 对 象 以 这 种 方式 来 组 织 功 能 ， 就 
可 以 称 该 对 象 为 命名 空间 。 整 个 Google Closure 库 都 构建 在 这 个 概念 之 上 ， 能 够 在 同一 个 页 面 上 与 其 
JavaScript 库 共存 。 
关于 命名 空间 ， 最 重要 的 确定 一 个 所 有 人 都 同意 的 全 局 对 象 名 称 。 这 个 名 称 要 足够 独特 ， 不 可 能 后 
其 他 人 的 冲突 。 大 多 数 情况 下 ， 可 以 使 用 开发 者 所 在 的 公司 名 ， 例 如 goog 或 wzrox。 下 面 的 例子 演示 
了 使 用 wrox 作为 命名 空间 来 组 织 功能 : 
// 创建 爹 局 对 象 


var Wrox = {}; 
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// 为 本 书 (Professional JavaScript) 创建 命名 空间 
Wrox.ProJS = {}; 


// 添加 本 书 用 到 的 其 他 对 象 
Wrox.ProJS.EventUtil = { ... }; 
Wrox.ProJS.CookieUtil = { ... }; 


在 这 个 例子 中 ，wrox 是 全 局 变量 ， 然 后 在 它 的 下 面 又 创建 了 命名 空间 。 如 果 本 书 所 有 代码 都 保存 
在 Wwrox.ProJs 命名 空间 中 , 那么 其 他 作者 的 代码 就 可 以 使 用 自己 的 对 象 来 保存 。 只 要 每 个 人 都 遵循 这 
个 模式 ， 就 不 必 担 心 有 人 会 覆盖 这 里 的 EventUtil 或 cookieUtil， 因 为 即使 重 名 它们 也 只 会 出 现在 
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不 同 的 命名 空间 中 。 比 如 下 面 的 例子 : 
// 为 另 一 本 书 (Professional Ajax) 创建 命名 空间 
Wrox.ProAjax = {}; 


// 添加 其 他 对 象 
Wrox.ProAjax.EventUtil = { ... }; 
Wrox.ProAjax.CookieUtil = { ... }; 


// 可 以 照常 使 用 ProJS 下 面 的 对 象 
Wrox.ProJS.EventUtil.addHandler( ... ); 


// 以 及 ProAjax 下 面 的 对 象 
Wrox.ProAjax.EventUtil.addHandler( ... ); 
虽然 命名 空间 需要 多 写 一 点 代码 , 但 从 可 维护 性 角度 看 ， 这 个 代价 还 是 非常 值得 的 。 命 名 空间 可 以 
确保 代码 与 页 面 上 的 其 他 代码 互 不 干扰 。 

3. 不 要 比较 nul1 

JavaScript 不 会 自动 做 任何 类 型 检查 ,因此 就 需要 开发 者 担 起 这 个 责任 。 结 果 , 很 多 JavaScript 代码 
不 会 做 类 型 检查 。 最 常见 的 类 型 检查 是 看 值 是 不 是 nul1。 然 而 ， 与 null 进行 比较 的 代码 太 多 了 ， 其 
中 很 多 因为 类 型 检查 不 够 而 频繁 引发 错误 。 比 如 下 面 的 例子 : 


function sortArray (values) { 
if (values != null) { // 不 要 这 样 比较 | 
values.sort (comparator); 






























































} 
} 


这 个 函数 的 目的 是 使 用 给 定 的 比较 函数 对 数组 进行 排序 。 为 保证 函数 正常 执行 ，values 参数 必须 
是 数组 。 但 是 ，if 语句 在 这 里 只 简单 地 检查 了 这 个 值 不 是 nul1。 实际 上 ,字符 串 、 数 值 还 有 其 他 很 多 
值 可 以 通过 这 里 的 检查 ， 结 果 就 会 导致 错误 。 

现实 当中 , 单纯 比较 nul1 通常 是 不 够 的 。 检 查 值 的 类 型 就 要 真 的 检查 类 型 ， 而 不 是 检查 它 不 能 是 
什么 。 例 如 ， 在 前 面 的 代码 中 ，values 参数 应 该 是 数组 。 为 此 ， 应 该 检查 它 到 底 是 不 是 数组 ， 而 不 是 
检查 它 不 是 nul1l1。 可 以 像 下 面 这 样 重 写 那 个 函数 : 


function sortArray (values) { 
if (values instanceof Array) { // 推荐 
values.sort (comparator); 
} 
} 


此 函数 的 这 个 版 本 可 以 过 滤 所 有 无 效 的 值 ， 根 本 不 需要 使 用 nu1l。 
如 果 看 到 比较 nul1l 的 代码 ， 可 以 使 用 下 列 某 种 技术 替换 它 。 
口 如 果 值 应 该 是 引用 类 型 ， 则 使 用 instanceof 操作 符 检查 其 构造 函数 。 
口 如 果 值 应 该 是 原始 类 型 ， 则 使 用 typeof 检查 其 类 型 。 
口 如 果 希 望 值 是 有 特定 方法 名 的 对 象 ， 则 使 用 typeof 操作 符 确保 对 象 上 存在 给 定名 字 的 方法 。 
代码 中 比较 nul1l 的 地 方 越 少 ， 就 越 容易 明确 类 型 检查 的 目的 ， 从 而 消除 不 必要 的 错误 。 
4. 使 用 常量 
依赖 常量 的 目标 是 从 应 用 程序 逻辑 中 分 离 数据 ， 以 便 修 改 数据 时 不 会 引发 错误 。 显示 在 用 户 界 面 上 
的 字符 串 就 应 该 以 这 种 方式 提取 出 来 ,可 以 方便 实现 国际 化 。URL 也 应 该 这 样 提 取出 来 , 因为 随 着 应 用 
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程序 越 来 越 复杂 ，URL 极 有 可 能 变化 。 基 本 上 , 像 这 种 地 方 将 来 因为 某 种 原因 而 需要 修改 时 ,可 能 就 要 
找到 某 个 函数 并 修改 其 中 的 代码 。 每 次 像 这 样 修改 应 用 程序 逻辑 ， 都 可 能 引入 新 错误 。 为 此 ， 可 以 把 这 
些 可 能 会 修改 的 数据 提取 出 来 ， 放 在 单独 定义 的 常量 中 ， 以 实现 数据 与 逻辑 分 离 。 
关键 在 于 把 数据 从 使 用 它们 的 逻辑 中 分 离 出 来 。 可 以 使 用 以 下 标准 检查 哪些 数据 需要 提取 。 
口 重复 出 现 的 值 : 任何 使 用 超过 一 次 的 值 都 应 该 提取 到 常量 中 ， 这 样 可 以 消除 一 个 值 改 了 而 另 一 
个 值 没 改造 成 的 错误 。 这 里 也 包括 CSS 的 类 名 。 
口 用 户 界 面 字符 串 : 任何 会 显示 给 用 户 的 字符 串 都 应 该 提取 出 来 ， 以 方便 实现 国际 化 。 
口 URL: Web 应 用 程序 中 资源 的 地 址 经 常会 发 生变 化 ， 因 此 建议 把 所 有 URL 集中 放 在 一 个 地 方 
管理 。 
口 任何 可 能 变化 的 值 : 任何 时 候 ， 只 要 在 代码 中 使 用 字面 值 ， 就 问 问 自己 这 个 值 将 来 是 否 可 能 会 
变 。 如 果 答 案 是 “是 "， 那 么 就 应 该 把 它 提取 到 常量 中 。 
使 用 常量 是 企业 级 JavaScript 开发 的 重要 技术 ， 因 为 它 可 以 让 代码 更 容易 维护 ， 同 时 可 以 让 代码 免 
受 数据 变化 的 影响 。 


28.2 性 能 


相 比 JavaScript 刚 问 世 时 , 目前 每 个 网 页 中 JavaScript 代码 的 数量 已 有 极 大 的 增长 。 代 码 量 的 增长 也 
带 来 了 运行 时 执行 JavaScript 的 性 能 问题 。JavaScript 一 开始 就 是 一 门 解释 型 语言 ， 因 此 执行 速度 比 编译 
型 语言 要 慢 一 些 。Chrome 是 第 一 个 引入 优化 引擎 将 JavaScript 编译 为 原生 代码 的 浏览 器 。 随 后 ， 其 他 主 
流 浏 览 器 也 紧 随 其 后 ， 实 现 了 JavaScript 编译 。 

即使 到 了 编译 JavaScript 时 代 ， 仍 可 能 写 出 运行 慢 的 代码 。 不 过 ， 如 果 遵 循 一 些 基 本 模式 ， 就 能 保 
证 写 出 执行 速度 很 快 的 代码 。 


28.2.1 作用 域 意 识 


第 4 章 讨 论 过 JavaScript 作用 域 的 概念 ， 以 及 作用 域 链 的 工作 原理 。 随 着 作用 域 链 中 作用 域 数量 的 
增加 , 访问 当前 作用 域外 部 变量 所 需 的 时 间 也 会 增加 。 访问 全 局 变量 始终 比 访问 局 部 变量 慢 ， 因 为 必须 
遍历 作用 域 链 。 任 何 可 以 缩短 遍历 作用 域 链 时 间 的 举措 都 能 提升 代码 性 能 。 


1. 避免 全 局 查找 
改进 代码 性 能 非常 重要 的 一 件 事 ,可 能 就 是 要 提防 全 局 查询 。 全 局 变量 和 函数 相 比 于 局 部 值 始终 是 
最 费时 间 的 ， 因 为 需要 经 历 作用 域 链 查找 。 来 看 下 面 的 函数 : 
function updateUI() { 
let imgs = document .getElementsByTagName ("img"); 
for (let i = 0, len = imgs.length; i < len; i++) { 
imgs[i].title = '${document.title} image S${i}'; 


} 









































































































































































































































let msg = document .getElementById("msg"); 
msg.innerHTML = "Update complete."; 
} 


这 个 函数 看 起 来 好 像 没 什么 问题 , 但 其 中 三 个 地 方 引用 了 全 局 aocument 对 象 。 如 果 页 面 的 图 片 非 
常 多 ,那么 for 循环 中 就 需要 引用 document 几 十 甚至 上 百 次 ， 每 次 都 要 遍历 一 次 作用 域 链 。 通 过 在 
局 部 作用 域 中 保存 document 对 象 的 引用 ， 能 够 明显 提升 这 个 函数 的 性 能 ， 因 为 只 需要 作用 域 链 查 找 。 
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通过 创建 一 个 指向 aocument 对 象 的 局 部 变量 , 可 以 通过 将 全 局 查找 的 数量 限制 为 一 个 来 提高 这 个 函数 
的 性 能 : 
function updateUI() { 
let doc = document; 
let imgs = doc.getElementsByTagName ("img"); 
for (let i = 0, len = imgs.length; i < len; i++) { 
imgs[i].title = '${doc.title} image ${i}'; 
} 





let msg = doc.getElementById("msg"); 
msg.innerHTML = "Update complete."; 
} 


这 里 先 把 dgocument 对 象 保存 在 局 部 变量 doc 中。 然后 用 doc 替代 了 代码 中 所 有 的 aocument。 
这 样 调用 这 个 函数 只 会 查找 一 次 作用 域 链 ， 相 对 上 一 个 版 本 ， 肯 定 会 快 很 多 。 
因此 , 一 个 经 验 规 则 就 是 ， 只 要 函数 中 有 引用 超过 两 次 的 全 局 对 象 ， 就 应 该 把 这 个 对 象 保存 为 一 个 
局 部 变量 。 

2. 不 使 用 with 语句 

在 性 能 很 重要 的 代码 中 ， 应 避免 使 用 with 语句 。 与 函数 类 似 ，with 语句 会 创建 自己 的 作用 域 ， 
因此 也 会 加 长 其 中 代码 的 作用 域 链 。 在 with 语句 中 执行 的 代码 一 定 比 在 它 外 部 执行 的 代码 慢 ， 因 为 作 
用 域 链 查 找 时 多 一 步 。 
实际 编码 时 很 少 有 需要 使 用 with 语句 的 情况 , 因为 它 的 主要 用 途 是 节省 一 点 代码 。 大 多 数 情 况 下 ， 
使 用 局 部 变量 可 以 实现 同样 的 效果 ， 无 须 增加 新 作用 域 。 下 面 看 一 个 例子 : 


function updateBody() { 
with(document .body) { 
console.log(tagName); 
innerHTML = "Hello world!"; 
小 


这 段 代 码 中 的 with 语句 让 使 用 document .body 更 简单 了 。 使 用 局 部 变量 也 可 以 实现 同样 的 效果 ， 
如 下 : 


function updateBody() { 
let body = document .body; 
console.log(bodqy .tagName) ; 
body.innerHTML = "Hello world!"; 
} 


虽然 这 段 代码 多 了 几 个 字符 ,但 比 使 用 with 语句 还 更 容易 理解 了 ， 因 为 cagName 和 innerHTML 
属于 谁 很 明确 。 这 段 代码 还 通过 把 aocument .body 保存 在 局 部 变量 中 来 省 去 全 局 查找 。 


28.2.2 ”选择 正确 的 方法 

与 其 他 语言 一 样 , 影响 性 能 的 因素 通常 涉及 算法 或 解决 问题 的 方法 。 经 验 丰富 的 开发 者 知道 用 什么 
方法 性 能 更 佳 。 通 常 很 多 能 在 其 他 编程 语言 中 提升 性 能 的 技术 和 方法 同样 也 适用 于 JavaScript。 

1. 避免 不 必要 的 属性 查找 

在 计算 机 科学 中 ， 算 法 复杂 度 使 用 大 O 表示 法 来 表示 。 最 简单 同时 也 最 快 的 算法 可 以 表示 为 常量 值 
或 0(1), 然后 , 稍微 复杂 一 些 的 算法 同时 执行 时 间 也 更 长 一 些 。 下 表 列 出 了 JavaScript 中 常见 算法 的 类 型 。 
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表示 法 名 称 说 明 
0O(1) 常量 无 论 多 少 值 ， 执 行 时 间 都 不 变 。 表 示 简 单 值 和 保存 在 变量 中 的 值 
O(logn) 对 数 执行 时 间 随 着 值 的 增加 而 增加 ， 但 算法 完成 不 需要 读 取 每 个 值 。 例子: 二 分 查找 
O(n) 线性 执行 时 间 与 值 的 数量 直接 相关 。 例 子 : 迭代 数组 的 所 有 元 素 
O(n’) 二 次 方 执行 时 间 随 着 值 的 增加 而 增加 ， 而 且 每 个 值 至 少 要 读 取 次 。 例 子 : 搬入 排序 

















常量 值 或 0(1), 指 字面 量 和 保存 在 变量 中 的 值 ,表示 读 取 常 量 值 所 需 的 时 间 不 会 
因此 非常 快 。 来 看 下 面 的 例子 : 











读 取 常 量 值 是 效率 极 高 的 操作 ， 


let value SS 
let sum = 10 + value; 
console.1log (sum); 









































大 


值 的 多 少 而 变化 。 





以 上 代码 查询 了 4 次 常量 值 : 数值 5、 变 量 value、 数 值 10 和 变量 sum。 整 体 代码 的 复杂 度 可 以 认 
为 是 0(1)。 

在 JavaScript 中 访问 数组 元 素 也 是 0(1) 操 作 ， 与 简单 的 变量 查找 一 样 。 因 此 ， 下 面 的 代码 与 前 面 的 
例子 效率 一 样 : 

let. values: = [5 140]; 

let sum = Values[0] + values[1]; 


console.log (sum); 

















杂 度 是 O(n)。 访问 对 象 的 每 个 
简 














使 用 变量 和 数组 相 比 访问 对 象 属性 效率 更 高 , 访问 对 象 属性 的 算法 复 
属性 都 比 访问 变量 或 数组 花费 的 时 间 长 ， 因 为 查找 属性 名 要 搜索 原型 链 。 
执行 时 间 就 越 长 。 来 看 下 面 的 例子 : 

let Values = { first: 5, second: 10 }; 

let sum = values.first + values.secongd; 


console.log (sum); 





单 来 说 ,查找 的 属性 越 多 ， 








这 个 例子 使 
上 千 次 则 绝对 会 拖 慢 执行 速度 。 














用 两 次 属性 查找 来 计算 sum 的 值 。 一 两 次 所 





性 查找 可 能 不 会 有 明显 的 公 





能 问题 , 但 几 百 


特别 要 注意 避免 通过 多 次 查找 获取 一 个 值 。 例 如 ， 看 下 面 的 例子 : 


let query = window.location.href.substring (window.location.href.indexOf ("?")); 


二 


这 里 有 6 次 属 


县 





























window.1location. 


以 上 代码 效率 特别 低 ， 这 是 








性 查找 : 3 次 是 为 查找 window.location.href.substring()，3 次 是 为 查找 
href.indexof ()。 通 过 数 代 码 中 出 现 的 点 号 数 
因为 使 用 了 两 次 window.1location.href， 即 同样 的 查找 执行 了 两 遍 。 





三 风 
里 


Sy 





就 可 以 知道 有 几 次 属性 查找 。 



























































只 要 使 用 某 个 object 属性 超过 一 次 , 就 应 该 将 其 保存 在 局 部 变量 中 。 第 一 次 仍然 要 用 O(n) 的 复杂 
度 去 访问 这 个 属性 , 但 后 续 每 次 访问 就 都 是 0(1), 这 样 就 是 质 的 提升 了 。 例如 ,前 面 的 代码 可 以 重 写 为 
如 下 : 


let url = window.location.href; 


let query = url.substring(url.indexOf ("?")); 















































这 个 版 本 的 代码 只 有 4 次 属性 查找 ， 比 之 前 节省 了 约 33%。 在 大 型 脚本 中 如 果 能 这 样 优化 ， 可 能 就 
会 明显 改进 性 能 。 

通常 ， 只 要 能 够 降低 算法 复杂 度 ， 就 应 该 尽量 通过 在 局 部 变量 中 保存 值 来 蔡 代 属性 查找 。 另 外 ， 如 
果实 现 某 个 需求 既 可 以 使 用 数组 的 数值 索引 ， 又 可 以 使 用 命名 属性 ( 比如 NodeList 对 象 )， 那 冯 














该 使 用 数值 索引 。 
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2. 优化 循环 

循环 是 编程 中 常用 的 语法 构造 ， 因 此 在 JavaScript 中 也 十 分 常见 。 优 化 这 些 循环 是 性 能 优化 的 重要 
内 容 ， 因 为 循环 会 重复 多 次 运行 相同 的 代码 ， 所 以 运行 时 间 会 自动 增加 。 其 他 语言 有 很 多 关于 优化 循环 
的 研究 ， 这 些 技术 同样 适用 于 JavaScript。 优 化 循环 的 基本 步骤 如 下 。 

(1) 简化 终止 条 件 。 因 为 每 次 循环 都 会 计算 终止 条 件 ， 所 以 它 应 该 尽 可 能 地 快 。 这 意味 着 要 避免 属性 
查找 或 其 他 O(n) 操 作 。 

(2) 简化 循环 体 。 循环 体 是 最 花 时 间 的 部 分 ， 因 此 要 尽 可 能 优化 。 要 确保 其 中 不 包含 可 以 轻松 转移 到 
循环 外 部 的 密集 计算 。 

(3) 使 用 后 测试 循环 。 最 常见 的 循环 就 是 for 和 while 循环 , 这 两 种 循环 都 属于 先 测试 循环 。 do-while 
就 是 后 测试 循环 ， 避 免 了 对 终止 条 件 初始 评估 ， 因 此 应 该 会 更 快 。 



































注意 ”在 旧版 浏览 器 中 ， 从 循环 迭代 器 的 最 大 值 开 始 递减 至 0 的 效率 更 高 。 之 所 以 这 样 更 
快 ， 是 因为 JavaScript 引擎 用 于 检查 循环 分 支 条 件 的 指令 数 更 少 。 在 现代 浏览 器 中 ， 正 序 


还 是 倒序 不 会 有 可 感知 的 性 能 差异 。 因 此 可 以 选择 最 适合 代码 逻辑 的 迭代 方式 。 








以 上 优化 的 效果 可 以 通过 下 面 的 例子 展示 出 来 。 这 是 一 个 简单 的 for 循环 : 
for (let i = 0; i < values.length; i++) { 
process (values[i]); 
} 
这 个 循环 会 将 变量 i 从 0 递增 至 数组 values 的 长 度 。 假设 处 理 这 些 值 的 顺序 不 重要 , 那么 可 以 将 
循环 变量 改 为 递减 的 形式 ， 如 下 所 示 : 
for (let i = values.length - 1; i >= 0; i--) { 
process (values[i]); 








} 
这 一 次 , 变量 i 每 次 循环 都 会 递减 。 在 这 个 过 程 中 , 终止 条 件 的 计算 复杂 度 也 从 查找 values. length 
的 O(n) 变 成 了 访问 0 的 0(1)。 循环 体 只 有 一 条 语句 , 已 不 能 再 优化 了 。 不 过 , 整个 循环 可 修改 为 后 测试 
循环 : 
let i = values.length-1; 
if (i > -1) { 
do 1{ 
process (values[i]); 
}while(--i >= 0); 
} 
这 里 主要 的 优化 是 将 终止 条 件 和 递减 操作 符合 并 成 了 一 条 语句 。 然 后 ， 如 果 再 想 优化 就 只 能 去 优化 
process () 的 代码 ， 因 为 循环 已 没有 可 以 优化 的 点 了 。 
使 用 后 测试 循环 时 要 注意 , 一 定 是 至 少 有 一 个 值 需要 处 理 一 次 。 如 果 这 里 的 数组 是 空 的 ， 那么 会 浪 
费 一 次 循环 ， 而 先 测 试 循环 就 可 以 避免 这 种 情况 。 
3. 展开 循环 
如 果 循 环 的 次 数 是 有 限 的 ， 那 么 通常 抛弃 循环 而 直接 多 次 调用 函数 会 更 快 。 仍 以 前 面 的 循环 为 例 ， 
如 果 数 组 长 度 始终 一 样 ， 则 可 能 对 每 个 元 素 都 调用 一 次 process () 效 率 更 高 : 
// 抛弃 循环 


process (values[0]); 


















































process (Values [1]) 
process (Values [2]) 


这 个 例子 假设 values 数组 始终 只 有 3 个 值 ， 然 后 分 别针 对 每 个 元 素 调用 一 次 process () 。 像 这 
样 展 开 循 环 可 以 节省 创建 循环 、 计 算 终 止 条 件 的 消耗 ， 从 而 让 代码 运行 更 快 。 

如 果 不 能 提前 预知 循环 的 次 数 ， 那 么 或 许可 以 使 用 一 种 叫 作 达 夫 设 备 (Duff's Device ) 的 技术 。 该 
技术 是 以 其 发 明 者 Tom Duff 命 名 的 , 他 最 早 建 议 在 C 语言 中 使 用 该 技术 。 在 JavaScript 实现 达 夫 设备 的 
人 是 JeffGreenberg。 达 夫 设 备 的 基本 思路 是 以 8 的 倍数 作为 迭代 次 数 从 而 将 循环 展开 为 一 系列 语句 。 来 
看 下 面 的 例子 : 


// 来 源 : Jeff Greenberg 在 JavaScript 中 实现 的 达 夫 设备 
// 假设 Values.length > 0 
let iterations = Math.ceil(values.length / 8); 


’ 
’ 

















let startAt = values.length % 8; 
let 和 = 0 
do { 
switch(startAt) { 
case 0: process (values [i++]) 
case 7: process (values [i++])， 
case 6: process (values[i++]); 
case 5: process (values[i++]); 
case 4: process (values [i++])， 
case 3: process (values [i++]); 
case 2: process (values[i++]); 
case 1: process (values [i++]); 
} 
startAt = 0; 
} while (--iterations > 0); 


这 个 达 夫 设备 的 实现 首先 通过 用 values 数组 的 长 度 除 以 8 计算 需要 多 少 次 循环 。Math. ceil () 
用 于 保证 这 个 值 是 整数 。startat 变量 保存 着 仅 按照 除 以 8 来 循环 不 会 处 理 的 元 素 个 数 。 第 一 次 循环 执 
行 时 ,会 检查 startat 变量 ,以 确定 要 调用 process () 多少 次 ,例如 ,假设 数组 有 10 个 元 素 , 则 startAt 
变量 等 于 2， 因 此 第 一 次 循环 只 会 调用 process () 两 次 。 第 一 次 循环 未 尾 ，startat 被 重 置 为 0。 于 是 
后 续 每 次 循环 都 会 调用 8 次 process () 。 这 样 展开 之 后 ， 能 够 加 快 大 数据 集 的 处 理 速 度 。 

Andrew B. King 在 Speed Up Your Site 一 书 中 提出 了 更 快 的 达 夫 设备 实现 ,他 将 ao-while 循环 分 成 
了 两 个 单独 的 循环 ， 如 下 所 示 : 


// 来 源 : Speed Up Your Site (New Riders, 2003) 
let iterations Math.floor(values.length / 8); 









































let leftover = values.length % 8; 
Let tSB 03 
if (leftover > 0) { 


do { 
process (values[i++]); 
} while (--leftover > 0); 


未 


do { 


process 
process 
process 
process 


( 
( 
( 
( 


values[i+t+ 
values 
values 


values 


工 十 十 
工 十 十 


工 十 十 


下 人 
有 
1 
国人: 
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process (values [i++] 
process (values [i++]); 
process (values [i++] 
process (values [i++]); 
} while (--iterations > 0); 








在 这 个 实现 中 , 变量 leftover 保存 着 只 按照 除 以 8 来 循环 不 会 处 理 , 因而 会 在 第 一 个 循环 中 处 理 
的 次 数 。 处 理 完 这 些 额 外 的 值 之 后 进入 主 循环 ， 每 次 循环 调用 8 次 process () 。 这 个 实现 比 原始 的 实 











现 快 约 40%。 














展开 循环 对 于 大 型 数据 集 可 以 节省 很 多 时 间 , 但 对 于 小 型 数据 集 来 说 ， 则 可 能 不 值得 。 因 为 实现 同 











样 的 任务 需要 多 写 很 多 代码 ， 所 以 如 果 人 处 理 的 数据 量 不 大 ， 那 么 显然 没有 必要 。 
4. 避免 重复 解释 














Function 构造 函数 ， 或 者 给 setTimeout () 传人 字符 串 参 数 时 会 出 现 这 种 情况 。 下 面 是 几 个 例子 : 
// 对 代码 求 值 : 不 要 


eval ("console.log('Hello world!')"); 


// 创建 新 函数 : 不 要 


let sayHi = new Function("console.log('Hello world!')"); 


// 设置 超时 函数 : 不 要 


setTimeout ("console.log('Hello world!')", 500); 














重复 解释 的 问题 存在 于 JavaScript 代码 尝试 解释 JavaScript 代码 的 情形 。 在 使 用 eval () 函数 或 


在 上 面 所 列 的 每 种 情况 下 ， 都 需要 重复 解释 包含 JavaScript 代码 的 字符 串 。 这 些 字符 串 在 初始 解析 
阶段 不 会 被 解释 ， 因 为 代码 包含 在 字符 串 里 。 这 意味 着 在 JavaScript 运行 时 ， 必 须 启 动 新 解析 器 实例 来 





























解析 这 些 字符 串 中 的 代码 。 实 例 化 新 解析 器 比较 费时 间 ， 因 此 这 样 会 比 直接 包含 原生 代码 慢 。 
这 些 情 况 都 有 对 应 的 解决 方案 。 很 少 有 情况 绝对 需要 使 用 eval () ， 因 此 应 该 尽 可 能 不 使 用 它 。 























( 
时 ， 只 要 把 代码 直接 写 出 来 就 好 了 。 对 于 Function 构造 函数 ， 重 写 为 常规 函数 也 很 容易 。 而 调用 




















setTimeout () 时 则 可 以 直接 把 函数 作为 第 一 个 参数 。 比 如 : 
// 直接 写 出 来 


console.log('Hello world!'); 





// 创建 新 函数 : 直接 写 出 来 
Jet sayHi = function() { 
console.log('Hello world!'); 


} 
// 设置 超时 函数 : 直接 写 出 来 





setTimeout (function() { 
console.log('Hello world!'); 
;S003 








Ud 
[e] 


为 了 提升 代码 性 能 ， 应 该 尽量 避免 使 用 要 当 作 JavaScript 代码 解释 的 字符 
5. 其 他 性 能 优化 注意 事项 














此 


在 评估 代码 性 能 时 还 有 一 些 地 方 需要 注意 。 下 面 列 出 的 虽然 不 是 主要 问题 , 但 在 使 用 比较 频繁 的 时 








候 也 可 能 有 所 不 同 。 




















口 原生 方法 很 快 。 应 该 尽 可 能 使 用 原生 方法 ， 而 不 是 使 用 JavaScript 写 的 方法 。 原 生 方 法 是 使 用 C 




















或 C++ 等 编译 型 语言 写 的 ， 因 此 比 JavaScript 写 的 方法 要 快 得 多 。JavaScript 中 经 常 被 忽视 的 
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Math 对 象 上 那些 执行 复杂 数学 运算 的 方法 。 这 些 方法 总 是 比 执行 相同 任务 的 JavaScript 函数 快 
得 多 ， 比 如 求 正 纺 、 余 弦 等 。 
口 switch 语句 很 快 。 如 果 代码 中 有 复杂 的 if-else 语句 ， 将 其 转换 成 switch 语句 可 以 变 得 更 
快 。 然 后 ， 通 过 重新 组 织 分 支 ， 把 最 可 能 的 放 前 面 ， 不 太 可 能 的 放 后 面 ， 可 以 进一步 提升 性 能 。 
口 位 操作 很 快 。 在 执行 数学 运算 操作 时 ， 位 操作 一 定 比 任何 布尔 值 或 数值 计算 更 快 。 选 择 性 地 将 
某 些 数学 操作 蔡 换 成 位 操作 ， 可 以 极 大 提升 复杂 计算 的 效率 。 像 求 模 、 逻 辑 AND 与 和 逻辑 OR 
或 都 很 适合 替代 成 位 操作 。 


28.2.3 ”语句 最 少 化 


JavaScript 代码 中 语句 的 数量 影响 操作 执行 的 速度 。 一 条 可 以 执行 多 个 操作 的 语句 ， 比 多 条 语句 中 
每 个 语句 执行 一 个 操作 要 快 。 那 么 优化 的 目标 就 是 寻找 可 以 合并 的 语句 ， 以 减少 整个 脚本 的 执行 时 间 。 
为 此 ， 可 以 参考 如 下 几 种 模式 。 

1. 多 个 变量 声明 

声明 多 个 变量 时 很 容易 出 现 多 条 语句 。 比 如 ， 下 面 使 用 多 个 let 声明 多 个 变量 的 情况 很 常见 : 

// 有 四 条 语句 : 浪费 

let count = 5; 

let color = "blue"; 

let values = [1,2,3]; 

let now = new Date(); 

在 强 类 型 语言 中 ， 不 同 数 据 类 型 的 变量 必须 在 不 同 的 语句 中 声明 。 但 在 JavaScript 中 ， 所 有 变量 都 
可 以 使 用 一 个 1et 语句 声明 。 前 面 的 代码 可 以 改写 为 如 下 : 

// 一 条 语 向 更 好 

let Count = 9; 

color = "blue", 

values = [1,2,3], 

now = new Date(); 

这 里 使 用 一 个 1et 声明 了 所 有 变量 , 变量 之 间 以 逗号 分 隔 。 这 种 优化 很 容易 做 到 ， 且 比 使 用 多 条 语 
句 执 行 速度 更 快 。 

2. 插入 迭代 性 值 

任何 时 候 只 要 使 用 迭代 性 值 ( 即 会 递增 或 递减 的 值 )， 都 要 尽 可 能 使 用 组 合 语句 。 来 看 下 面 的 代码 
片段 : 




















































































































let name = values[i]; 
工 ++， 


前 面 代码 中 的 两 条 语句 都 只 有 个 作用 : 第 一 条 从 values 中 取得 一 个 值 并 保存 到 name 中 ,第 二 
条 递增 变量 1。 把 渤 代 性 的 值 插入 第 一 条 语句 就 可 以 将 它们 合并 为 一 条 语句 : 

let name = values[i++]; 

这 一 条 语句 完成 了 前 面 两 条 语句 完成 的 事情 。 因 为 递增 操作 符 是 后 绥 形 式 的 ,所 以 ; 在 语句 其 他 部 分 
执行 完成 之 前 是 不 会 递增 的 。 只 要 遇 到 类 似 的 情况 ， 就 要 尽量 把 迭代 性 值 插入 到 上 一 条 使 用 它 的 语句 中 。 

3. 使 用 数组 和 对 象 字面 量 
本 书 代码 示例 中 有 两 种 使 用 数组 和 对 象 的 方式 ; 构造 函数 和 字面 量 。 使 用 构造 函数 始终 会 产生 比 单 28 
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纯 插 入 元 素 或 定义 属性 更 多 的 语句 ， 而 字面 量 只 需 一 条 语句 即 可 完成 全 部 操作 。 来 看 下 面 的 例子 : 
// 创建 和 初始 化 数组 用 了 四 条 语 揣 : 浪费 


let Values = new Array(); 











values[0] = 123; 
values[1] = 456; 
values[2] = 789; 


// 创建 和 初始 化 对 象 用 了 四 条 语句 : 浪费 

let person = new Object (); 

person.name = "Nicholas"; 

person.age = 29; 

person.sayName = function() { 

console.log(this.name); 

> 

在 这 个 例子 中 , 分 别 创建 和 初始 化 了 一 个 数组 和 一 个 对 象 。 两 件 事 都 用 了 四 条 语句 : 一 条 调用 构造 

函数 ， 三 条 添加 数据 。 这 些 语句 很 容易 转换 成 字面 量 形式 : 
// 一 条 语句 创建 并 初始 化 数组 
let values = [123, 456, 789]; 

















// 一 条 语 向 创建 并 初始 化 对 象 
let person = { 
name: "Nicholas", 
age: 29， 
SayName() { 
console.log(this.name); 
} 
上 
重 写 后 的 代码 只 有 两 条 语句 : 一 条 创建 并 初始 化 数组 ， 另 一 条 创建 并 初始 化 对 象 。 相 对 于 前 面 使 用 
了 8 条 语句 ， 这 里 使 用 两 条 语句 ， 减 少 了 75% 的 语句 量 。 对 于 数 千 行 的 JavaScript 代码 ， 这 样 的 优化 效 
果 可 能 更 明显 。 
应 尽 可 能 使 用 数组 或 对 象 字 面 量 ， 以 消除 不 必要 的 语句 。 






































注意 减少 代码 中 的 语句 量 是 很 不 错 的 目标 ， 但 不 是 绝对 的 法 则 。 一 味 追 求 语句 最 少 化 ， 


可 能 导致 一 条 语句 容纳 过 多 逻辑 ， 最 终 难 以 理解 。 





28.2.4 优化 DOM 交互 


在 所 有 JavaScript 代码 中 , 涉及 DOM 的 部 分 无 疑 是 非常 慢 的 .DOM 操作 和 交互 需要 占用 大 量 时 间 ， 
因为 经 常 需要 重新 泻 染 整个 或 部 分 页 面 。 此 外 ， 看 起 来 简单 的 操作 也 可 能 花费 很 长 时 间 ， 因 为 DOM 
携带 着 大 量 信息 。 理 解 如 何 优化 DOM 交互 可 以 极 大 地 提升 脚本 的 执行 速度 。 

1. 实时 更 新 最 小 化 
访问 DOM 时 ， 只 要 访问 的 部 分 是 显示 页 面 的 一 部 分 ， 就 是 在 执行 实时 更 新 操作 。 之 所 以 称 其 为 实 
时 更 新 ， 是 因为 涉及 立即 (实时 ) 更 新 页 面 的 显示 ， 让 用 户 看 到 。 每 次 这 样 的 更 新 ， 无论 是 搬入 一 个 字 
符 还 是 删除 页 面 上 的 一 节 内 容 ， 都 会 导致 性 能 损失 。 这 是 因为 浏览 器 需要 为 此 重新 计算 数 千 项 指标 ,之 
后 才能 执行 更 新 。 实 时 更 新 的 次 数 越 多 ， 执 行 代 码 所 需 的 时 间 也 越 长 。 反 之 ,实时 更 新 的 次 数 越 少 ,， 代 
码 执行 就 越 快 。 来 看 下 面 的 例子 : 
















































































let list = document .getElementById("myList"), 
item; 


for (let i = 0; i < 10; I++) { 
item = document .createElement ("1i"); 
list.appendChild(item); 
item.appendChild(document.createTextNode('Item S${i}'); 
} 


以 上 代码 向 列表 中 添加 了 10 项。 每 添加 1 项 ， 就 会 有 两 次 实时 更 新 : 一 次 添加 <1i> 元 素 ， 一 次 为 
它 添加 文本 节点 。 因 为 要 添加 10 项 ， 所 以 整个 操作 总 共 要 执行 20 次 实时 更 新 。 

为 解决 这 里 的 性 能 问题 ， 需 要 减少 实时 更 新 的 次 数 。 有 两 个 办 法 可 以 实现 这 一 点 。 第 一 个 办 法 是 从 
页 面 中 移 除 列表 ， 执 行 更 新 ， 然 后 再 把 列表 插 回 页 面 中 相同 的 位 置 。 这 个 办 法 并 不 可 取 ， 因 为 每 次 更 新 
时 页 面 都 会 内 烁 。 第 二 个 办 法 是 使 用 文档 片段 构建 DOM 结构 ， 然 后 一 次 性 将 它 添加 到 1ist 元 素 。 这 
个 办 法 可 以 减少 实时 更 新 ， 也 可 以 避免 页 面 内 烁 。 比 如 : 


let list = document .getElementById("myList"), 
fragment = document .createDocumentFragment (), 
item; 










































































for (let i = 0; i < 10; i++) { 
item = document.createElement ("1i"); 
fragment .appendChild(item); 
item.appendChild(document.createTextNode("Item " + i)); 


} 





list.appendChild(fragment); 

这 样 修改 之 后 ,完成 同样 的 操作 只 会 触发 一 次 实时 更 新 。 这 是 因为 更 新 是 在 添加 完 所 有 列表 项 之 后 
一 次 性 完成 的 。 文 档 片 段 在 这 里 作为 新 创建 项 目的 临时 占 位 符 。 最 后 ， 使 用 appenachila() 将 所 有 项 
目 都 添加 到 列表 中 。 别 忘 了 ， 在 把 文档 片段 传 给 appendchi1q() 时 ,会 把 片段 的 所 有 子 元 素 添加 到 父 
元 素 ， 片 段 本 身 不 会 被 添加 。 

只 要 是 必须 更 新 DOM， 就 尽量 考虑 使 用 文档 片段 来 预先 构建 DOM 结构 ， 然 后 再 把 构建 好 的 DOM 
结构 实时 更 新 到 文档 中 。 

2. 使 用 innerHTML 

在 页 面 中 创建 新 DOM 节点 的 方式 有 两 种 : 使 用 DOM 方法 如 createElement () 和 appenqchila() ， 
以 及 使 用 innerHTML。 对 于 少量 DOM 更 新 ， 这 两 种 技术 区 别 不 大 ， 但 对 于 大 量 DOM 更 新 ， 使 用 
innerHTML 要 比 使 用 标准 DOM 方法 创建 同样 的 结构 快 很 多 。 

在 给 innerHTML 赋值 时 , 后 台 会 创建 HTML 解析 器 , 然后 会 使 用 原生 DOM 调用 而 不 是 JavaScript 
的 DOM 方法 来 创建 DOM 结构 。 原 生 DOM 方法 速度 更 快 ， 因 为 该 方法 是 执行 编译 代码 而 非 解释 代码 。 
前 面 的 例子 如 果 使 用 innerHTML 重 写 就 是 这 样 的 : 


let list = document .getElementById("myList"), 
html = "" 


















































































































































for (let i = 0; i < 10; i++) { 
html += '<li>Item ${i}</1i>'; 
} 


list.innerHTML = html; 
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以 上 代码 构造 了 一 个 HTML 字符 串 ,然后 将 它 赋值 给 1ist .innerHTML, 结 果 也 会 创建 适当 的 DOM 
结构 。 虽 然 拼 接 字 符 串 也 会 有 一 些 性 能 损耗 ， 但 这 个 技术 仍然 比 执行 多 次 DOM 操作 速度 更 快 。 

与 其 他 DOM 操作 一 样 ， 使 用 innerHTML 的 关键 在 于 最 小 化 调用 次 数 。 例 如 ， 下 面 的 代码 使 用 
innerHTML 的 次 数 就 太 多 了 : 


let list = document .getElementById("myList"); 

















for (let i = 0; i < 10; i++) { 
list.innerHTML += '<li>Item ${i}</1li>'; // 不 要 
} 


这 里 的 问题 是 每 次 循环 都 会 调用 innerHTML， 因 此 效率 极 低 。 事实 上 , 调用 innerHTML 也 应 该 看 
成 是 一 次 实时 更 新 。 构 建 好 字符 串 然 后 调用 一 次 innerHTML 比 多 次 调用 innerHTML 快 得 多 。 
































注意 使 用 innerHTML 可 以 提升 性 能 , 但 也 会 暴露 巨大 的 XSS 攻击 面 。 无 论 何 时 使 用 它 


填充 不 受 控 的 数据 ， 都 有 可 能 被 攻击 者 注入 可 执行 代码 。 此 时 必须 要 当心 。 





3. 使 用 事件 委托 

大 多 数 Web 应 用 程序 会 大 量 使 用 事件 处 理 程序 实现 用 户 交 互 。 一 个 页 面 中 事件 处 理 程序 的 数量 与 
页 面 响应 用 户 交 互 的 速度 有 直接 关系 。 为 了 减少 对 页 面 响应 的 影响 ， 应 该 尽 可 能 使 用 事件 委托 。 

事件 委托 利用 了 事件 的 冒 泡 。 任何 冒 泡 的 事件 都 可 以 不 在 事件 目标 上 , 而 在 目标 的 任何 祖先 元 素 上 
处 理 。 基 于 这 个 认 知 ， 可 以 把 事件 处 理 程序 添加 到 负责 处 理 多 个 目标 的 高 层 元 素 上 。 只 要 可 能 ， 就 应 该 
在 文档 级 添加 事件 处 理 程序 ， 因 为 在 文档 级 可 以 处 理 整 个 页 面 的 事件 。 

4. 注意 HTMLCollection 

由 于 Web 应 用 程序 存在 很 大 的 性 能 问题 , HTMLCollection 对 象 的 缺点 本 书 前 面 已 多 次 提 到 过 了 。 
任何 时 候 ， 只 要 访问 HTMLCollection, 无 论 是 它 的 属性 还 是 方法 ,就 会 触发 查询 文档 ,而 这 个 查询 相 
当 耗 时 。 减 少 访问 HTMLCollection 的 次 数 可 以 极 大 地 提升 脚本 的 性 能 。 

可 能 优化 HTMLCollection 访问 最 关键 地 方 就 是 循环 了 。 之 前 ,我 们 讨论 过 要 把 计算 
HTMLCollection 长 度 的 代码 转移 到 for 循环 初始 化 的 部 分 。 来 看 下 面 的 例子 : 


let images = document .getElementsByTagName ("img"); 

























































































for (let i = 0, len = images.length; i < len; i++) { 
// 处 理 
} 


这 里 的 关键 是 把 length 保存 到 了 len 变量 中 ,而 不 是 每 次 都 读 一 次 HTMLCollection 的 length 
属性 。 在 循环 中 使 用 HTMLCollection 时 ,应 该 首先 取得 对 要 使 用 的 元 素 的 引用 ， 如 下 面 所 示 。 这 样 
才能 避免 在 循环 体内 多 次 调用 HTMLCollection: 


let images = document .getElementsByTagName ("img"), 
image; 





























for (let i = 0, len=images.length; i < len; i++) { 
image = images[i]; 
// 处 理 

} 


这 段 代码 增加 了 image 变量 ， 用 于 保存 当前 的 图 片 。 有 了 这 个 局 部 变量 ， 就 不 需要 在 循环 中 再 访 
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问 images HTMLCollection 了 。 
编写 JavaScript 代码 时 ， 关 键 是 要 记 住 ， 只 要 返回 HTMLCollection 对 象 ， 就 应 该 尽量 不 访问 它 。 
以 下 情形 会 返回 HTMLCollection: 
口 调用 getElementsByTagName () ; 
口 读 取 元 素 的 chilgNodes 属性 ; 
口 读 取 元 素 的 attributes 属性 ; 
口 访问 特殊 集合 ， 如 aocument .form、document . images 等 。 


理解 什么 时 候 会 碰 到 HrMLCollection 对 象 并 适当 地 使 用 它 ， 有 助 于 明显 地 提升 代码 执行 速度 。 










































































28.3 部署 


任何 JavaScript 解决 方案 最 重要 的 部 分 可 能 就 是 把 网 站 或 Web 应 用 程序 部 署 到 线 上 环境 了 。 在 此 之 
前 我 们 已 完成 了 很 多 工作 ， 包 括 架构 方面 和 优化 方面 的 。 现 在 到 了 把 代码 移出 开发 环境 ， 发 布 到 网 上 ， 
让 用 户 去 使 用 它 的 时 候 了 。 不 过 ， 在 发 布 之 前 ， 还 需要 解决 一 些 问 题 。 


28.3.1 构建 流程 


准备 发 布 JavaScript 代码 时 最 重要 一 环 是 准备 构建 流程 。 开 发 软件 的 典型 模式 是 编码 、 编 译 和 测试 。 
换 名 话说， 首先 要 写 代 码 ， 然 后 编译 ， 之 后 运行 并 确保 它 能 够 正常 工作 。 但 因为 JavaScript 不 是 编译 型 
语言 ， 所 以 这 个 流程 经 常会 变 成 编码 、 测 试 。 你 写 的 代码 跟 在 浏览 器 中 测试 的 代码 一 样 。 这 种 方式 的 问 
题 在 于 代码 并 不 是 最 优 的 。 你 写 的 代码 不 应 该 不 做 任何 处 理 就 直接 交 给 浏览 器 ， 原 因 如 下 。 
口 知识 产权 问题 : 如 果 把 满 是 注释 的 代码 放 到 网 上 ， 其 他 人 就 很 容易 了 解 你 在 做 什么 ， 
并 可 能 发 现 安全 漏洞 。 
口 文件 大 小 : 你 写 的 代码 可 读 性 很 好 ， 容 易 维护 ， 但 性 能 不 好 。 浏 览 器 不 会 因为 代码 中 多 余 的 空 
格 、 缩 进 、 宛 余 的 函数 和 变量 名 而 受益 。 
口 代码 组 织 : 为 保证 可 维护 性 而 组 织 的 代码 不 一 定 适合 直接 交付 给 浏览 器 。 
为 此 ， 需 要 为 JavaScript 文件 建立 构建 流程 。 
1. 文件 结构 
构建 流程 首先 定义 在 源 代 码 控制 中 存储 文件 的 逻辑 结构 。 最 好 不 要 在 一 个 文件 中 包含 所 有 
JavaScript 代码 。 相 反 ， 要 遵循 面向 对 象 编程 语言 的 典型 模式 ， 把 对 象 和 自 定义 类 型 保存 到 自己 独立 的 
文件 中 。 这 样 可 以 让 每 个 文件 只 包含 最 小 量 的 代码 ， 让 后 期 修改 更 方便 ， 也 不 易 引 入 错误 。 此 外 , 在 使 
用 并 发 源 代码 控制 系统 (如 Git、CVS 或 Subversion ) 的 环境 中 ， 这 样 可 以 减少 合并 时 发 生 冲 突 的 风险 。 
注意 ， 把 代码 分 散 到 多 个 文件 是 从 可 维护 性 而 不 是 部 署 角度 出 发 的 。 对 于 部 署 ， 应 该 把 所 有 源 文件 
合并 为 一 个 或 多 个 汇总 文件 Web 应 用 程序 使 用 的 JavaScript 文件 越 少 越 好 , 因为 HTTP 请 求 对 某 些 Web 
应 用 程序 而 言 是 主要 的 性 能 瓶颈 。 而 且 , 使 用 <script> 标 签 包含 JavaScript 是 阻塞 性 操作 ,， 这 导致 代码 
下 载 和 执行 期 间 停止 所 有 其 他 下 载 任 务 。 因 此 ， 要 尽量 以 符合 逻辑 的 方式 把 JavaScript 代码 组 织 到 部 署 
文件 中 。 
2. 任务 运行 器 
如 果 要 把 大 量 文件 组 合成 一 个 应 用 程序 , 很 可 能 需要 任务 运行 器 自动 完成 一 些 任务 。 任 务 运行 器 可 
以 完成 代码 检查 、 打 包 、 转 译 、 启 动 本 地 服务 器 、 部 署 ， 以 及 其 他 可 以 脚本 化 的 任务 。 28 
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用 它 ， 




















"| 
































































































































862 第 28 章 最 佳 实践 








很 多 时 候 , 任务 运行 器 要 通过 命令 行 界面 来 执行 操作 。 因 此 你 的 任务 运行 器 可 能 仅仅 是 一 个 辅助 组 
织 和 排序 复杂 命令 行 调用 的 工具 。 从 这 个 意义 上 说 ,任务 运行 器 在 很 多 方面 非常 像 .bashrc 文件 。 其 他 情 
况 下 ， 要 在 自动 化 任务 中 使 用 的 工具 可 能 是 一 个 兼容 的 插件 。 

如 果 你 使 用 Nodejs 和 npm 打印 JavaScript 资源 ，Grunt 和 Gulp 是 两 个 主流 的 任务 运行 器 。 它 们 非常 
稳健 ， 其 任务 和 指令 都 是 通过 配置 文件 ， 以 纯 JavaScript 形式 指定 的 。 使 用 Grunt 和 Gulp 的 好 处 是 它们 
分 别 有 各 自 的 插件 生态 , 因此 可 以 直接 使 用 npm 包 。 关于 这 两 个 工具 插件 的 详细 信息 可 以 参考 本 书 附录 。 

3. 摇 树 优化 
摇 树 优化 〈tree shaking ) 是 非常 常见 上 且 极 为 有 效 的 减少 元 余 代码 的 策略 。 正 如 第 26 章 介绍 模块 时 
所 提 到 的 ， 使 用 静态 模块 声明 风格 意味 着 构建 工具 可 以 确定 代码 各 部 分 之 间 的 依赖 关系 。 更 重要 的 是 ， 
摇 树 优化 还 能 确定 代码 中 的 哪些 内 容 是 完全 不 需要 的 。 

实现 了 摇 树 优化 策略 的 构建 工具 能 够 分 析出 选择 性 导入 的 代码 , 其 余 模块 文件 中 的 代码 可 以 在 最 终 
打包 得 到 的 文件 中 完全 省 略 。 假 设 下 面 是 个 示例 应 用 程序 : 


import { foo } from './utils.js'; 
































































































































































































































console.log(foo); 
export const foo = 'foo'; 
export const bar = 'bar'; // unused 


这 里 导出 的 bar 就 没有 被 用 上 ,而 构建 工具 可 以 很 容易 发 现 这 种 情况 。 在 执行 摇 树 优化 时 , 构建 工 
具 会 将 bar 导出 完全 排除 在 打包 文件 之 外 。 静态 分 析 也 意味 着 构建 工具 可 以 确定 未 使 用 的 依赖 , 同样 也 
会 排除 掉 。 通 过 摇 树 优化 ， 最 终 打 包 得 到 的 文件 可 以 瘦身 很 多 。 

4. 模块 打包 器 

以 模块 形式 编写 代码 ， 并 不 意味 着 必须 以 模块 形式 交付 代码 。 通 常 ， 由 大 量 模块 组 成 的 JavaScript 
代码 在 构建 时 需要 打包 到 一 起 ， 然 后 只 交付 一 个 或 少数 几 个 JavaScript 文 件 。 

模块 打包 器 的 工作 是 识别 应 用 程序 中 涉及 的 JavaScript 依赖 关系 ， 将 它们 组 合成 一 个 大 文件 ， 完 成 
对 模块 的 串 行 组 织 和 拼接 ， 然 后 生成 最 终 提供 给 浏览 器 的 输出 文件 。 

能 够 实现 模块 打包 的 工具 非常 多 。Webpack、Rollupt 和 Browserify 只 是 其 中 的 几 个 ， 可 以 将 基于 模 
块 的 代码 转换 为 普遍 兼容 的 网 页 脚本 。 
































































































































28.3.2 ”验证 


即使 已 出 现 了 能 够 理解 和 支持 JavaScript 的 IDE， 大 多 数 开发 者 仍 通过 在 浏览 器 中 运行 代码 来 验证 
自己 的 语法 。 这 种 方式 有 很 多 问题 。 首 先 ， 如 此 验证 不 容易 自动 化 ， 也 不 方便 从 一 个 系统 移植 到 男 一 个 
系统 。 其 次 , 除了 语法 错误 ， 只 有 运行 的 代码 才 可 能 报错 ,没有 运行 到 的 代码 则 无 法 验证 。 有 一 些 工具 
可 以 帮 我 们 发 现 JavaScript 代码 中 潜在 的 问题 ， 最 流行 的 是 Douglas Crockford 的 JSLint 和 ESLint。 

这 些 代码 检查 工具 可 以 发 现 JavaScript 代码 中 的 语法 错误 和 和 常见 的 编码 错误 。 下 面 是 它们 会 报告 的 
一 些 问 题 : 
口 使 用 sval () ; 
口 使 用 未 声明 的 变量 ; 
口 遗漏 了 分 号 ; 
口 不 适当 地 换行 ; 
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口 不 正确 地 使 用 逗号 ; 
口 遗漏 了 包含 语句 的 括号 ; 
口 遗漏 了 switcnh 分 支 中 的 preak; 
口 重复 声明 变量 ; 
口 使 用 了 with 
口 错误 地 使 用 等 号 ( 应 该 是 两 个 或 三 个 等 号 ); 
口 执行 不 到 的 代码 。 
在 开发 过 程 中 添加 代码 检查 工具 有 助 于 避免 出 错 。 推 荐 开发 者 在 构建 流程 中 也 加 入 代码 检查 环节 ， 
以 便 在 潜在 问题 成 为 错误 之 前 识别 它们 。 
































注意 附录 了 D 介 绍 了 一 些 JavaScript 代码 验证 器 。 





28.3.3 ”压缩 


谈 到 JavaScript 文件 压缩 ， 实 际 上 主要 是 两 件 事 : 代码 大 小 (code size ) 和 传输 负载 (wire weight )。 
代码 大 小 指 的 是 浏览 器 需要 解析 的 字 节 数 ， 而 传输 负载 是 服务 器 实际 发 送 给 浏览 器 的 字 节 数 。 在 Web 
开发 的 早期 阶段 ,这 两 个 数值 几乎 相等 ， 服 务 器 发 送 给 浏览 器 的 是 未 经 修改 的 源 文件 。 而 今天 ， 这 两 个 
数值 不 可 能 相等 ， 实 际 上 也 不 应 该 相等 。 

1. 代码 压缩 

JavaScript 不 是 编译 成 字 节 码 ， 而 是 作为 源 代 码 传输 的 ， 所 以 源 代 码 文件 通常 包含 对 浏览 器 的 
JavaScript 解释 器 没有 用 的 额外 信息 和 格式 。JavaScript 压缩 工具 可 以 把 源 代码 文件 中 的 这 些 信息 删除 ， 
并 在 保证 程序 逻辑 不 变 的 前 提 下 缩小 文件 大 小 。 

注释 、 额 外 的 空格 、 长 变量 或 函数 名 都 能 提升 开发 者 的 可 读 性 , 但 对 浏览 器 而 言 这 些 都 是 多 余 的 字 
节 。 压 缩 工具 可 以 通过 如 下 操作 减少 代码 大 小 : 

口 删除 空格 〈 包 括 换行 ); 
口 删除 注释 ; 
口 缩短 变量 名 、 函 数 名 和 其 他 标识 符 。 

所 有 JavaScript 文件 都 应 该 在 部 署 到 线 上 环境 前 进行 压缩 。 在 构建 流程 中 加 入 这 个 环节 压缩 
JavaScript 文件 是 很 容易 的 。 







































































注意 在 Web 开发 的 上 下 文中 “压缩 (compression ) 经 常 意味 着 “最 小 化 ”( minification )。 
虽然 这 两 个 术语 可 以 互 换 使 用 ， 但 实际 上 它们 的 含义 并 不 相同 。 


最 小 化 是 指 把 文件 大 小 减少 到 比 原始 大 小 还 要 小 ， 但 结果 文件 包含 的 仍 是 语法 正确 的 代 
码 。 通 常 ， 最 小 化 只 适合 JavaScript 等 解释 型 语言 ， 编 译 为 二 进 制 的 语言 自然 会 被 编译 器 


最 小 化 。 

压缩 与 最 小 化 的 区 别 在 于 前 者 得 到 的 文件 不 再 包 
过 解压 缩 才能 恢复 为 代码 可 读 的 格式 。 压 缩 通常 
用 考虑 保留 语法 结构 ， 因 此 自由 度 更 高 。 


含 语法 正确 的 代码 。 压缩 后 的 文件 必须 通 
能 得 到 比 最 小 化 更 小 的 文件 ， 压缩 算 法 不 
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2. JavaScript 编译 


类 似 于 最 小 化 ， 














A 


JavaScript 代码 编译 通常 指 的 是 把 源 代码 转换 为 一 种 逻辑 相同 但 字 节 更 少 的 形式 。 





与 最 小 化 的 不 同 之 处 在 于 ， 编 译 后 代码 的 结构 可 能 不 同 ,但 仍然 具备 与 原始 代码 相同 的 行为 。 编 译 需 通 
过 输入 全 部 JavaScript 代 码 可 以 对 程序 流 执行 稳健 的 分 析 。 





侍 














口 将 某 些 代码 和 


译 可 能 会 执行 如 下 操作 : 
口 删除 未 使 用 的 代码 ; 





























专 换 为 更 简洁 的 语法 ; 























口 全 局 函数 调 


j、 常 量 和 变量 行内 化 。 











3. JavaScript 转译 
我 们 提交 到 项 目 仓库 中 的 代码 与 浏览 器 中 运行 的 代码 不 一 样 。ES6、ES7 和 ES8 都 为 ECMAScript 
规范 扩充 增加 了 更 好 用 的 特性 ， 但 不 同 浏览 器 支持 这 些 规范 的 步调 并 不 一 致 。 




















通过 JavaScript 








转译 ， 可 以 在 开发 时 使 用 最 新 的 语法 特性 而 不 用 担心 浏览 器 的 兼容 性 问题 。 转 译 可 








以 将 现代 的 代码 转换 成 更 早 的 ECMAScript 版 本 ,通常 是 ES3 或 ES5， 具体 取决 于 你 的 需求 。 这 样 可 以 


确保 代码 能 够 跨 浏 览 器 兼容 。 本 书 附录 将 介绍 一 些 转译 工具 。 





























注意 “转译 ”( transpilation ) 和 “编译 ”( compilation ) 经 常 被 人 当成 同一 个 术语 混用 。 
编译 是 将 源 代码 从 一 种 语言 转换 为 另 一 种 语言 。 转 译 在 本 质 上 跟 编 译 是 一 样 的 ， 只 是 目标 


语言 与 源 语 言 是 一 种 语言 的 不 同 级 别 的 抽象 。 因 此 ,把 ES6/ES7/ES8 代码 转换 为 ES3/ES5 
代码 从 技术 角度 看 既是 编译 也 是 转译 ， 只 是 转译 更 为 确切 一 些 。 





4. HTTP 压缩 





传输 负载 是 从 服务 器 发 送 给 浏览 器 的 实际 字 节 数 。 这 个 字 节 数 不 一 定 与 代码 大 小 相同 ， 因 为 服务 器 
和 浏览 絮 都 具有 压缩 能 力 。 所 有 当前 主流 的 浏览 器 (IE/Edge、Firefox 、Safari 、Chrome 和 Opera ) 都 支 
持 客 户 端 解压 缩 收 到 的 资源 。 服 务 器 则 可 以 根据 浏览 器 通过 请 求 头 部 ( Accept-Encoding ) 标明 自己 支持 
的 格式 ， 选 择 一 种 用 来 压缩 JavaScript 文件 。 在 传输 压缩 后 的 文件 时 ， 服 务 器 响应 的 头 部 会 有 字段 








(Content-Encoding ) 





标明 使 用 了 哪 种 压缩 格式 。 浏 览 器 看 到 这 个 头 部 字段 后 ， 就 会 根据 这 个 压缩 格式 进 

















行 解压 缩 。 结 果 是 通过 网 络 传输 的 字 节 数 明显 小 于 原始 代码 大 小 。 


























例如 ， 使 用 Apache 服务 器 上 的 两 个 模块 (mogd_gzip 和 mod_deflate ) 可 以 减少 原始 JavaScript 








文件 的 约 70%。 这 入 


展 大 程度 上 是 因为 JavaScript 的 代码 是 纯 文 件 ， 所 以 压缩 率 非常 高 。 减 少 通过 网 络 传 











输 的 数据 量 意味 着 浏览 吉 能 更 快 收 到 数据 。 注 意 ， 服 务 器 压缩 和 浏览 器 解压 缩 都 需要 时 间 。 不 过 相 比 于 

















通过 传人 更 少 的 字 节 数 而 节省 的 时 间 ， 整 体 时 间 应 该 是 减少 的 。 


注意 大 多 数 Web 服务 器 (包括 开源 的 和 商业 的 ) 具备 HTTP 压缩 能 力 。 关 于 如 何 正确 地 


配置 压缩 ， 请 参考 相关 服务 器 的 文档 。 





28.4 小 结 


随 着 JavaScript 








开发 日 益 成 熟 ， 最 佳 实 践 不 断 涌 现 。 曾 经 的 业余 爱好 如 今 也 成 为 了 正式 的 职业 。 

















此 ， 前 端 开 发 也 需要 像 其 他 编程 语言 一 样 ， 注 重 可 维护 性 、 性 能 优化 和 部 署 。 
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为 保证 JavaScript 代码 的 可 维护 性 ， 可 以 参考 如 下 编码 惯例 。 

口 其 他 语言 的 编码 惯例 可 以 作为 添加 注释 和 确定 缩 进 的 参考 , 但 JavaScript 作为 一 门 适合 松散 类 型 
的 语言 也 有 自己 的 一 些 特殊 要 求 。 

口 由 于 JavaScript 必须 与 HTML 和 CSS 共存 ， 因 此 各 司 其 职 尤为 重要 : JavaScript 负责 定义 行为 ， 
HTML 负责 定义 内 容 ， 而 CSS 负责 定义 外 观 。 
口 如 果 三 者 职责 混淆 ， 则 可 能 导致 难以 调试 的 错误 和 可 维护 性 问题 。 

随 着 Web 应 用 程序 中 JavaScript 代码 量 的 激增 ， 性 能 也 越 来 越 重要 。 因 此 应 该 牢记 如 下 这 些 事项 。 
口 执行 JavaScript 所 需 的 时 间 直 接 影响 网 页 性 能 ， 其 重要 性 不 容 忽 视 。 
口 很 多 适合 C 语言 的 性 能 优化 策略 同样 也 适合 JavaScript， 包 括 循环 展开 和 使 用 switch 语句 而 不 
是 if 语句 。 

口 男 一 个 需要 重视 的 方面 是 DOM 交互 很 费时 间 ， 因 此 应 该 尽 可 能 限制 DOM 操作 的 数量 。 

开发 Web 应 用 程序 的 最 后 一 步 是 上 线 部 署 。 以 下 是 本 章 讨 论 的 相关 要 点 。 

口 为 辅助 部 署 ， 应 该 建立 构建 流程 ， 将 JavaScript 文 件 合 并 为 较 少 的 (最 好 是 只 有 一 个 ) 文件 。 

口 构建 流程 可 以 实现 很 多 源 代码 处 理 任务 的 自动 化 。 例 如 ， 可 以 运行 JavaScript 验证 程序 ， 确保 没 
有 语法 错误 和 潜在 的 问题 。 

口 压缩 可 以 让 文件 在 部 署 之 前 变 得 尽量 小 。 

口 启用 HTTP 压缩 可 以 让 网 络 传输 的 JavaScript 文件 尽 可 能 小 ， 从 而 提升 页 面 的 整体 性 能 。 





























































































































图 灵 社 区 会 员 aSINKz(1561821892@qq.com) 专 享 尊重 版 权 


中 录 人 
ES2018 和 ES2019 


从 ECMAScript 2015 开始 , TC39 委员 会 改 为 每 年 发 布 一 版 新 ECMAScript 规范。 这 样 各 个 提案 可 以 
独立 发 展 , 每 年 所 有 达到 成 熟 阶段 的 提案 会 被 打包 发 布 到 新 一 版 标准 中 。 不 过 , 打包 多 少 特 性 并 不 重要 ， 
主要 取决 于 浏览 器 厂商 实现 的 情况 。 一 旦 提案 进入 第 4 阶段 (stage 4 ), 其 内 容 就 不 会 更 改 ， 并 通常 会 包 
含 在 下 一 版 ECMAScript 规范 中 ， 浏 览 器 就 会 着 手 根据 自己 的 计划 实现 提案 的 特性 。 

ECMAScript 2018 于 2018 年 1 月 完成 ， 主 要 增加 了 蜡 步 欠 代 、 剩 余 和 扩展 操作 符 、 正 则 表达 式 和 期 
约 等 方面 的 特性 。 可 以 通过 TC39 委员 会 的 GitHub 仓库 了 解 规范 的 最 新 动态 。 
















































































注意 ”本 附录 中 介绍 的 特性 相对 较 新 , 往往 只 有 新 近 版 本 的 浏览 器 才 支 持 。 使 用 这 些 特性 


之 前 ， 请 参考 Can TUse 网 站 确定 支持 相应 特性 的 浏览 器 及 其 版 本 。 





A.1 异步 迭代 


在 ECMAScript 最 近 发 布 的 几 个 版 本 中 ， 异 步 执行 和 迭代 器 协议 是 两 个 极其 热门 的 主题 。 异 步 执行 

有 于 释放 对 执行 线程 的 控制 以 执行 慢 操 作 和 收回 控制 ， 而 迭代 器 协议 则 涉及 为 任意 对 象 定义 规范 顺序 。 
异步 扩 代 只 是 这 两 个 概念 在 逻辑 上 的 统一 。 

同步 迭代 器 在 每 次 调用 next () 时 都 会 返回 { value，done } 对 象 。 当 然 ， 这 要 求 确定 这 个 对 象 内 
容 的 计算 和 资源 获取 在 next () 调用 退出 时 必须 完成 ， 否 则 这 些 值 就 无 法 确定 。 在 使 用 同步 近代 器 迭代 
异步 确定 的 值 时 ， 主 执行 线程 会 被 阻塞 ， 以 等 待 异 步 操 作 完 成 。 

有 了 异步 迭代 器 , 这 个 问题 就 迎刃而解 了 。 异步 近代 器 在 每 次 调用 next ( ) 时 会 提供 解决 为 { value， 
done } 对 象 的 期 约 。 这 样 ， 执 行 线程 可 以 释放 并 在 当前 这 步 循 环 完成 之 前 执行 其 他 任务 。 


A.1.1 创建 并 使 用 异步 迭代 器 


要 理解 异步 迭代 器 ， 最 简单 的 办 法 是 用 它 跟 同步 迭代 器 进行 比较 。 下 面 代码 中 创建 了 一 个 简单 的 
Emitter 类 ,该 类 包含 一 个 同步 生成 器 函数 ， 该 函数 会 产生 一 个 同步 迭代 器 ， 同 步 迭 代 带 输出 0~4: 


class Emitter { 
constructor (max) { 
this.max = max; 
this.syncIdx = 0; 
; 




















~ 

































































HH 














*[Symbol.iterator] () { 
while(this.syncIdx < this.max) { 
yield this.syncIdx++; 
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} 
} 
} 


const emitter = new Emitter(5); 


function syncCount() { 
const syncCounter = emitter[Symbol.iterator] (); 


for (const x of syncCounter) { 
console.1log (x);} 
} 
} 


syncCount (); 
// 0 

/ 
7 
// 
// 


这 个 例子 之 所 以 可 以 运行 起 来 , 主要 是 因为 近代 器 可 以 立即 产生 下 一 个 值 。 假如 你 不 想 在 确定 下 一 
个 产生 的 值 时 阻塞 主线 程 执行 ， 也 可 以 定义 异步 迭代 器 函数 ， 让 它 产 生 期 约 包 装 的 值 。 

为 此 ,要 使 用 欠 代 器 和 生成 器 的 异步 版 本 -ECMAScript 2018 为 此 定义 了 symbol .asyncIterator， 
以 便 定 义 和 调 用 输出 期 约 的 生成 器 函数 。 同 时 , 这 一 版 规范 还 为 异步 迭代 器 增加 了 for-await-of 循环 ， 
用 于 使 用 异步 迭代 器。 

相应 地 ， 前 面 的 例子 可 以 扩展 为 同时 支持 同步 和 异步 迭代 : 


class Emitter { 
constructor (max) { 
this.max = max; 
this,syncIidx = 0; 
this.asyncIdx = 0; 
} 


ODOP 









































*[Symbol.iterator] () { 
while(this.syncIdx < this.max) { 
yield this.syncIdx++; 
} 
} 


async *[Symbol.asyncIterator]() { 

// *[Symbol.asyncIterator]() { 
while(this.asyncIdx < this.max) { 

// yield new Promise((resolve) => resolve(this.asyncIdx++)); 

Yield this.asyncIdx++ 
} 

} 

} 


const emitter = new Emitter(5); 


function syncCount() { 
const syncCounter = emitter[Symbol.iterator] (); 


for (const x of syncCounter) { 
console.1log (x);} 
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} 
} 


async function asyncCount() { 
const asyncCounter = emitter[Symbol.asyncIterator] (); 


for await(const x of asyncCounter) { 
console.log (x); 
} 
} 


syncCount (); 
太公 


ey 
ke, 
大 ODP 


// 0 


1 
// 2 
3 
4 


为 了 加 深 理解 ， 可 以 把 前 面 例子 中 的 同步 生成 右 传 给 for-await-of 循环 : 


const emitter = new Emitter(5); 





async function asyncIteratorSyncCount() { 
const syncCounter = emitter[Symbol.iterator] (); 


for await (const x of syncCounter) { 
console.1log (x); 
} 
} 


asyncIteratorSyncCount ( ) ; 
// 0 


SS 
Wm 
大 ODP 


虽然 这 里 迭代 的 是 同步 生成 器 产生 的 原始 值 ， 但 for-await-of 循环 仍 像 它 们 被 包装 在 期 约 中 





样 处 理 它们 。 这 说 明 for-await-of 循环 可 以 流畅 地 处 理 同步 和 异步 可 迭代 对 象 。 但 
就 不 能 处 理 异 步 迭代 器 了 : 


function syncIteratorAsyncCount() { 
const asyncCounter = emitter[Symbol.asyncIterator] (); 


for (const x of asyncCounter) { 
console.1log (x); 
} 
} 


syncIteratorAsyncCount ( ) ; 
// TypeError: asyncCounter is not iterable 


是 























常规 





For 循环 
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关于 异步 迭代 器 ,要 理解 的 非常 重要 的 一 个 概念 是 symbol .asyncIterator 符号 不 会 改变 生成 器 
函数 的 行为 或 者 消费 生成 器 的 方式 。 注 意 在 前 面 的 例子 中 ， 生 成 右 函 数 加 上 了 async 修饰 符 成 为 异步 
函数 ， 又 加 上 了 星 号 成 为 生成 胡 函 数 。sSymbol.asyncIterator 在 这 里 只 起 一 个 提示 的 作用 ， 告 诉 将 
肖 费 这 个 迭 代 器 的 外 部 结构 如 for-await-of 循环 ， 这 个 欠 代 需 会 返回 期 约 对 象 的 序列 。 






































来 
A.1.2 “理解 异步 迭代 器 队列 


当然 ， 前 面 的 例子 是 假想 的 ， 因 为 迭代 器 返回 的 期 约 都 会 立即 解决 ,所 以 跟 同步 欠 代 器 的 区 别 很 难 
看 出 来 。 想 象 一 下 迭代 咒 返 回 的 期 约会 在 不 确定 的 时 间 解 决 ， 而 且 它 们 返回 的 顺序 是 乱 的 。 异步 迭代 带 
应 该 尽 可 能 模拟 同步 迭代 器 ,包括 每 次 迭代 时 代码 的 按 顺 序 执行 。 为 此 ,异步 迭代 器 会 维护 一 个 回调 队 
列 ， 以 保证 早期 值 的 迭代 器 处 理 程序 总 是 会 在 处 理 晚 期 值 之 前 完成 ， 即 使 后 面 的 值 时 于 之 前 的 值 解决 。 

为 验证 这 一 点 , 下面 的 例子 中 的 异步 迭代 融 以 随机 时 长 返回 期 约 。 异步 迭代 队列 可 以 保证 期 约 解 决 
的 顺序 不 会 干扰 和 迭代 顺序 。 结 果 应 该 按 顺 序 打印 一 组 整数 〈 但 间隔 时 间 随 机 ): 


class Emitter { 
constructor (max) { 
this.max = max; 
tHe eyerdx ei03 
this.asyncIdx = 0; 
} 





二 < 











































































































* [Symbol .iterator]l() { 
while(this.syncIdqx < this.max) { 
yield this.syncIQx++， 
} 
} 
async *[Symbol.asyncIterator]() { 
while(this.asyncIdx < this.max) { 
Yield new Promise((resolve) => { 
setTimeout(() => { 
resolve(this.asyncIdx++); 
}, Math.floor(Math.random() * 1000)); 
}); 
} 
} 
} 


const emitter = new Emitter(5); 


function syncCount() { 
const syncCounter = emitter[Symbol.iterator] (); 


for (const XX Of nyncCounter) 长 
console.1log (x); 
} 
} 


async function asyncCount() { 
const asyncCounter = emitter[Symbol.asyncIterator] (); 


for await (const x of asyncCounter) { 
console.1log (x);} 


} 
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} 


syncCount ( ) ; 


7 


0 


大 ODP 


asyncCount ( ) ; 
// 0 
人 和 1 
PA 
3 
// 4 


A.1.3 ”人 处理 异步 迭代 器 的 reject () 


因为 异步 迭代 咒 使 用 期 约 来 包装 返回 值 ， 所 以 必须 考虑 某 个 期 约 被 拒绝 的 情况 。 
顺序 完成 ， 而 在 循环 中 跳 过 被 























class Emitter { 
constructor (max) { 


} 


} 


this.max = max; 
this.asyncIidx. = 0; 


async *[Symbol.asyncIterator]() { 


} 


while (this.asyncIdx < this.max) 
if (this.asyncIdx < 3) { 
Yield this.asyncIdx++; 
} else { 
throw 'Exited loop'; 
} 
| 


const emitter = new Emitter(5); 


async function asyncCount() { 
const asyncCounter = emitter[Symbol.asyncIterator] (); 


} 


for await (const x of asyncCounter) 


k 


console.1log (x); 


asyncCount ( ) ; 


// 0 
// 1 


// 2 
// Uncaught (in promise) Exited loop 


{ 


E 绝 的 期 间 是 不 合理 的 。 


{ 



































由 于 异步 迭代 会 按 





因此 ， 被 拒绝 的 期 约会 强制 退出 迭代 器 : 
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A.1.4 使 用 next () 手动 异步 迭代 


for-await-of 循环 提供 了 两 个 有 用 的 特性 : 一 是 利用 异步 欠 代 器 队列 保证 按 顺 序 执行 ,二 是 隐藏 
异步 迭代 器 的 期 约 。 不 过 ， 使 用 这 个 循环 会 隐藏 很 多 底层 行为 。 

因为 异步 迁 代 顺 仍 遵守 迭代 器 协议 ， 所 以 可 以 使 用 next () 逐个 遍历 异步 可 迭代 对 象 。 如 前 所 述 ， 
next () 返 回 的 值 会 包含 一 个 期 约 ， 该 期 约 可 解决 为 { value，gdone } 这 样 的 迭代 结果 。 这 意味 着 必须 
使 用 期 约 API 获取 方法 ,同时 也 意味 着 可 以 不 使 用 异步 迭代 器 队列 。 


const emitter = new Emitter(5); 







































































const asyncCounter = emitter[Symbol.asyncIterator] (); 


console.log(asyncCounter.next ()); 
// Promise<{value, done}> 


A.1.5 ”顶级 异步 循环 


一 般 来 说 ,包括 for-await-of 循环 在 内 的 异步 行为 不 能 出 现在 异步 函数 外 部 。 不 过 ， 有 时 候 可 
能 确实 需要 在 这 样 的 上 下 文 使 用 异步 行为 。 为 此 可 以 通过 创建 异步 IFE 来 达到 目的 : 


class Emitter { 
constructor (max) { 
this.max = max; 
this.asyncIdx = 0; 
} 





async *[Symbol.asyncIterator]() { 
while(this.asyncIdx < this.max) { 
yield new Promise((resolve) => resolve(this.asyncIdx++)); 
} 
} 
} 


const emitter = new Emitter(5); 


(async function() { 
const asyncCounter = emitter[Symbol.asyncIterator] (); 


for await (const x of asyncCounter) { 
console.1log (x);} 

} 
}) (); 
Wd 
// 
ZY 
// 
A 


心 WwW N 上 吕 


A.1.6 ”实现 可 观察 对 象 


异步 迭代 器 可 以 耐心 等 入 千 下 一 次 先 代 而 不 会 导致 计算 成 本 ， 那么 这 也 为 实现 可 观察 对 象 ( Observable ) 
接口 提供 了 可 能 。 总 体 上 看 ， 这 涉及 捕获 事件 ， 将 它们 封装 在 期 约 中 ， 然 后 把 这 些 事件 提供 给 迭代 絮 ， 
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而 处 理 程序 可 以 利用 这 些 异步 迭代 器 。 在 某 个 事件 触发 时 ， 异 步 迭代 器 的 下 一 个 期 约会 解决 为 该 事件 。 


注意 可 观察 对 象 的 话题 超出 了 本 书 范围 ， 因 为 它们 很 大 程度 上 是 作为 第 三 方 库 实现 的 。 


有 兴趣 的 读者 可 以 了 解 一 下 非常 流行 的 RxJS 库 。 





下 面 这 个 简单 的 例子 会 捕获 浏览 器 事件 的 可 观察 流 。 这 需要 一 个 期 约 的 队列 ， 每 个 期 约 对 应 一 个 事 





件 。 该 队列 也 会 保持 事件 生成 的 顺序 ， 对 这 种 问题 来 说 保持 顺序 也 是 合理 的 。 


class Observable { 
constructor() { 
this.promiseQueue = []; 








// 保存 用 于 解决 队列 中 下 一 个 期 约 的 程序 


this.resolve = null; 


// 把 最 初 的 期 约 推 到 队列 
// 该 期 约会 解决 为 第 一 个 观察 到 的 事件 
this.enqueue(); 


} 


// 创建 新 期 约 ， 保存 其 解决 方法 
// 再 把 它 保 存 到 队列 中 
enqueue() { 
this.promiseQueue.push( 
new Promise( (resolve) => this.resolve = resolve)); 


} 


// 从 队列 前 痛 移 除 期 约 
// 并 返回 它 
dequeue() { 
return this.promiseQueue.shift(); 
} 
} 











要 利用 这 个 期 约 队列 , 可 以 在 这 个 类 上 定义 一 个 异步 生成 器 方法 。 该 生成 器 可 用 于 任何 类 型 的 事件 : 





class Observable { 
constructor() { 
this.promiseQueue = []; 


// 保存 用 于 解决 队列 中 下 一 个 期 约 的 程序 


this.resolve = null; 


// 把 最 初 的 期 约 推 到 队列 
// 该 期 约会 解决 为 第 一 个 观察 到 的 事件 
this.enqueue(); 


} 


// 创建 新 期 约 ， 保存 其 解决 方法 
// 再 把 它 保存 到 队列 中 
enqueue() { 
this.promiseQueue.push( 
new Promise( (resolve) => this.resolve = resolve)); 


} 


// 从 队列 前 端 移 除 期 约 
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// 并 返回 它 
dequeue() { 
return this.promiseQueue.shift(); 


} 


async *fromEvent (element, eventType) { 
// 在 有 事件 生成 时 ， 用 事件 对 象 来 解决 队列 头 部 的 期 约 
// 同时 把 另 一 个 期 约 加 入 队列 
element .addEventListener(eventType, (event) => { 
this.resolve(event); 
this.enqueue(); 
}); 


// 每 次 解决 队列 前 面 的 期 约 
// 都 会 向 异步 迭代 器 返回 相应 的 事件 对 象 
while (1) { 
Yield await this.dequeue(); 
} 
} 
} 


这 样 ， 这 个 类 就 定义 完了 。 接 下 来 在 DOM 元 素 上 定义 可 观察 对 象 就 很 简单 了 。 假 设 页 面 上 有 一 个 
<button> 元 素 ， 可 以 像 下 面 这 样 捕获 该 按钮 上 的 一 系列 click 事件 ， 然 后 在 控制 台 把 它们 打印 出 来 : 


class Observable { 
constructor() { 
this.promiseQueue = []; 

















// 保存 用 于 解决 队列 中 下 一 个 期 约 的 程序 


this.resolve = null; 


// 把 最 初 的 期 约 推 到 队列 
// 该 期 约会 解决 为 第 一 个 观察 到 的 事件 
this.enqueue(); 


} 


// 创建 新 期 约 ， 保 存 其 解决 方法 
// 再 把 它 保 存 到 队列 中 


enqueue() { 
this.promiseoueue.pPush 
new Promise( (resolve) => this.resolve = resolve)); 


} 


// 从 队列 前 端 移 除 期 约 
// 并 返回 它 
dequeue() { 
return this.promiseQueue.shift(); 


} 


async *fromEvent (element, eventType) { 
// 在 有 事件 生成 时 ， 用 事件 对 象 来 解决 队列 头 部 的 期 约 
// 同时 把 另 一 个 期 约 加 入 队列 
element .addEventListener(eventType, (event) => { 
this.resolve (event); 
this.enqueue(); 
})3 


// 每 次 解决 队列 前 面 的 期 约 
// 都 会 向 异步 迭代 器 返回 相应 的 事件 对 象 
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while (1) { 
yield await this.dequeue(); 
} 
} 
} 


(async function() { 
const observable = new Observable(); 


const button = document .querySelector('button'); 
const mouseClickIterator = observable.fromEvent (button, 'click'); 


for await (const clickEvent of mouseClickIterator) { 
console.log(clickEvent); 


} 
}) (); 


A.2 对象 子 面 量 的 剩余 操作 符 和 扩展 操作 符 


ECMAScript 2018 将 数组 中 的 剩余 操作 符 和 扩展 操作 符 也 移植 到 了 对 象 字面 量 。 这 极 大 地 方便 了 对 
象 合并 和 通过 其 他 对 象 创建 新 对 象 。 


A.2.1 剩余 操作 符 
剩余 操作 符 可 以 在 解构 对 象 时 将 所 有 剩 下 未 指定 的 可 枚 举 属性 收集 到 一 个 对 象 中 。 比 如 ; 


const person = { name: 'Matt', age: 27, job: 'Engineer' }; 
const { name, ...remainingData } = person; 














console.log(name); // Matt 
console.log(remainingData); // { age: 27, job: 'Engineer' } 


每 个 对 象 字 面 量 中 最 多 可 以 使 用 一 次 剩余 操作 符 , 而 且 必 须 放 在 最 后 。 因 为 每 个 对 象 字 面 量 只 能 有 
一 个 剩余 操作 符 ， 所 以 可 以 藤 套 剩余 操作 符 。 嵌 套 时 ， 因 为 子 属性 对 应 的 剩余 操作 符 没有 歧义 ， 所 以 返 
回 对 象 的 内 容 不 会 重 僵 : 


const person = { name: 'Matt', age: 27, job: { title: 'Engineer', level: 10 } }; 



























































const { name, job: { title, ...remainingJobData }, ...remainingPersonData } = person; 
console.log (name);} // Matt 

console.log(title); // Engineer 

console.log(remainingPersonData); // { age: 27 } 

console.log(remainingJobData); // { level: 10 } 

const { ...a, job } = person; 


// SyntaxError: Rest element must be last element 


剩余 操作 符 在 对 象 间 执 行 浅 复 制 ， 因 此 会 复制 对 象 的 引用 而 不 会 克隆 整个 对 象 : 

















const person = { name: 'Matt', age: 27, job: { title: 'Engineer', level: 10 } }; 
const { ...remainingData } = person; 
console.log(person === remainingData); // false 


console.log(person.job === remainingData.job); // true 
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剩余 操作 符 会 复制 所 有 自 有 可 枚 举 属性 ， 包 括 符号 : 


const s = Symbol (); 
Gonst. too = € a lL [sl].2, bi 3 


const {a, ...remainingData} = foo; 


console.log(remainingData); 
// { b: 3, Symbol(): 2 } 


A.2.2 ”扩展 操作 符 


扩展 操作 符 可 以 像 拼接 数组 一 样 合并 两 个 对 象 。 应 用 到 内 部 对 象 的 扩展 操作 符 会 对 所 有 自 有 可 枚 举 
属性 执行 浅 复 制 到 外 部 对 象 ， 包 括 符号 : 


const s = Symbol () 




















const foo = { a: 1} 
Const bar: ses { ES].2 当 
Const foobar =” {in fo00r Cs 3 rerhary: 


console.log (foobar);} 
// {a: 1, c: 3 Symbol(): 2 } 


扩展 对 象 的 顺序 很 重要 ， 主 要 有 两 个 原因 。 

(1) 对 象 跟踪 插入 顺序 。 从 扩展 对 象 复制 的 属性 按照 它们 在 对 象 字 面 量 中 列 出 的 顺序 插入 。 
(2) 对 象 会 覆盖 重 名 属性 。 在 出 现 重 名 属性 时 ， 会 使 用 后 出 现 属性 的 值 。 

下 面 的 例子 演示 了 上 述 约定 : 



























































onst Eon a ("a 
eonst, bas: Se F B22 
Gonst toobar = {GY B37 cebar, too0}} 


console.1log (foobar); 
1 


CoOnst Haz Se {Cond, 
conet Foobarbas = (mistoO0, nbary CL 3 Subass 


console.log(foobarbaz); 
Lt 1 DY 2 


与 剩余 操作 符 一 样 ， 所 有 复制 都 是 浅 复 制 : 


const foo {a: 工 }; 
Const bar Ee 








Gonst, foobar = {sfoo0, .bar}:; 
console.log(foobar.c === bar.c); // true 


A.3 Promise.prototype.finally() 
以 前 ， 只 能 使 用 不 太 好 看 的 方式 处 理 期 约 退 出 “待定 ”状态 ， 而 不 管 后 续 状态 如 何 。 换 句 话 说 ， 通 
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常 需要 重复 利用 处 理 程序 : 
let resolveA, rejectB; 
function finalHandler( 


) 
console.log('finished' 


} 


' 
); 


’ 


function resolveHandler (val) { 
console.log('resolved'); 
finalHandler (); 

} 


function rejectHandler (err) { 
console.log('rejected'); 
finalHandler (); 
} 


new Promise( (resolve, reject) => { 
resolveA = resolve; 
} 


.then(resolveHandler, rejectHandler); 











new Promise( (resolve, reject) => { 
rejectB = reject; 

} 

.then(resolveHandler, rejectHandler); 

resolveA(); 

rejectB(); 


// resolved 
// finished 
// rejected 
// finished 


有 了 Promise.prototype.finally ()， 就 可 以 统一 共享 的 处 理 程序 。finally () 处 理 程序 不 传 
递 任 何 参数 ， 也 不 知道 自己 处 理 的 期 约 是 解决 的 还 是 拒绝 的 。 前 面 的 代码 可 以 重 构 为 如 下 形式 : 


let resolveA, rejectB; 














function finalHandler() { 
console.log('finished'); 


} 


function resolveHandler (val) { 
console.log('resolved'); 


} 





function rejectHandler (err) { 
console.log('rejected'); 











} 


new Promise((resolve, reject) => { 
resolveA = resolve; 

} 

.then(resolveHandler, rejectHandler) 

.finally (finalHandler); 
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new Promise( (resolve, reject) => { 
rejectB = reject; 

} 

.then(resolveHandler, rejectHandler) 

.finally (finalHandler); 


resolveA(); 
rejectB(); 

// resolved 
// rejected 
// finished 
// finished 


注意 日 志 的 顺序 不 一 样 了 。 每 个 finally () 都 会 创建 一 个 新 期 约 实 例 ， 而 这 个 新 期 约会 添加 到 浏 
览 器 的 微 任务 队列 ， 只 有 前 面 的 处 理 程序 执行 完成 才 会 解决 。 


A.4 正则 表达 式 相 关 特 性 


ECMAScript 2018 为 正则 表达 式 增加 了 一 些 特性 。 



































A.4.1 dotAll 标志 
正则 表达 式 中 用 于 匹配 任意 字符 的 点 ( . ) 不 匹配 换行 符 , 比如 \n 和 \r 或 非 BMP 字符 ,如 表情 符号 。 


const text = . 
foo 
bar 




















const re = /foo.bar/; 


console.log(re.test (text)); // false 


为 此 ， 规 范 新 增 了 s 标志 ( 意思 是 单行 ，singleline )， 从 而 解决 了 这 个 问题 


const text = . 
foo 
bar 











const re = /foo.bar/s; 


console.log(re.test (text)); // true 


A.4.2 ”向 后 查找 断言 
正则 表达 式 支持 肯定 式 向 前 查找 断言 和 否定 式 向 前 查找 断言 ， 可 以 匹配 后 跟 指 定 字符 串 的 表达 式 : 


const text = 'foobar'; 














// 肯定 式 向 前 查找 

// 断言 后 跟 某 个 值 ， 但 不 捕获 该 值 

const rePositiveMatch = /foo(?=bar)/; 
const rePositiveNoMatch = /foo(?=baz)/; 
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console.log(rePositiveMatch.exec (text)); 
Jai dls mn| 


console.log (rePositiveNoMatch.exec (text)); 
// null 


// 否定 式 向 前 查找 

// 断言 后 面 不 是 某 个 值 ， 但 不 捕获 该 值 

const reNegativeNoMatch = /foo(?!bar)/; 
const reNegativeMatch = /foo(?!baz)/; 


console.log (reNegativeNoMatch.exec (text)); 
A LL 


console.log(reNegativeMatch.exec (text)); 
A EeeY) 


规范 相应 地 增加 了 与 这 些 断 言 对 应 的 肯定 式 向 后 查找 和 和 否定 式 向 后 查找 。 向 后 查找 与 向 前 查找 的 工 
作 原 理 类 似 ， 只 是 会 检测 要 捕获 内 容 之 前 的 内 容 。 


const text = 'foobar'; 











// 肯定 式 向 后 查找 

// 断言 前 面 是 某 个 值 ， 但 不 捕获 该 值 

const rePositiveMatch = /(?<=foo)bar/; 
const rePositiveNoMatch = /(?<=baz)bar/; 


console.log(rePositiveMatch.exec (text)); 
// ["bar"] 


console.log (rePositiveNoMatch.exec (text)); 
// null 


// 否定 式 向 后 查找 

// 断言 前 面 不 是 某 个 值 ， 但 不 捕获 该 值 

const reNegativeNoMatch = /(?<!foo)bar/; 
const reNegativeMatch = /(?<!baz)bar/; 


console.log (reNegativeNoMatch.exec (text)); 
// null 


console.log(reNegativeMatch.exec (text)); 
A Nar 


A.4.3 ”命名 捕获 组 
多 个 捕获 组 通常 是 按 索 引 来 取 值 的 ， 但 索引 没有 上 下 文 ， 反 映 不 出 它们 包含 的 是 什么 内 容 : 


const text = '2018-03-14'; 

















const re = /(\d+)-(\d+)-(\d+)/; 


console.log(re.exec (text)); 
27 OLES03=T4 a OL 03 


为 此 , 规范 支持 将 捕获 组 与 有 效 JavaScript 标识 符 关联 ,这样 就 可 以 通过 标识 符 获取 捕获 组 的 内 容 : 
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const text = '2018-03-14'; 
const re = /(?<year>\d+)-(?<month>\d+)-(?<day>\d+)/; 


console.log(re.exec (text) .groups); 
// { Year: "2018"; month: "03", day: "14" } 


A.4.4 ”Unicode 属性 转 义 


Unicode 标准 为 每 个 字符 都 定义 了 属性 。 字 符 属性 ， 涉 及 字符 名 称 、 类 别 、 空 格 指示 和 字符 内 部 定 
义 的 脚本 或 语言 等 。 通 过 使 用 Unicode 属性 转 义 可 以 在 正则 表达 式 中 使 用 这 些 属性 。 

有 些 属性 是 二 进 制 ,意味 可 以 独立 使 用 。 比 如 Uppercase 和 White_Space。 有 些 属性 是 键 / 值 对 ， 
即 一 个 属性 对 应 一 个 属性 值 。 比 如 Script_Extensions=Greek。 

Unicode 属性 列表 及 属性 值 列表 参见 Unicode 网 站 。 

Unicode 属性 转 义 在 正则 表达 式 中 可 使 用 \p 表示 匹配 ， 使 用 \P 表示 不 匹配 : 


const pi = String.fromCharCode (0x03C0); 
const linereturn = 、 

































































’ 


const reWhiteSpace = /\p{White_Space}/u; 

const reGreek = /\p{Script_Extensions=Greek}/u; 
const reNotWhiteSpace = /\P{White_Space}/u; 

const reNotGreek = /\P{Script_Extensions=Greek}/u; 





console.log(reWhiteSpace.test (pi)); // false 
console.log(reWhiteSpace.test (linereturn));} // true 
console.log(reNotWhiteSpace.test (pi)); // true 
console.log(reNotWhiteSpace.test (linereturn)); // false 
console.log(reGreek.test (pi)); // true 
console.log(reGreek.test (linereturn)); // false 
console.log(reNotGreek.test (pi)); // false 
console.log (reNotGreek.test (linereturn)); // true 


A.5 数组 打 平 方法 


ECMAScript 2019 在 Array .prototype 上 增加 了 两 个 方法 : flat() 和 flatMap()。 这 两 个 方法 
为 打 平 数组 提供 了 便利 。 如 果 没 有 这 两 个 方法 ， 则 打 平 数组 就 要 使 用 迭代 或 递归 。 

















注意 flat () 和 flatMap() 只 能 用 于 打 平 谋 套 数组 。 赃 套 的 可 迭代 对 象 如 Map 和 Set 


不 能 打 平 。 





A.5.1 Array.prototype.flatten() 
下 面 是 如 果 没 有 这 两 个 新 方法 要 打 平 数组 的 一 个 示例 实现 : 


function flatten(sourceArray, flattenedArray = []) { 
for (const element of sourceArray) { 
if (Array.isArray (element)) { 
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flatten(element, flattenedArray); 
} else { 
flattenedArray .push (element);} 
} 
} 
return flattenedArray; 


} 
const arr = [[0], 1, 2, [3, [4, 5]], 6]; 


console.log(flatten (arr)) 
WE OR, Ti i tb] 


这 个 例子 在 很 多 方面 像 一 个 树 形 数据 结构 : 数组 中 每 个 元 素 都 像 一 个 子 节点 , 非 数组 元 素 是 叶 节 点 。 
因此 ， 这 个 例子 中 的 输入 数组 是 一 个 高 度 为 2 有 7 个 时节 点 的 树 。 打 平 这 个 数组 本 质 上 是 对 叶 节 点 的 按 
序 遍 历 。 

有 时 候 如 果 能 指定 打 平 到 第 几 级 嵌 套 是 很 用 的 。 比 如 下 面 这 个 例子 , 它 重 写 了 上 面 的 版 本 ,允许 
指定 要 打 平 几 级 : 

function flatten(sourceArray, depth, flattenedArray = []) { 

for (const element of sourceArray) { 
if (Array.isArray (element) && depth > 0) { 
flatten(element, depth - 1, flattenedArray); 
} else { 


flattenedArray .push (element);} 
} 





















































} 


return flattenedArray; 


} 


const arr = [[0], 1, 2, [3, [4, 5]], 6]; 


console.log(flatten(arr, 1)); 
LO Es 2 [4 :Sls 0 


为 了 解决 上 述 问题 ， 规范 增加 了 Array .prototype.flat () 方 法 。 该 方法 接收 depth 参数 ( 默认 
值 为 1 )， 返 回 一 个 对 要 打 平 Array 实例 的 浅 复 制 副 本 。 下 面 看 几 个 例子 : 


const arr = [[0], 1, 2, [3, [4, 5]], 6]; 











console.logl(arr.flat (2)); 
Ws, RO J Zp By dy SE] 


console.logl(arr.flat()); 
VA | 


因为 是 执行 浅 复制 ， 所 以 包含 循环 引用 的 数组 在 被 打 平 时 会 从 源 数 组 复制 值 : 


const arr = [[0], 1, 2, [3, [4, 5]], 6]; 











arr.push(arr); 


console.log(arr.flat()); 
// [0, 1, 2, 3, 4, 5, 6, [0], 1, 2, [3, [4, 5]], 6] 
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A.5.2 Array.prototype.flatMap() 


Array .prototype.flatMap() 方 法 会 在 打 平 数组 之 前 执行 一 次 映射 操作 。 在 功能 上 ,arr. flatMap (f) 
与 arr.map(f) .flat () 等 价 ; 但 arr.flatMap () 更 高 效 ， 因 为 浏览 器 只 需要 执行 一 次 遍历 。 
flatMap () 的 函数 签名 与 map ( ) 相同 。 下 面 是 一 个 简单 的 例子 : 


ON LES | 














console.log(arr.map(([ 
了 过 2 全 证 34 全 556 


console.log(arr.flatMap(([x]) => [x, x + 1])); 
// [1, 2, 3, 4, 5, 6] 


flatMap () 在 非 数 组 对 象 的 方法 返回 数组 时 特别 有 用 , 例如 字符 串 的 split () 方 法 。 来 看 下 面 的 例 
子 ， 该 例子 把 一 组 输入 字符 串 分 制 为 单词 ， 然 后 把 这 些 单 词 拼接 为 一 个 单词 数组 : 


const arr = ['Lorem ipsum dolor sit amet,', 'consectetur adipiscing elit.']; 











console.logl(larr.flatMap((x) => x.split(/[\W+]/))); 
// ["Lorem", "ipsum", "dolor", "sit", "amet", "", "consectetur", "adipiscing", 
Wp nn | 


对 于 上 面 的 例子 ,可 以 利用 空 数组 进一步 过 滤 上 一 次 映射 后 的 结果 ， 这 也 是 一 个 数据 处 理 技巧 ( 虽 
然 可 能 会 有 些 性 能 损失 )。 下 面 的 例子 扩展 了 上 面 的 例子 ， 去 掉 了 空 字符 串 : 





山 











const arr = ['Lorem ipsum dolor sit amet,', 'consectetur adipiscing elit.']; 
console.log(arr.flatMap((x) => x.split(/[\W+]/)).flatMap((x) => x || [])); 
// ["Lorem", "ipsum", "dolor", "sit", "amet", consectetur", "adipiscing", "elit"] 








这 里 , 结果 中 的 每 个 空 字符 串 首先 映射 到 一 个 空 数组 。 在 打 平 时 ,这 些 空 数组 就 会 因为 没有 内 容 而 
被 忽略 。 





注意 不 建议 使 用 这 个 技巧 。 这 是 因为 过 滤 每 个 值 都 要 构建 一 个 立即 丢弃 的 Array 实例 。 





A.6 object .fromEntries() 


OSS oop 2019 又 给 object 类 添加 了 一 个 静态 方法 fromEntries () ， 用 于 通过 键 / 值 对 数组 的 
集合 构建 对 象 。 这 个 方法 执行 与 object .entries() 方 法 相反 的 操作 。 来 看 下 面 的 例子 : 
eonst Ob eut{ 
foo: 'bar', 


Da Tou 


2 






































const objEntries = Object.entries (obj); 


console.log (objEntries); 
A Feo "bar"], [ "ag" "qux"]] 


console.log (Object.fromEntries (objEntries)); 
// { foo: "bar", baz: "gqux" } 
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此 静态 方法 接收 一 个 可 迭代 对 象 参数 ， 该 可 迭代 对 象 可 以 包含 任意 数量 的 大 小 为 2 的 可 迭代 对 象 。 
这 个 方法 可 以 方便 地 将 Map 实例 转换 为 object 实例 , 因为 Map 太 代 器 返回 的 结果 与 fromEntries () 
的 参数 恰好 匹配 : 


const map = new Map().set('foo', 'bar'); 











console.log (Object.fromEntries (map)); 
// { foo: "bar" } 


A.7 字符 串 修 理 方法 


ECMAScript 2019 向 String .prototype 添加 了 两 个 新 方法 : trimstart () 和 trimend()。 它们 
分 别 用 于 删除 字符 串 开 头 和 末尾 的 空格 。 这 两 个 方法 旨 在 取代 之 前 的 trimLeft () 和 trimRight ()， 
因为 后 两 个 方法 在 从 右 往 左 书写 的 语言 (如 阿拉 伯 语 和 和希 伯 来 语 ) 中 有 歧义 。 

在 只 有 一 个 空格 的 情况 下 ， 这 两 个 方法 相当 于 执行 与 padstart () 和 padEnd() 相 反 的 操作 。 下 面 
的 例子 演示 了 使 用 这 两 个 方法 删除 字符 串 前 后 的 空格 : 



















































































let s = " foo 3 
console.log(s.trimstart()); // "foo 
console.log(s.trimeEnd()); // " EGG 


A.8 Symbol.prototype.description 





ECMAScript 2019 在 Symbol .prototype 上 增加 了 aescription 属性 ,用 于 取得 可 选 的 符号 描述 。 
以 前 ， 只 能 通过 将 符号 转型 为 字符 串 来 取得 这 个 描述 : 


[ee 





























console.log(s.toString()); 
// Symbol (foo) 


这 个 原型 属性 是 只 读 的 , 可 以 在 实例 上 直接 取得 符号 的 描述 。 如果 没有 描述 , 则 默认 为 undefined。 


ongst ,ss molt teoorys 



































console.log(s.description); 
// foo 


A.9 可 选 的 catch 绑 定 


在 ECMAScript 2019 之 前 ，try/catch 块 的 结构 相当 严格 。 即 使 不 想 使 用 捕获 的 错误 对 象 , 解析 器 
也 要 求 必须 在 catch 子 句 中 把 该 对 象 赋值 给 一 个 变量 : 
try { 
throw 'foo'; 
} catch (e) { 
// 发 生 错误 了 ， 但 你 不 想 使 用 错误 对 象 
} 


在 ECMAScript 2019 中 ， 可 以 省 略 这 个 赋值 ， 并 完全 忽略 错误 : 
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tty: 

throw 'foo'; 
} catch { 

// 发 生 错 误 了 ， 但 你 不 想 使 用 错误 对 象 
} 


A.10 其 他 新 增 内 容 


ES2019 还 对 现 有 API 进行 了 其 他 一 些 调整 

口 Array .prototype.sort () 稳 定 了 ， 意味 着 相同 的 对 象 在 给 出 中 不 会 被 重新 排序 。 

口 由 于 单独 的 UTF-16 代理 对 字符 不 能 使 用 UTF-8 编码 , JSON . stringify () 在 ES2019 以 前 会 返 

回 UTF-16 码 元 ， 现 在 则 改 为 返回 转 义 序列 ， 也 是 有 效 的 Unicode。 

口 ES2019 以 前 , U+2028 LINE SEPARATOR 和 U+2029 PARAGRAPH SEPARATOR 在 JSON 字符 串 

:都 有 效 ， 但 在 ECMAScript 字 符 串 中 则 无 效 。ES2019 实现 了 ECMAScript 字符 串 与 JSON 字符 

串 的 兼容 。 

口 ES2019 以 前 ,浏览 器 厂商 可 以 自由 决定 Function.prototype.toString() 返 回 什 么 .ES2019 
要 求 这 个 方法 尽 可 能 返回 函数 的 源 代码 ， 否 则 返回 { [native code] }。 

























































































内 录 DD 
严格 模式 


ECMAScript5 首次 引入 严格 模式 的 概念 。 严 格 模式 用 于 选择 以 更 严格 的 条 件 检查 JavaScript 代码 错 















































误 ， 可 以 应 用 到 全 局 ， 也 可 以 应 用 到 函数 内 部 。 严 格 模式 的 好 处 是 可 以 提早 发 现 错误 ， 因 此 可 以 捕获 某 





些 ECMAScript 问题 导致 的 编程 错误 。 
理解 严格 模式 的 规则 非常 重要 ， 因 为 未 来 的 ECMAScrip 
已 得 到 所 有 主流 浏览 器 支持 。 


B.1 选择 使 用 












































t 会 逐步 强制 全 局 使 用 严格 模式 。 严 格 模式 











要 选择 使 用 严格 模式 ， 需 要 使 用 严格 模式 编译 指示 (pragma )， 即 一 个 不 赋值 给 任何 变量 的 字符 串 : 


"use strict",; 








这 样 一 个 即使 在 ECMAScript 3 中 也 有 效 的 字符 串 ， 可 以 章 











容 不 支持 严格 模式 的 JavaScript 引擎 。 支 持 





严格 模式 的 引擎 会 启用 严格 模式 ， 而 不 支持 的 引擎 则 会 将 这 个 编译 指示 当成 一 个 未 赋值 的 字符 串 字面 量 。 
如 果 把 这 个 编译 指示 应 用 到 全 局 作用 域 ， 即 函数 外 部 ， 则 整个 脚本 都 会 按照 严格 模式 来 解析 。 这 意 



































味 着 在 最 终 会 与 其 他 脚本 拼接 为 一 个 文件 的 脚本 中 添加 了 编译 指示 ， 会 将 该 文件 中 的 所 有 JavaScript 置 

















于 严格 模式 之 下 。 
也 可 以 像 下 面 这 样 只 在 一 个 函数 内 部 开启 严 格 模式 : 
function doSomething() { 
"use strict",; 


// 其 他 代码 
} 



























































如 果 你 不 能 控制 页 面 中 的 所 有 脚本 ， 那 么 建议 只 在 经 过 测试 的 特定 函数 中 启用 严格 模式 。 


B.2 ”变量 


























严格 模式 下 如 何 创建 变量 及 何 时 会 创建 变量 都 会 发 生变 化 。 第 一 个 变化 是 不 允许 意外 创建 全 局 变 








量 。 在 非 严 格 模式 下 ， 以 下 代码 可 以 创建 全 局 变量 : 
// 变量 未 声明 
// 非 严格 模式 : 创建 全 局 变量 
// 严格 模式 : 抛 出 ReferenceError 
message = "Hello world!"; 














虽然 这 里 的 message 没有 前 置 1et 关键 字 , 也 没有 明确 











定义 为 全 局 对 象 的 属性 ， 但 仍然 会 自动 创 





建 为 全 局 变量 。 在 严格 模式 下 ， 给 未 声明 的 变量 赋值 会 在 执行 代码 时 抛 出 ReferenceError。 

















相关 的 另 一 个 变化 是 无 法 在 变量 上 调用 delete。 在 非 严 

















格 模式 下 允许 这 样 , 但 可 能 会 静默 失败 ( 返 
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回 false )。 在 严格 模式 下 ， 尝 试 删除 变量 会 导致 错误 : 


// 删除 变量 

// 非 严格 模式 : 静默 失败 

// 严格 模式 : 抛 出 ReferenceError 
let color = "ed" 

delete color; 


严格 模式 也 对 变量 名 增加 了 限制 。 具 体 来 说 ， 不 允许 变量 名 为 implements、interface、let、 
package、private、protected、public、static 和 yield。 这 些 是 目前 的 保留 字 ， 可 能 在 将 来 


的 ECMAScript 版 本 中 用 到 。 如 果 在 严格 模式 下 使 用 这 些 名 称 作 为 变量 名 ， 则 会 导致 语法 错误 。 


B.3 对象 


在 严格 模式 下 操作 对 象 比 在 非 严 格 模式 下 更 容易 抛 出 错误 。 严 格 模式 倾向 于 在 非 严格 模式 下 会 静默 
失败 的 情况 下 抛 出 错误 ， 增 加 了 开发 中 提前 发 现 错误 的 可 能 性 。 

首先 ， 以 下 几 种 情况 下 试图 操纵 对 象 属性 会 引发 错误 。 
口 给 只 读 属 性 赋值 会 抛 出 TypeError。 
口 在 不 可 配置 属性 上 使 用 aelete 会 抛 出 TypeError。 
口 给 不 存在 的 对 象 添 加 属性 会 抛 出 TypeError。 

另外 , 与 对 象 相关 的 限制 也 涉及 通过 对 象 字面 量 声明 它们 。 在 使 用 对 象 字 面 量 时 , 属性 名 必须 唯一 。 
例如 : 


// 两 个 属性 重 名 
// 非 严格 模式 : 没有 错误 ， 第 二 个 属性 生效 
// 严格 模式 : 抛 出 SyntaxError 
let person = { 

name: "Nicholas", 

name: "Greg" 


上 


这 里 的 对 象 字面 量 person 有 两 个 叫 作 name 的 属性 。 第 二 个 属性 在 非 严格 模式 下 是 最 终 的 属性 。 
但 在 严格 模式 下 ， 这 样 写 是 语法 错误 。 
































































































































注意 ECMAScript6 删除 了 对 重 名 属性 的 这 个 限制 , 即 在 严格 模式 下 重复 的 对 象 字 面 量 必 








性 键 不 会 抛 出 错误 。 





B.4 ”函数 


首先 ， 严 格 模式 要 求 命名 函数 参数 必须 唯一 。 看 下 面 的 例子 : 
// 命名 参数 重 名 

// 非 严格 模式 : 没有 错误 ， 只 有 第 二 个 参数 有 效 

// 严格 模式 : 抛 出 SyntaxError 

function sum (num, num)ft 


// 函数 代码 





} 
在 非 严格 模式 下 ， 这 个 函数 声明 不 会 抛 出 错误 。 这 样 可 以 通过 名 称 访 问 第 二 个 num, 但 只 能 通过 
arguments 访问 第 一 个 参数 。 
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arguments 对 象 在 严格 模式 下 也 有 一 些 变化 。 在 非 严格 模式 下 ,修改 命名 参数 也 会 修改 arguments 
对 象 中 的 值 。 而 在 严格 模式 下 ， 命 名 参数 和 arguments 是 相互 独立 的 。 例 如 : 

// 修改 命名 参数 的 值 

// 非 严 格 模式 。 arguments 会 反映 变化 


// 严格 模式 : arguments 不 会 反映 变化 
function showValue (value){ 


Value = "Foo"; 
alert (value); /AL POO" 
alert (arguments[0]); // 非 严 格 模 式 : "Foo" 


// 严格 模式 : "Hi" 
} 


showValue ("Hi"); 


ss 函数 showValue () 有 一 个 命名 参数 value。 调 用 这 个 函数 时 给 它 传人 参数 "Hi" ， 


该 值 会 研 给 value。 在 函数 内 部 ,value 被 修改 为 "Foo"。 在 非 严 格 模式 下 ,这 样 也 会 修改 arguments [01] 
的 值 ， 人 会 


另 一 个 变化 是 去 掉 了 arguments .callee 和 arguments.caller。 在 非 严 格 模式 下 ,它们 分 别 引 
用 函数 本 身 和 调用 函数 。 在 严格 模式 下 ， 访 问 这 两 个 属性 中 的 任何 一 个 都 会 抛 出 TypeError。 例 如 : 
// 访问 arguments .callee 
// 非 严 格 模式 : 没 问题 
// 严格 模式 : 抛 出 TypeError 
function factorial (num) { 
下 CU 区 太吉 
return 1; 
} else { 
return num * arguments.callee (num-1) 
} 
} 
let result = factorial(5); 


















































类 似 地 , 读 或 写 函 数 的 caller 或 callee 属性 也 会 抛 出 TypeError。 因此 对 这 个 例子 而 言 , 访问 
factorial.caller 和 factorial.callee 也 会 抛 出 错误 。 


另外 ， 与 变量 一 样 ， 严 格 模式 也 限制 了 函数 的 命名 ， 不 允许 函数 名 为 implements、 


let、 package、 private、 protected. rs static 和 yielgd。 


关于 函数 的 最 后 一 个 变化 是 不 允许 函数 声明 ， 它们 位 于 脚本 或 函数 的 顶级 。 这 意味 着 在 if 语 
句 中 声明 的 函数 现在 是 个 语法 错误 : 


// 在 if 语 负 中 声明 函数 
// 非 严格 模式 : 函数 提升 至 if 语 向 外 部 
// 严格 模式 : 抛 出 SyntaxError 
if (true)t 
function doSomething(){ 
Ee 
} 


interface、 











} 
所 有 浏览 器 在 非 严 格 模 式 下 都 支持 这 个 语法 ， 但 在 严格 模式 下 则 会 抛 出 语法 错误 。 


B.4.1 函数 参数 


ES6 增 加 了 剩余 操作 符 、 解 构 操 作 符 和 默认 参数 , 为 函数 组 织 、 结 构 和 定义 参数 提供 了 强大 的 支持 。 
ECMAScript7 增加 了 一 条 限制 , 要 求 使 用 任何 上 述 先进 参数 特性 的 函数 内 部 都 不 能 使 用 严格 模式 , 否则 
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会 抛 出 错误 。 不 过 ， 全 局 严格 模式 还 是 允许 的 。 
// 可 以 
function foo(a，b，c) { 
"use strict",; 


} 


// 不 可 以 
function bar(la, b, c='d') { 
"use strict",; 


} 


// 不 可 以 
funcotion, Bazi( (ar ‘BF Cy), { 
"use strict"; 


} 


// 不 可 以 
fumetiom qe(a by sw EE 
"use strict",; 


} 

ES6 增加 的 这 些 新 特性 期 待 参数 与 函数 体 在 相同 模式 下 进行 解析 。 如 果 允 许 编译 指示 "use 
strict" 出 现在 函数 体内 ，JavaScript 解析 器 就 需要 在 解析 函数 参数 之 前 先 检 查 函数 体内 是 否 存 在 这 个 
编译 指示 ， 而 这 会 带 来 很 多 问题 。 为 此 ，ES7 规范 增加 了 这 个 约定 ,目的 是 让 解析 屁 在 解析 函数 之 前 就 
确切 知道 该 使 用 什么 模式 。 









































B.4.2 eval() 


eval () 函数 在 严格 模式 下 也 有 变化 。 最 大 的 变化 是 eval () 不 会 再 在 包含 上 下 文中 创建 变量 或 函 
数 。 例 如 : 


// 使 用 eval () 创 建 变量 
// 非 严格 模式 : 警告 框 显 示 10 
// 严格 模式 : 调用 alert (x) 时 抛 出 ReferenceError 
function doSomething(){ 
eval{("let x = 10"); 
alert (x); 





} 

以 上 代码 在 非 严格 模式 下 运行 时 ， 会 在 dosomething () 函数 内 部 创建 局 部 变量 x， 然 后 alert () 
会 显示 这 个 变量 的 值 。 在 严格 模式 下 , 调用 eval () 不 会 在 dosomething () 中 创建 变量 x, 由 于 x 没有 
声明 ，alert () 会 抛 出 ReferenceError。 

变量 和 函数 可 以 在 eval () 中 声明 ， 但 它们 会 位 于 代码 执行 期 间 的 一 个 特殊 的 作用 域 里 ， 代 码 执行 
完毕 就 会 销毁 。 因 此 ， 以 下 代码 就 不 会 出 错 : 


"use strict"; 
let result = 
alert (result); 


这 里 在 eval () 中 声明 了 变量 x 和 y， 将 它们 相 加 后 返回 得 到 的 结果 。 变 量 result 会 包含 x 和 y 
相 加 的 结果 21， 虽 然 x 和 y 在 调用 alert () 时 已 经 不 存在 了 ， 但 不 影响 结果 的 显示 。 




































































eval("let x = 10, y= 11; x + y"); 
/2 
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B.4.3 eval 与 arguments 


严格 模式 明确 不 允许 使 用 eval 和 arguments 作为 标识 符 和 操作 它们 的 值 。 例 如 : 


// 将 eval 和 arguments 重新 定义 为 变量 
// 非 严 格 模式 : 可 以 ， 没 有 错误 

// 严格 模式 : 抛 出 SyntaxError 

let eval = 10; 

let arguments = "Hello world!"; 


在 非 严 格 模 式 下 , 可 以 重 写 eval 和 arguments。 在 严格 模式 下 ,这 样 会 导致 语法 错误 。 不 能 用 它 





们 作为 标识 符 ， 这 意味 着 下 面 这 些 情况 都 会 抛 出 语法 错误 : 


口 使 用 let 声明 ; 

口 赋予 其 他 值 ; 

口 修改 其 包含 的 值 ， 如 使 用 ++; 

口 用 作 函 数 名 ; 

口 用 作 陶 数 参数 名 ; 

口 在 try/catch 语句 中 用 作 异 常 名 称 。 
































B.5 this 强制 转型 











JavaScript 中 最 大 的 一 个 安全 问题 , 也 是 最 令 人 困惑 的 一 个 问题 , 就 是 在 某 些 情况 下 this 的 值 是 如 











何 硬 

















定 的 。 使 用 函数 的 apply () 或 call () 方 法 时 ， 在 非 严 格 模式 下 null 或 undefined 值 会 被 强制 


转型 为 全 局 对 象 。 在 严格 模式 下 ， 则 始终 以 指定 值 作为 函数 this 的 值 ， 无 论 指 定 的 是 什么 值 。 例 如 : 





值 是 全 局 对 象 。 结 果 会 显示 "redq"。 在 严格 模式 下 ， 该 函数 的 this 值 是 nul1l1， 因 此 在 访问 nu11 的 属 


// 访问 属性 
// 非 严 格 模式 : 访问 全 局 属性 
// 严格 模式 : 抛 出 错误 ， 因 为 this 值 为 nul1 
Let COLOF .=: ed 
function displayColor() { 
alert (this.color); 
} 
displayColor.call (null); 


这 里 在 调用 aisplaycolor.call() 时 传人 null 作为 this 的 值 ,在 非 严 格 模 式 下 该 限 数 的 this 











性 时 会 抛 出 错误 。 





通常 ， 函 数 会 将 其 this 的 值 转型 为 一 种 对 象 类 型 ， 这 种 行为 经 常 被 称 为 “ 装 箱 ”(boxing )。 这 意 


味 着 原始 值 会 转型 为 它们 的 包装 对 象 类 型 。 


function foo() { 
console.log(this); 


} 


foo.call(); // Window {} 
foo.call(2); // Number {2} 


在 严格 模式 下 执行 以 上 代码 时 ，this 的 值 不 会 再 “ 装 箱 ”: 


function foo() { 
"use strict",; 
console.log(this); 
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} 


foo.call(); // undefined 
fad Call(2)s .77 2 
二 
B.6 类 与 模块 


类 和 模块 都 是 ECMAScript 6 新 增 的 代码 容器 特性 。 在 之 前 的 ECMAScript 版 本 中 没有 类 和 模块 这 两 
个 概念 ， 因 此 不 用 考虑 从 语法 上 兼容 之 前 的 ECMAScript 版 本 。 为 此 ，TC39 委员 会 决定 在 ES6 类 和 模 























块 中 定义 的 所 有 代码 默认 都 处 于 严格 模式 。 























对 于 类 ， 这 包括 类 声明 和 类 表达 式 , 构造 函数 、 实 例 方法 、 静 态 方法 、 获 取 方 法 和 设置 方法 都 在 严 


格 模式 下 。 对 于 模块 ， 所 有 在 其 内 部 定义 的 代码 都 处 于 严格 模式 。 
B.7 其 他 变化 





严格 模式 下 还 有 其 他 一 些 需 要 注意 的 变化 。 首 先是 消除 with 语句 。with 语句 改变 了 标识 符 解析 











时 的 方式 ， 严 格 模 式 下 为 简单 起 见 已 去 掉 了 这 个 语法 。 在 严格 模式 下 使 月 


// 使 用 with 语句 
// 非 严格 模式 : 允许 
// 严格 模式 : 抛 出 SyntaxError 
with(location) { 
alert (href) ， 
} 


严格 模式 也 从 JavaScript 中 去 掉 了 八进制 字面 量 。 八 进 制 字面 量 以 前 导 0 开始 ， 











误 的 源头 。 在 严格 模式 下 使 用 八进制 字面 量 被 认为 是 无 效 语法 : 
// 使 用 八进制 字面 量 
// 非 严 格 模式 : 值 为 8 
// 严格 模式 : 抛 出 SyntaxError 
let Value = 010; 











月 with 会 导致 语法 错误 : 





























ECMAScript 5 修改 了 非 严格 模式 下 的 parseInt () ,将 八进制 字面 量 


例如 . 


// 在 parseInt() 中 使 用 八进制 字面 量 
// 非 严 格 模式 : 值 为 8 

// 严格 模式 : 值 为 10 

let Value = parseInt ("010") 


当 作 带 前 导 0 的 十 进 制 





字面 


直 以 来 是 很 多 错 


-了 
里 。 





附录 C 
JavaScript 库 和 框架 








JavaScript 库 帮 助 弥 合 浏览 器 之 间 的 差异 ， 能 够 简化 浏览 器 复杂 特性 的 使 用 。 库 主要 分 两 种 形式 : 

















通用 和 专用 。 通 用 JavaScript 库 支 持 常 用 的 浏览 器 功能 ， 可 以 作为 网 站 或 Web 应 用 程序 天 
日 JavaScript 库 支 持 特定 功能 ， 只 适合 网 站 或 Web 应 用 程序 的 一 部 分 。 本 附录 会 从 整体 上 介绍 这 些 库 及 








— 




















其 功能 ， 并 提供 相关 参考 资源 。 


C.1 框架 











F 发 的 基础 。 专 



































“框架 ”( framework ) 涵盖 各 种 不 同 的 模式 ， 但 各 自 具 有 不 同 的 组 织 形式 ， 用 于 搭建 复杂 应 用 程序 。 
F 务 提供 了 稳健 的 实 








使 用 框架 可 以 让 代码 遵循 一 致 的 约定 ， 能 够 灵活 扩展 规模 和 复杂 性 。 框 架 对 常见 的 他 


























现 机 制 ， 比 如 组 件 定义 及 重用 、 控 制 数据 流 、 路 由 ， 等 等 


本 To 















































JavaScript 框架 越 来 越 多 地 表现 为 单 页 应 用 程序 (SPA，Single Page Application )。SPA 使 用 HIML5 

















浏览 器 历史 API， 在 只 加 载 一 个 页 面 的 情况 下 通过 URL 路 由 提供 完整 的 应 用 程序 

















j 户 界 巴 








1。 框架 在 应 


















































区 和 大 量 第 三 方 扩展 。 





C.1.1 React 











用 程序 运行 期 间 负责 管理 应 用 程序 的 状态 以 及 用 户 界面 组 件 。 大 多 数 流行 的 SPA 框架 有 坚实 的 开发 者 社 








React 是 Facebook 开发 的 框架 ， 专 注 于 模型 -视图 -控制 器 ( MVC，Model-View-Controller ) 模型 中 
的 “视图 ”。 专 注 的 范围 让 它 可 以 与 其 他 框架 或 React 扩展 合作 ， 实 现 MVC 模式 。React 使 用 单 向 数据 
流 , 是 声明 性 和 基于 组 件 的 , 基于 虚拟 DOM 高 效 演 染 页 面 , 提供 了 在 JavaScript 包含 HTML 标记 的 JSX 





























语法 。Facebook 也 维护 了 一 个 React 的 补充 框架 ， 叫 作 Flux。 
口 许可 : MIT 


C.1.2 Angular 





























谷歌 在 2010 年 首次 发 布 的 Angular 是 基于 模型 -视图 -视图 模型 (MVVM ) 架构 的 全 功能 Web 应 用 
程序 框架 。 2016 年 , 这 个 项 目 分 又 为 两 个 分 支 : Angular 1x 和 Angular2。 前 者 是 最 初 的 AngularJS 项 目 ， 
后 者 则 是 基于 ES6 语法 和 TypeScript 完全 重新 设计 的 框架 。 这 两 个 版 本 的 最 新 发 布 版 都 是 指令 和 基于 组 
































件 的 实现 ， 两 个 项 目 都 有 稳健 的 开发 者 社区 和 第 三 方 扩展 。 
口 许可 : MIT 








C.1.3 Vue 














Vue 是 类 似 Angular 的 全 功能 Web 应 用 程序 框架 ,但 更 加 中 立 化 。 自 2014 年 Vue 发 布 以 来 ， 它 的 
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开发 者 社区 发 展 迅 猛 ， 很 多 开发 者 因为 其 高 性 能 和 易 组 织 ， 同 时 不 过 于 主观 而 选择 了 Vue。 
口 许可 : MIT 


C.1.4 Ember 


Ember 与 Angular 非常 相似 ， 都 是 MVVM 架构 ， 并 使 用 首选 的 约定 来 构建 Web 应 用 程序 。2015 年 
发 布 的 2.0 版 引入 了 很 多 React 框架 的 行为 。 
口 许可 : MIT 









































C.1.5 Meteor 


Meteor 与 前 面 的 框架 都 不 一 样 ， 因 为 它 是 同 构 的 JavaScript 框架 ， 这 意味 着 客户 端 和 服务 器 共享 一 
套 代 码 。Meteor 也 使 用 实时 数据 更 新 协议 ， 持 续 从 DB 向 客户 端 推 送 新 数据 。 虽 然 Meteor 是 一 个 极为 
主观 的 框架 ， 但 好 处 是 可 以 使 用 其 稳健 的 开 箱 即 用 特性 快速 开发 应 用 程序 。 

口 许可 : MIT 




































































C.1.6 Backbone.js 


Backbone.js 是 构建 于 Underscorejs 之 上 的 一 个 最 小 化 MVC 开源 库 , 为 SPA 做 了 大 量 优化 ,可 以 方 
便 地 更 新 应 用 程序 状态 。 























口 许可 : MIT 
C.2 通用 库 




























































































通用 JavaScript 库 提供 适应 任何 需求 的 功能 。 所 有 通用 库 都 致力 于 通过 将 常用 功能 封装 为 新 API， 
来 补偿 浏览 器 接口 、 弥 补 实现 差异 。 其 中 有 些 API 与 原生 功能 相似 ， 而 另 一 些 API 则 完全 不 同 。 通用 库 
通常 会 提供 与 DOM 的 交互 ， 对 Ajax 的 支持 ， 还 有 辅助 常见 任务 的 实用 方法 。 
C.2.1 jQuery 

jQuery 是 为 JavaScript 提供 函数 式 编程 接口 的 开源 库 。 该 库 的 核心 是 通过 CSS 选择 符 匹配 DOM 元 
素 ， 通 过 调用 链 ，jQuery 代码 看 起 来 更 像 描 述 故 事情 节 而 不 是 JavaScript 代码 。 这 种 代码 风格 在 设计 师 
和 原型 设计 者 中 非常 流行 。 

口 许可 : MIT 或 GPL 



















































































C.2.2 Google Closure Library 


Google Closure Library 是 通用 JavaScript 工具 包 ， 与 jQuery 在 很 多 方面 都 很 像 。 这 个 库 包 含 非常 多 
的 模块 ， 涵 盖 底 层 操作 和 高 层 组 件 和 部 件 。Google Closure Library 可 以 按 需 加 载 模块 ， 并 使 用 Google 
Closure Compiler( 附录 DD 会 介绍 ) 构建 。 
口 许可 : Apache 2.0 





















































C.2.3 Underscore.js 
Underscore.js 并 不 是 严格 意义 上 的 通用 库 ， 但 提供 了 JavaScript 函数 式 编程 的 额外 能 力 。 它 的 文档 
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将 Underscore.js 看 成 jQuery 的 组 件 , 但 提供 了 更 多 底层 能 力 , 用 于 操作 对 象 .数组 .函数 和 其 他 JavaScript 
数据 类 型 。 
口 许可 : MIT 





C.2.4 Lodash 


与 Underscore.js 一 样 ，Lodash 也 是 实用 库 ， 用 于 扩充 JavaScript 工具 包 。Lodash 提供 了 很 多 操作 原 
生 类 型 ， 如 数组 、 对 象 、 函 数 和 原始 值 的 增强 方法 。 
口 许可 : MIT 











C.2.5 Prototype 


Prototype 是 对 常见 Web 开发 任务 提供 简单 API 的 开源 库 。Prototype 最 初 是 为 了 Ruby on Rails 开发 
者 开发 的 ， 由 类 驱动 ， 旨 在 为 JavaScript 提供 类 定义 和 继承 。 为 此 ，Prototype 提供 了 大 量 的 类 ， 将 常用 
和 复杂 的 功能 封装 为 简单 的 API 调用 。Prototype 包含 在 一 个 文件 里 ， 可 以 轻松 地 插入 页 面 中 使 用 。 
口 许可 : MIT 及 CC BY-SA 3.0 









































C.2.6 Dojo Toolkit 


Dojo Toolkit 是 以 包 系 统 为 基础 的 开源 库 ， 将 功能 分 门 别 类 地 划分 为 包 ， 可 以 按 需 加 载 。Dojo 支持 
各 种 配置 选项 ， 几 乎 涵盖 了 使 用 JavaScript 所 需 的 一 切 。 
口 许可 :“ 新 ”BSD 许可 或 Academic Free License 2.1 























C.2.7 MooTools 


MooTools 是 简洁 、 优 化 的 开源 库 ， 为 原生 JavaScript 对 象 添 加 方法 ， 在 熟悉 的 接口 上 提供 新 功能 。 
由 于 体积 小 、API 简单 ，MooTools 在 Web 开发 者 中 很 受 欢 迎 。 
口 许可 : MIT 





























C.2.8 qooxdoo 

qooxdoo 是 致力 于 全 周期 支持 Web 应 用 程序 开发 的 开源 库 。 通 过 实现 自己 的 类 和 接口 ，qooxdoo 创 
建 了 类 似 传统 面向 对 象 编程 语言 的 模型 。 这 个 库 包含 完整 的 GUI 工具 包 和 编译 器 , 用 于 简化 前 端 构 建 过 
程 。qooxdoo 最 初 是 网 站 托管 公司 1&l 的 内 部 库 ， 后 来 基于 开源 许可 对 外 发 布 。 

口 许可 : LGPL 或 EPL 


C.3 动画 与 特效 


动画 与 特效 是 Web 开发 中 越 来 越 重 要 的 一 部 分 。 在 网 站 中 创造 流畅 的 动画 并 不 容易 。 为 此 ， 不 少 
库 开 发 者 已 开发 了 包含 各 种 动画 和 特效 的 库 。 前 面 提 到 的 不 少 JavaScript 库 也 包含 动画 特性 。 










































































C.3.1 D3 
数据 驱动 文档 (D3，Data Driven Documents ) 是 非常 流行 的 动画 库 ， 也 是 今天 非常 稳健 和 强大 的 
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JavaScript 数据 可 视 化 工具 。D3 提供 了 全 面 完整 的 特性 ， 涵 盖 canvas、SVG、CSS 和 HTMLS5 可 视 化 。 
使 用 D3 可 以 极为 精准 地 控制 最 终 演 染 的 输出 。 
口 许可 : BSD 





C.3.2 three.js 


three.js 是 当前 非常 流行 的 WebGL 库 。 它 提供 了 轻 量 级 API， 可 以 实现 复杂 3D 演 染 与 动 效 。 
口 许可 : MIT 











C.3.3 moo.fx 


moo. 低 是 基于 Prototype 或 MooTools 使 用 的 开源 动画 库 。 它 的 目标 是 尽 可 能 小 ( 最 新 版 3KB ), 并 
使 开发 者 只 写 尽 可 能 少 的 代码 。moo. 人 x 默认 包含 MooTools， 也 可 以 单独 下 载 ， 与 Prototype 一 起 使 用 
口 许可 : MIT 























O 


C.3.4 Lightbox 


Lightbox 是 创建 简单 图 像 覆 盖 特 效 的 JavaScript 库 , 依赖 Prototype 和 script.aculo.us 实现 特效 。 其 基 
本 思想 是 可 以 使 用 户 在 当前 页 面 的 一 个 覆盖 层 中 查看 一 个 图 像 或 多 个 图 像 。 可 以 自 定义 覆盖 层 的 外 观 和 
过 渡 。 

口 许可 : Creative Commons Attribution 2.5 
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JavaScript 工具 











编写 JavaScript 代码 与 编写 其 他 编程 语言 代码 类 似 ， 都 有 专门 的 工具 帮助 提高 开发 效率 。JavaScript 
开发 者 可 以 使 用 的 工具 一 直 在 增加 ， 这 些 工具 可 以 帮助 开发 者 更 容易 定位 问题 、 优 化 代码 和 部 署 上 线 。 
其 中 有 些 工具 是 在 JavaScript 中 使 用 的 ， 而 其 他 工具 则 是 在 浏览 器 之 外 使 用 的 。 本 附录 会 全 面 介绍 这 些 
工具 ， 并 提供 相关 参考 资源 。 














































































































注意 有 不 少 工具 会 在 本 附录 中 多 次 出 现 。 今天 的 很 多 JavaScript 工具 是 多 合 一 的 ， 因 此 


适用 于 多 个 领域 。 





D.1 包 管 理 


JavaScript 项目 经 常 要 使 用 第 三 方 库 和 资源 ， 以 避免 代码 重复 和 加 速 开 发 。 第 三 方 库 也 称 为 “ 包 ”， 
托管 在 公开 代码 仓库 中 。 包 的 形式 可 以 是 直接 交付 给 浏览 器 的 资源 、 与 项 目 一 起 编译 的 JavaScript 库 ， 
或 者 是 项 目 开 发 流程 中 的 工具 。 这 些 包 总 在 活跃 开发 和 不 断 修订 ， 有 不 同 的 版 本 。JavaScript 包 管 理 器 
可 以 管理 项 目 依赖 的 包 ， 涉 及 获取 和 安装 ， 以 及 版 本 控制 。 

包 管 理 吉 提供 了 命令 行 界面 , 用 于 安装 和 删除 项 目 依 赖 。 项 目的 配置 通常 存储 在 项 目 本 地 的 配置 文 
件 中 。 
















































































D.1.1 npm 


npm， 即 Node 包 管 理 吉 ( Node Package Manager )， 是 Node.js 运行 时 默认 的 包 管 理 器 。 在 npm 仓库 
中 发 布 的 第 三 方 包 可 以 指定 为 项 目 依赖 ， 并 通过 命令 行 本 地 安装 。npm 仓库 包含 服务 端 和 客户 端 
JavaScript 库 。 

npm 是 为 在 服务 器 上 使 用 而 设计 的 ， 服务 器 对 依赖 大 小 并 不 敏感 。 在 安装 包 时 ，npm 使 用 舱 套 依赖 
树 解析 所 有 项 目 依 赖 ， 每 个 项 目 依 赖 都 会 安装 自己 的 依赖 。 这 意味 着 如 果 项 目 依 赖 三 个 包 A、B 和 C， 
而 这 三 个 包 又 都 依赖 不 同 版 本 的 D， 则 npm 会 安装 包 D 的 三 个 版 本 。 



































D.1.2 Bower 


Bower 与 npm 在 很 多 方面 相似 , 包括 包 安 装 和 管理 CLI, 但 它 专注 于 管理 要 提供 给 客户 端的 包 。Bower 
与 npm 的 一 个 主要 区 别 是 Bower 使 用 打 平 的 依赖 结构 。 这 意味 着 项 目 依赖 会 共享 它们 依赖 的 包 ， 用 户 的 任 
务 是 解析 这 些 依 赖 。 例 如 ， 如 果 你 的 项 目 依赖 三 个 包 A、B 和 C， 而 这 三 个 包 又 都 依赖 不 同 版 本 的 D, 那 你 
就 需要 找 一 个 同时 满足 A、B、C 需求 的 包 D。 这 是 因为 打 平 的 依赖 结构 要 求 每 个 包 只 能 安装 一 个 版 本 。 
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D.1.3 JSPM 


JSPM 是 使 用 SystemJS 构建 的 包 管理 器 , 用 动态 模块 加 载 。 这 个 包 管 理 器 本 身 与 npm 类 似 , 但 其 包 
仓库 与 注册 无 关 。 在 npm、GitHub 或 自 定 义 仓 库 中 注册 包 ， 都 可 以 使 用 JSPM 的 CLI 安 装 。JSPM 不 会 
在 服务 器 上 构建 和 预 编译 资源 ， 而 是 通过 SystemJS 按 需 将 包 交 付 给 客户 端 。 与 Bower 类 似 ，JSPM 也 使 
用 打 平 的 依赖 结构 。 
















































































D.1.4 Yarn 

Yarn 是 Facebook 开发 的 定制 包 管 理 器 ， 从 很 多 方面 看 是 npm 的 升级 版 。Yarn 可 以 通过 自己 的 注册 
表 访 问 相 同 的 npm 包 ， 并 且 安 装 方式 与 npm 也 相同 。Yarm 和 npm 的 主要 区 别 是 提供 了 加 速 安装 、 包 组 
存 、 锁 文件 等 功能 ， 且 提供 了 改进 了 包 安 全 功能 。 


D.2 ”模块 加 载 器 


模块 加 载 右 可 以 让 项 目 按 需 从 服务 器 获取 模块 ， 而 不 是 一 次 性 加 载 所 有 模块 或 包含 所 有 模块 的 JS 
文件 。 ECMAScript 6 模块 规范 定义 了 浏览 絮 原 生 支 持 动态 模块 加 载 的 最 终 目标 。 但 现在 , 仍 有 很 多 浏览 
避 不 支持 ES6 模块 加 载 。 因 此 ， 模 块 加 载 右 作为 某 种 腻子 脚本 ， 可 以 让 客户 端 实现 动态 模块 加 载 。 










































































D.2.1 SystemJS 


SystemJS 模块 加 载 器 可 以 在 服务 器 上 使 用 ,也 可 以 在 客户 端 使 用 , 它 支 持 所 有 模块 格式 ,包括 AMD、 
CommonJS、UMD 和 ES6; 也 支持 浏览 器 内 转译 〈 考 虑 到 性 能 ， 不 推荐 在 大 型 项 目 中 使 用 ) 


D.2.2 ReduireJS 
RequireJS 构建 于 AMD 模块 规范 之 上 ， 支 持 特 别 旧 的 浏览 器 。 虽 然 RequireJS 经 实践 证 明 很 不 错 ， 
但 JavaScript 社区 整体 上 还 是 会 抛弃 AMD 模块 格式 。 因 此 不 推荐 在 大 型 项 目 中 使 用 RequireJS 。 


D.3 模块 打包 器 


模块 打包 器 可 以 将 任意 格式 、 任 意 数 量 的 模块 合并 为 一 个 或 多 个 文件 ， 供 客户 端 加 载 。 模 块 打包 咒 
会 分 析 应 用 程序 的 依赖 图 并 按 需 排序 模块 。 一 般 来 说 ,应 用 程序 最 终 只 需要 一 个 打包 后 的 文件 ,但 多 个 
结果 文件 也 是 可 以 配置 生成 的 。 模 块 打包 器 有 时 候 也 支持 打包 原始 或 编译 的 CSS 资源 。 最 终生 成 的 文件 
可 以 自 执 行 ， 也 可 以 多 个 资源 拼接 在 一 起 按 需 执行 。 

























































































D.3.1 Webpack 


Webpack 拥有 强大 的 功能 和 可 扩展 能 力 ， 是 今天 非常 流行 的 打包 工具 。Webpack 可 以 绑 定 不 同 的 模 
块 类 型 ， 支 持 多 种 插件 ， 且 完全 兼容 大 多 数 模 板 和 转译 库 。 


























D.3.2 JSPM 
JSPM 是 构建 在 SystemJS 和 ES6 模块 加 载 器 之 上 的 包 管 理 顺 。JSPM 建议 的 一 个 工作 流 是 把 所 有 模 











附录 D JavaScript 工具 897 








块 打 包 到 一 个 文件 ， 然 后 通过 SystemJS 加 载 。 可 以 通过 JSPM CLI 使 用 这 个 功能 。 





D.3.3 Browserify 

Browserify 是 稍微 有 点 历史 但 久 经 考验 的 模块 打包 器 ， 支 持 Node.js 的 CommonJS require() 依 赖 
请 法 。 
D.3.4 Rollup 

Rollup 在 模块 打包 能 力 方面 与 Browserify 类 似 ， 但 内 置 了 摇 树 优化 功能 。Rollup 可 以 解析 应 用 程 请 
的 依赖 图 ， 排 除 没 有 实际 使 用 的 模块 。 
D.4 编译 /转译 工具 及 静态 类 型 系统 


在 代码 编辑 器 中 写 的 Web 应 用 程序 代码 通常 不 是 实际 发 送 给 浏览 器 的 代码 。 开 发 者 通常 希望 使 用 
很 新 的 ECMAScript 特 性， 而 这 些 特性 未 必 所 有 浏览 器 都 支持 。 此 外 ， 开 发 者 也 经 常 希望 使 用 静态 类 型 
系统 或 特性 在 ECMAScript 规范 之 外 强化 自己 的 代码 。 有 很 多 工具 可 以 满足 上 述 需求 。 















































































































































D.4.1 Babel 


Babel 是 将 最 新 ECMAScript 规范 代码 编译 为 兼容 ECMA 版 本 的 一 个 常用 工具 。Babel 也 支持 React 
的 JSX， 支 持 各 种 插件 ， 与 所 有 主流 构建 工具 兼容 。 




































































D.4.2 Google Closure Compiler 


Google Closure Compiler 是 强大 的 JavaScript 编译 器 ,能 够 执行 各 种 级 别 的 编译 优化 , 同时 也 是 稳健 
的 静态 类 型 检查 系统 。 其 类 型 注解 要 求 以 JSDoc 风格 编写 。 











D.4.3 CoffeeScript 


CoffeeScript 是 ECMAScript 语 法 的 增强 版 ， 可 以 直接 编译 为 常规 JavaScript。CoffeeScript 中 绝 大 部 
分 是 表达 式 ， 这 是 受到 了 Ruby、Python 和 Haskell 的 启发 。 









































D.4.4 TypeScript 

微软 的 TypeScript 是 JavaScript 支持 类 型 的 超 集 ， 增 加 了 稳健 的 静态 类 型 检查 和 主要 语法 增强 。 因 
为 它 是 JavaScript 严格 的 超 集 ， 所 以 常规 JavaScript 代码 也 是 有 效 的 TypeScript 代码 。TypeScript 也 可 以 
使 用 类 型 定义 文件 指定 已 有 JavaScript 库 的 类 型 信息 。 
D.4.5 Flow 


Flow 是 Facebook 推出 的 简单 的 JavaScript 类 型 注解 系统 ,其 类 型 语法 与 TypeScript 非常 相似 , 但 除 
了 类 型 声明 没有 增加 其 他 语言 特性 。 
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D.5 高 性 能 脚本 工具 


关于 JavaScript 的 一 个 常见 批评 是 运行 速度 慢 ， 不 适合 要 求 很 高 的 计算 。 无 论 这 里 所 说 的 “ 慢 ” 是 
否 符合 实际 ， 弓 庸 置疑 的 是 这 门 语言 从 一 开始 就 没有 考虑 支持 敏捷 的 计算 。 为 解决 性 能 问题 ， 有 很 多 项 
目 致力 于 改造 浏览 器 执行 代码 的 方式 ， 以 便 让 JavaScript 代码 的 速度 可 以 接近 原生 代码 速度 ， 同 时 利用 
硬件 优化 。 























D.5.1 WebAssembly 


WebAssembly 项 目 〈 简称 Wasm ) 正在 实现 一 门 语言 ， 该 语言 可 以 在 多 处 执行 〈 可 移植 ) 并 以 二 进 

制 语言 形式 存在 ， 可 以 作为 多 种 低级 语言 (如 C++ 和 Rnust ) 的 编译 目标 。WebAssembly 代码 在 浏览 器 的 

一 个 与 JavaScript 完 全 独立 的 虚拟 机 中 运行 ,与 各 种 浏览 器 API 交 互 的 能 力 极为 有 限 , 它 可 以 与 JavaScript 

和 DOM 以 间接 、 受 限 的 方式 交互 , 但 其 更 大 的 目标 是 创造 一 门 可 以 在 Web 浏览 器 中 ( 以 及 在 任何 地 方 ) 

运行 的 速度 极 快 的 语言 ， 并 提供 接近 原生 的 性 能 和 硬件 加 速 。WebAssembly 系列 规范 在 2019 年 12 月 5 
日 已 成 为 W3C 的 正式 推荐 标准 ， 是 浏览 器 技 术 中 非常 值得 期 待 的 领域 。 













































































D.5.2 asm.js 





asm.js 的 理论 基础 是 JavaScript 编译 后 比 硬 编码 JavaScript 运行 得 更 快 。asm.js 是 JavaScript 的 子 集 ， 
可 以 作为 低级 语言 的 编译 目标 , 并 在 常规 浏览 器 或 Node.js 引 敬 中 执行 。 现 代 JavaScript 引擎 在 运行 时 推 
断 类 型 ， 而 asm.js 代码 通过 使 用 词法 提示 将 这 些 类 型 推断 ( 及 其 相关 操作 ) 的 计算 大 大 降低 。asm.js 广 
泛 使 用 了 定型 数组 ( Typedarray )， 相 比 常规 的 JavaScript 数组 能 够 显著 提升 性 能 。asm.js 没有 
WebAssembly 快 ， 但 通过 编译 显著 提升 了 性 能 。 




































































D.5.3 Emscripten 与 LLVM 


虽然 Emscripten 从 未 在 浏览 器 中 执行 , 但 它 是 重要 的 工具 包 , 可 以 将 低级 代码 编译 为 WebAssembly 
和 asm.js。Emscripten 使 用 LLVM 编译 髓 将 C、C++ 和 Rust 代码 编译 为 可 以 直接 在 浏览 器 中 运行 的 代码 
(asm.js )， 或 者 可 以 在 浏览 器 虚拟 机 中 执行 的 代码 ( WebAssembly )。 


D.6 编辑 器 


VIM、Emacs 及 其 同类 的 文本 编辑 器 非常 优秀 ， 但 随 着 构建 环境 和 项 目 规模 和 逐渐 复杂 ， 编 辑 顺 最 好 
能 够 自动 化 常见 任务 ， 如 代码 自动 完成 、 文 件 自动 格式 化 、 自 动 检查 代码 错误 、 自 动 补足 项 目 目 录 。 目 
前 有 很 多 编辑 器 和 IDE 支持 这 些 功 能 ， 既 有 免费 的 也 有 收费 的 。 
















































































D.6.1 Sublime Text 


Sublime Text 是 比较 流行 的 闭 源 文本 编辑 器 。 它 可 用 于 开发 各 种 语言 ,还 提供 了 大 量 可 扩展 的 持 件 ， 
由 社区 来 维护 。Sublime Text 的 性 能 非常 突出 。 
口 类 型 : 收费 
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D.6.2 _ Atom 


Atom 是 GitHub 的 开源 编辑 右 ， 与 Sublime Text 有 很 多 相同 的 特性 ， 如 社区 在 莲 勃 发 展 上 且 拥 有 第 三 
方 扩展 包 。Atom 的 性 能 稍 差 ， 但 它 在 不 断 地 提升 。 
口 类 型 : 免费 

















D.6.3 Brackets 
Brackets 是 Adobe 的 开源 编辑 器 ， 与 Atom 类 似 。 但 Brackets 是 专门 为 Web 开发 者 设计 的 ， 提 供 了 
许多 非常 令 人 印象 深刻 的 、 面 向 前 端 编码 的 独特 功能 。 该 编辑 器 还 有 丰富 的 搬 件 。 
口 类 型 : 免费 
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D.6.4 Visual Studio Code 


微软 的 Visual Studio Code 是 基于 Electron 框架 的 开源 代码 编辑 器 。 与 其 他 主流 编辑 器 一 样 ，Visual 
Studio Code 是 高 度 可 扩展 的 。 
口 类 型 : 免费 











D.6.5 WebStorm 


WebStorm 是 JetBrains 的 高 性 能 IDE， 号 称 终极 项 目 开发 工具 包 ， 集 成 了 前 沿 的 前 端 框架 ， 也 集成 
了 大 多 数 构建 工具 和 版 本 控制 系统 。 
口 类 型 : 免费 试用 ; 之 后 收费 。 


D.7 构建 工具 、 自 动 化 系统 和 任务 运行 器 


把 本 地 开发 的 项 目 目录 转换 为 线 上 应 用 程序 需要 一 系列 步 又 。 每 个 步骤 都 需要 细 分 为 很 多 子 任务 ， 
如 构建 和 部 署 应 用 程序 要 涉及 模块 打包 、 编 译 、 压 缩 和 发 布 静 态 资源 ， 等 等 。 运 行 单元 和 集成 测试 也 涉 
及 初始 化 测试 套件 和 控制 无 头 浏览 器 。 为 了 主管 理 和 使 用 这 些 任务 更 容易 ,也 出 现 了 很 多 工具 可 以 用 来 
更 高 效 地 组 织 和 拼接 这 些 任务 。 


D.7.1 Grunt 


Grunt 是 在 Node.js 环境 下 运行 的 任务 运行 器 ， 使 用 配置 对 象 声 明 如 何 执行 任务 。Grunt 有 庞大 的 社 
区 和 众多 搬 件 可 以 支持 项 目 构建 。 






































































































































D.7.2 Gulp 


与 Grunt 类 似 ，Gulp 也 是 在 Node.js 环境 下 运行 的 任务 运行 器 。Gulp 使 用 UNIX 风格 的 管道 方式 定 
义 任 务 ， 每 个 任务 表现 为 一 个 JavaScript 函数 。Gulp 也 有 活跃 的 社区 和 丰富 的 扩展 。 











D.7.3 Brunch 


Brunch 也 是 Node.js 构建 工具 ， 旨 在 简化 配置 ， 方便 使 用 。Brunch 虽然 比 Gulp 和 Grunt 出 现 得 晚 ， 
但 仍 有 很 多 插件 可 以 选择 。 
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D.7.4 npm 


npm 严格 来 讲 不 是 构建 工具 , 但 它 提 供 了 脚本 功能 , 很 多 项 目 会 利用 这 个 功能 融合 任务 运行 器 。 脚 
本 是 在 package.json 中 定义 的 。 


D.8 代码 检查 和 格式 化 


JavaScript 代码 调试 有 一 个 问题 ， 没 有 多 少 IDE 可 以 在 输入 代码 时 提示 代码 错误 。 大 多 数 开 发 者 是 
写 一 段 代码 ， 然 后 在 浏览 器 里 刷新 看 看 有 没有 错误 。 在 部 署 之 前 验证 JavaScript 代码 可 以 显著 减少 线 上 
错误 。 代 码 检查 器 ( linter ) 可 以 检查 基本 的 语法 并 提供 关于 风格 的 警告 。 

格式 化 器 ( formatter ) 是 一 种 工具 ， 可 以 分 析 语 法 规则 并 实现 自动 缩 进 、 加 空格 和 对 齐 代 码 等 操作 ， 
也 可 以 自 定 义 完 成 对 文件 内 容 的 其 他 操作 。 格 式 化 器 不 会 破坏 或 修改 代码 或 者 代码 的 语义 ， 因 为 它们 可 
以 避免 做 出 影响 代码 执行 的 修改 。 













































































D.8.1 ESLint 


ESLint 是 开源 的 JavaScript 代码 检查 器 ， 由 本 书 前 几 版 的 作者 Nicholas Zakas 独立 开发 ; 完全 “可 
插 拔 ”， 以 常识 化 规则 作为 默认 规则 ， 支 持 配 置 ; 有 大 型 可 修改 和 可 切换 的 规则 库 ， 可 以 用 来 调试 工具 
的 行为 。 























D.8.2 Google Closure Compiler 


Google Closure Compiler 内 置 了 一 个 代码 检查 工具 ， 可 以 通过 命令 行 参数 激活 。 这 个 代码 检查 器 基 
于 代码 的 抽象 语法 树 工 作 ， 因 此 不 会 检查 空格 、 缩 进 或 其 他 不 影响 代码 执行 代码 组 织 问题 。 


D.8.3 JSLint 


JSLint 是 Douglas Crockford 开发 的 JavaScript 验证 右 。JSLint 从 核心 层面 检查 语法 错误 ， 以 最 大 限 
度 保证 跨 浏览 器 兼容 作为 最 低 要 求 。( JSLint 遵循 最 严格 的 规则 以 确保 代码 最 大 的 兼容 性 。) 可 以 启动 
Crockford 关于 代码 风格 的 警告 , 包括 代码 格式 、 使 用 未 声明 的 变量 , 等 等 。 JSLint 虽然 是 使 用 JavaScript 
写 的 ， 但 可 以 通过 基于 Java 的 Rhino 解释 器 在 命令 行 执行 ， 也 可 以 通过 WScript 或 其 他 JavaScript 解释 
器 执行 。 它 的 网 站 提供 了 针对 每 个 命令 行 解释 器 的 自 定义 版 。 


D.8.4 JSHint 


JSHint 是 JSLint 的 分 支 ， 支 持 对 检查 规则 更 宽泛 的 自 定义 。 与 JSLint 类 似 ，JSHint 也 先 检查 语法 错 
误 ， 然 后 再 检查 有 问题 的 代码 模式 。JSLint 的 每 项 检查 JSHint 中 也 都 有 ,但 开发 者 可 以 更 好 地 控制 应 用 
哪些 规则 。 同 样 与 JSLint 类 似 ，JSHint 可 以 使 用 Rhino 在 命令 行 中 执行 。 



























































































































































D.8.5 ClangFormat 


ClangFormat 是 构建 在 Clang 项 目的 LipFormat 库 基础 上 的 格式 化 工具 。 它 使 用 了 Clang 格式 化 规则 
自动 重新 组 织 代码 (不 会 改变 语义 结构 )。ClangFormat 可 以 在 命令 行 中 使 用 ， 也 可 以 集成 到 编辑 器 里 。 
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D.9 压缩 工具 


JavaScript 构建 过 程 的 一 个 重要 环 广 就 是 压缩 输出 ， 吻 除 多 余 字 符 。 这 样 可 以 保证 只 将 最 少 的 字 节 
量 传输 到 浏览 器 进行 解析 ， 用 户 体验 会 更 好 。 有 不 少 压缩 工具 ， 它 们 的 压缩 率 有 所 不 同 。 


D.9.1 Uglify 


Uglify 现在 是 第 3 版 ”, 是 可 以 压缩 、 美 化 和 最 小 化 JavaScript 代码 的 工具 包 。 它 可 以 在 命令 行 运行 ， 
可 以 接收 极为 丰富 的 配置 选项 ， 实 现 满足 需求 的 自 定义 压缩 。 
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D.9.2 Google Closure Compiler 

虽然 严格 来 讲 并 不 是 压缩 工具 ， 但 Google Closure Compiler 也 在 其 优化 工具 中 提供 了 不 同 级 别 的 优 
化 ， 能 够 缩小 代码 体积 。 
D.9.3 JSMin 


JSMin 是 Douglas Crockford 用 C 语言 写 的 一 个 代码 压缩 程序 ， 能 对 JavaScript 进行 基本 的 压缩 。 它 
主要 用 于 删除 空格 和 注释 ， 确 保 结果 可 以 正确 运行 。JSMin 也 提供 了 Window 可 执行 文件 ， 有 C 语言 和 
其 他 语言 的 源 代码 。 


D.9.4 Dojo ShrinkSafe 


Dojo Toolkit 团队 开发 的 ShrinkSafe 会 使 用 Rhino 先 把 JavaScript 代码 解析 为 符号 流 ， 然 后 再 安全 地 
压缩 代码 。 与 JSMin 一 样 ，ShrinkSafe 也 会 删除 多 余 的 空格 〈 但 不 删除 换行 ) 和 注释 ， 且 会 更 进一步 将 
局 部 变量 名 替换 为 两 个 字符 的 变量 名 。 因 此 结果 比 JSMin 压缩 后 的 更 小 ， 不 会 引入 语法 错误 。 


D.10 单元 测试 
大 多 数 JavaScript 库 会 使 用 某 种 形式 的 单元 测试 来 测试 自己 的 代码 ， 有 的 还 会 将 自己 的 单元 测试 框 


架 公 之 于 众 ， 供 他 人 使 用 。 测 试 驱动 开发 (TDD，Test Driven Development ) 是 以 单元 测试 为 中 心 的 软 
件 开发 过 程 。 







































































































































































D.10.1 Mocha 


Mocha 是 目前 非常 流行 的 单元 测试 框架 ,为 开发 单元 测试 提供 了 优秀 的 配置 能 力 和 可 扩展 性 ,Mocha 
的 测试 非常 灵活 ， 顺 序 执行 可 以 保证 生成 准确 的 报告 且 更 容易 调试 。 












































D.10.2 Jasmine 


Jasmine 虽然 是 比较 老 的 单元 测试 框架 ， 但 仍 非常 流行 。 它 内 置 了 单元 测试 所 需 的 一 切 ， 没 有 外 部 
依赖 ， 而 且 语 法 简单 易 读 。 











J 编辑 本 书 时 仍 是 第 3 版 。 一 一 编者 注 
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D.10.3 quUnit 


qUnit 是 为 jQuery 设计 的 单元 测试 框架 。 事 实 上 , jQuery 本 身 在 所 有 测试 中 都 使 用 qUnit。 除 此 之 外 ， 
qUnit 对 jQuery 没有 依赖 ， 可 用 于 测试 任何 JavaScript 代码 。qUnit 非常 简单 ， 容 易 上手。 
























































D.10.4 JsUnit 

JsUnit 是 早期 的 JavaScript 单 元 测试 库 , 不 依赖 任何 JavaScript 库 ,JsUnit 是 流行 的 Java 测 试 框架 JUnit 
的 端口 。 测 试 在 页 面 中 运行 ， 可 以 设置 为 自动 测试 并 将 结果 提交 给 服务 器 。JsUnit 的 网 站 上 包含 示例 和 
文档 。 






























































D.10.5 Dojo Object Harness 
Dojo Object Harness (DOH ) 最 初 是 Dojo 内 部 的 单元 测试 工具 ， 后 来 开放 给 所 有 人 使 用 。 与 其 他 框 
架 一 样 ，DOH 的 测试 也 是 在 浏览 需 中 运行 的 。 


D.11 文档 生成 器 


大 多 数 IDE 包含 主语 言 的 文档 生成 器 。 因 为 JavaScript 没有 官方 IDE, 所 以 过 去 文档 要 么 手动 生成 ， 
要 么 借用 其 他 语言 的 文档 生成 器 生成 。 不 过 ， 目 前 已 出 现 了 一 些 面向 JavaScript 的 文档 生成 器 。 


D.11.1 ESDoc 


ESDoc 能 够 为 JavaScript 代码 生成 非常 高 级 的 文档 页 面 ， 包 括 从 文档 页 面 链接 到 源 代码 的 功能 。 
ESDoc 还 有 一 个 插件 库 可 以 扩展 其 功能 。 不 过 ，ESDoc 要 求 代码 必须 使 用 ES6 模块 。 






























































D.11.2 documentation.js 




















documentation.js 可 以 处 理 代码 中 的 JSDoc 注释 , 自动 生成 HTML、Markdown 或 JSON 格式 的 文档 。 
它 兼容 最 新 版 本 的 ECMAScript 和 所 有 主流 构建 工具 ， 也 支持 Flow 的 注解 。 








D.11.3 Docco 

按照 其 网 站 的 描述 ，Docco 是 “简单 快捷 ”的 文档 生成 器 。 这 个 工具 的 理念 是 以 简单 的 方式 生成 描 
述 代码 的 HTML 页 面 。Docco 在 某 些 情况 下 会 出 问题 ， 但 它 确实 是 生成 代码 文档 的 极 简 方 法 。 
D.11.4 JsDoc Toolkit 


JsDoc Toolkit 是 早期 的 JavaScript 文档 生成 器 。 它 要 求 代 码 中 包含 Javadoc 风格 的 注释 , 然后 可 以 基 
于 这 些 注 释 生 成 HTML 文件 。 可 以 使 用 预 置 的 JsDoc 模板 或 自己 创建 的 模式 来 自 定义 生成 的 HTML 页 
面 格式 。JsDoc Toolkit 是 个 Java 包 。 


D.11.5 YUI Doc 


YUI Doc 是 YUI 的 文档 生成 器 。 该 生成 器 是 用 Python 写 的 , 因此 要 求 安 装 Python 运行 时 。YUI Doc 
输出 的 HTML 文件 中 集成 了 基于 YUI 的 自动 完成 部 件 的 属性 和 方法 搜索 功能 。 与 JsDoc 一 样 ,，YUI Doc 
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要 求 代 码 中 包含 Javadoc 风格 的 注释 。 可 以 通过 修改 默认 HTML 模板 和 关联 的 样式 表 来 修改 默认 的 
HTML 输出 。 


D.11.6 AjaxDoc 





AjaxDoc 的 目标 与 前 面 的 文档 生成 器 稍 有 不 同 。 它 不 会 为 JavaScript 代码 创建 HTML 文件 ， 而 是 会 
创建 与 NET 语 言 (如 C#、Visual Basic ) 兼容 的 XML 格式 。 这 样 就 可 以 使 用 标准 .NET 文档 生成 器 来 创 
建 HTML 文档 。AjaxDoc 要 求 所 有 文档 注释 的 格式 与 NET 语言 的 文档 注释 格式 类 似 。AjaxDoc 是 为 
ASPNETAjax 解决 方案 而 创建 的 ， 但 也 可 以 用 于 独立 的 项 目 。 
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令 深入 挖掘 JavaScript 语 言 本 质 ， 简 练 形象 地 解释 抽象 概念 ， 打 通 
JavaScript 的 任 督 二 脉 
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深入 理解 JavaScript 特性 


令 JavaScript 之 父 Brendan Eich 作 序 推荐 

将 JavaScript 新 特性 融入 简单 易 懂 的 示例 中 ， 助 你 大 幅 提升 代码 表 
达能 力 

书号 : 978-7-115-51040-2 

定价 : 79.00 元 


JavaScript 语法 简明 手册 


令 去 基础 了 解 JavaScript 语 法 要 点 
令 彩色 代码 图 展现 ES6 和 ES10 的 重要 特性 


书号 : 978-7-115-53992-2 
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JavaScript 设计 模式 与 开发 实践 





4 腾讯 前 端 Alloy Team 团 队 出 品 ， 资 深 前 端 工程 师 曾 探 力 作 
全 面 涵盖 专门 针对 JavaScript 的 16 个 设计 模式 
令 深入 剖析 面向 对 象 设 计 原 则 、 面 向 对 象 编程 技巧 及 代码 重 构 
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JavaScript 高 级 程序 设计 ,wsm， 


中 文 版 累计 销量 320 000+ 册 ，JavaScript“ 红 宝 书 ” 全 新 升级 
涵盖 ECMAScript 2019， 全 面 深入 ， 入 门 和 进 阶 俱 佳 
结合 视频 讲解 ， 助 你 轻松 掌握 JavaScript 新 特性 与 前 端 实践 


wa SOT 


“这 本 书 就 不 用 我 多 介绍 了 ， 它 是 和 “犀牛 书 ” 并 列 的 “ 红 宝 书 ”， 当 年 我 学 JavaScript 的 案头 参考 书 之 
一 。 李 松 峰 老师 是 优秀 的 技术 译 者 ， 也 是 奇 舞 团 资深 的 前 端 工程 师 和 新 人 导师 ， 我 相信 这 本 书 经 过 松 峰 老师 的 翻 
译 ， 一 定 能 在 JavaScript 学 习 之 路 上 让 你 获 益 良 多 。 


一 一 月 影 奇 兽 团 前 团 长 


“我 认为 《JavaScript 高 级 程序 设计 》 这 本 书 最 大 的 特点 就 是 它 是 体系 化 的 前 端 教程 ， 它 是 可 以 拿 来 做 前 端 开 
发 的 教材 的 。JavaScript 这 几 年 出 了 不 少 好 书 ， 但 多 数 还 是 在 讲 单 点 ， 也 有 些 书 虽然 比较 全 面 ， 但 是 组 织 上 不 成 体 
系 ， 像 手册 、 文 档 一 样 ， 没 法 拿 来 学 。 这 本 《JavaScript 高 级 程序 设计 》 就 不 一 样 ， 它 很 适合 拿 来 系统 学 习 。” 


一 一 程 动 非 〈winter ) 


“《 JavaScript 高 级 程序 设计 》 第 1 版 出 版 时 ， 我 刚刚 参加 工作 。 我 从 这 本 书 学 到 了 前 端 领域 的 基础 知识 ， 
并 由 此 走 进 了 前 端 开 发 的 大 门 。 感 谢 它 一 直 陪伴 我 早期 成 长 的 岁月 。 后 来 我 把 这 本 书 推荐 给 团队 的 每 一 位 新 人 ， 
作为 他 们 的 参考 书 。“ 勿 在 浮 沙 筑 高 台 ，， 希 望 他 们 通过 这 本 书 打 好 基础 、 走 得 更 远 。 相 信 《JavaScript 高 级 程 
序 设计 》 的 第 4 版 依旧 是 前 端 工程 师 案头 的 经 典 参考 书 。” 
一 一 洒 霓 增 关 团 点 评 交 通 事业 部 终端 研发 团队 负责 人 


“学 习 前 端 ， 绕 不 开 的 3 本 书 : “犀牛 书 ” “蝴蝶 书 ”， 以 及 这 本 “ 红 宝 书 ” 。 对 我 而 言 ，“ 犀 牛 书 ” 太 厚 
碎 ，“ 蝴 蝶 书 ” 太 薄 精 ， 都 不 是 那么 容易 阅读 ;而 这 本 “ 红 宝 书 ” 刚 刚好 ， 对 初学 者 十 分 友好 。” 


一 一 朴 灵 《深入 浅 出 Nodejs》 作 者 
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